preface

First published article, do not like spray, thank you! I have been working at the front end of a small team for nearly two years since I graduated from university. I did not have a good standard, and I always finished my work with the goal of solving problems and realizing demands. As a result, I found that my foundation is getting worse. Most of the time, in work, some simple functions and methods need to go to Baidu. Maybe you can solve the problem well, but it is inevitable that you will encounter the same problem next time.

The interview records

The first time to a large company interview, the mood is still quite nervous, resulting in many know the answer did not answer, but also reflected their own foundation is insufficient, summarized the interview questions.

  • How do Js objects add and deduplicate

1. Object. The assign () method

The ** object.assign ()** method is used to copy the values of all enumerable properties from one or more source objects to target objects. It will return the target object.

const target = { a: 1.b: 2 };
const source = { b: 4.c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }
Copy the code

Object.assign() merges objects with the same attributes

const o1 = { a: 1.b: 1.c: 1 };
const o2 = { b: 2.c: 2 };
const o3 = { c: 3 };

const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
Copy the code

2. Extension operators of ES6 objects

let obj1 = { a: 1 };
let obj2 = { b: 1 };
letnewObj = { ... obj1,... obj2}console.log(newObj); //{ a: 1, b : 1 }The equivalent oflet newObj1 = Object.assign({},obj1,obj2)
Copy the code
  • Array addition and de-duplication

concat()

The **concat()** method is used to merge two or more arrays. This method does not change an existing array, but returns a new array.

const array1 = ['a'.'b'.'c'];
const array2 = ['d'.'e'.'f'];

console.log(array1.concat(array2));
// expected output: Array ["a", "b", "c", "d", "e", "f"]
Copy the code

Simple array de-duplication

Method one:let arry = [1.3.4.7.4.2.9.1]
let newArry = arry.filter((item,index,self) = >{
    if( self.indexOf(item) === index) return item
})
console.log(newArry) // [1, 3, 4, 7, 2, 9]Method 2: Use ES6Setduplicate removallet arry = [1.3.5.7.5.1.3]
console.log(Array.from(new Set(arry)))	//[1, 3, 5, 7]
console.log([...new Set(arry)])//[1, 3, 5, 7]
new Set() out for oneObjectMethod 3: includeslet arry = [1.3.5.7.5.1.3]
let newArry = []
for(let i=0; i<arry.length; i++){if(! newArry.includes(arry[i])){ newArry.push(arry[i]) } }console.log(newArry) //[1, 3, 5, 7]

Copy the code

Object array decrement

Method 1: use the object access attribute method, judge whether the attribute value exists, if not, add.let arry = [{
    key: 1.value: 'hello'}, {key:2.value:'word'}, {key:1.value:'hello'
}]

let result = [ ];  
let obj = { };
for(let i=0; i<arry.length; i++){if(! obj[arry[i].key]){ result.push(arry[i]) obj[arry[i].key] =true}}console.log(obj) //{ '1': true, '2': true }
console.log(result) //[ { key: 1, value: 'hello' }, { key: 2, value: 'word' } ]

2.methods2: Uses the Reduce method to traverse the number grouplet newArry = arry.reduce( (acc , cur ) = >{
   obj[cur.key]?' ':obj[cur.key]=true&&acc.push(cur)
    return acc
},[])
console.log(newArry) //[ { key: 1, value: 'hello' }, { key: 2, value: 'word' } ]

Copy the code
  • thisThe keyword

In most cases, how the function is called determines the value of this. This cannot be assigned during execution, and its value may vary each time the function is called. ES5 introduced the bind method to set the this value of a function regardless of how the function is called, and ES2015 introduced the arrow function that supports lexical parsing of this (which sets the value of this within the closed execution environment). MDN

The global environment

This refers to the global object in the global execution environment (outside any function body), whether in strict mode or not.

// In the browser, the window object is also a global object:
console.log(this= = =window); // true

a = 37;
console.log(window.a); / / 37

this.b = "MDN";
console.log(window.b)  // "MDN"
console.log(b)         // "MDN"
Copy the code

Function (in-run) environment

In non-strict mode:

function f1(){
    return this;
}
// In the browser:
console.log(f1() === window);//true
/ / the Node:
console.log(f1() === global);//true
Copy the code

In strict mode:

 "use strict"; // Here is strict mode
function f2(){
  return this;
}
console.log(f2())	//undefined
Copy the code

If you want to pass the value of this from one environment to another, use the Call or apply methods.

var a = 'window';
var obj = { a: 'Custom'}
function f1(){
    return this.a
}
f1() // 'window'
f1.call(obj) //'Custom'
f1.apply(obj) //'Custom'
Copy the code

The bind method

ECMAScript 5 introduces function.prototype.bind. Calling f.bind(someObject) creates a function with the same body and scope as f, but in this new function, this is permanently bound to the first argument of bind, regardless of how the function is called.

function f(){
  return this.a;
}

var g = f.bind({a:"azerty"});
console.log(g()); // azerty

var h = g.bind({a:'yoo'}); // Bind only works once!
console.log(h()); // azerty

var o = {a:37.f:f, g:g, h:h};
console.log(o.f(), o.g(), o.h()); // 37, azerty, azerty
Copy the code

To be supplemented…

  • Center left, right, top, bottom in div
<div class="div1"> </div> </div> </div> justify-content: center; Align -items: center} div1{position:relative; } .div2{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }Copy the code

Continuously updated…