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
this
The 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…