ES6 interview summary

Time:2021-8-1

Summary of interview questions:https://segmentfault.com/a/11…

Map、Set

reference resourceshttps://www.runoob.com/w3cnot…
Map
Map is the structure of a group of key value pairs, which has extremely fast search speed.
For example, suppose you want to find the corresponding grades according to the students’ names. If you use array, you need two arrays:

var names = ['Michael', 'Bob', 'Tracy'];
var scores = [95, 75, 85];

Given a name, to find the corresponding score, first find the corresponding position in the names, and then take the corresponding score from the scores. The longer the array, the longer the time.
If you use map, you only need a cross reference table of “name” – “score” to find the score directly according to the name. No matter how large the table is, the search speed will not slow down. Write a map in JavaScript as follows:

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95

Initializing a map requires a two-dimensional array, or initializing an empty map directly。 Map has the following methods:

var m = new Map(); //  Empty map
m.set('Adam', 67); //  Add new key value
m.set('Bob', 59);
m.has('Adam'); //  Whether key 'Adam' exists: true
m.get('Adam'); // 67
m.delete('Adam'); //  Delete key 'Adam'
m.get('Adam'); // undefined
Since a key can only correspond to one value, if you put value into a key multiple times, the following value will flush out the previous value:
var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88

Set
Like map, set is also a set of keys, but does not store value. Since keys cannot be repeated, there are no duplicate keys in the set.
To create a set, you need to provide an array as input, or directly create an empty set:

var s1 = new Set(); //  Empty set
var s2 = new Set([1, 2, 3]); //  Including 1, 2 and 3

Duplicate elements are automatically filtered in the set:

var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

Note that the number 3 and the string ‘3’ are different elements.
You can add elements to the set by using the add (key) method. You can add elements repeatedly, but it will not have any effect:

s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; //  Still set {1, 2, 3, 4}

Elements can be deleted through the delete (key) method:

var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}

What is the difference between maps and objects?

The key of an object can only be strings or symbols, but the key of a map can be any value.

The key values in the map are ordered (FIFO principle), while the keys added to the object are not.

The number of key value pairs of map can be obtained from the size attribute, while the number of key value pairs of object can only be calculated manually.

Objects have their own prototypes. The key names on the prototype chain may conflict with the key names you set on the object.

What is the difference between for in and for of?

Example 1:

const obj = {
        a: 1,
        b: 2,
        c: 3
    }
    for (let i in obj) {
        console.log(i) // a、 b、c 
    }
    for (let i of obj) {
        Console.log (I) // uncaught typeerror: Obj is not Iterable
    }

Example 2:

const arr = ['a', 'b', 'c']
    //For in loop
    for (let i in arr) {
        Console.log (I) // data index returned by 0,1,2
    }
    // for of
    for (let i of arr) {
        console.log(i)//a,b,c
    }

Example 3:

const arr = ['a', 'b']
    //Manually add an attribute to the ARR array
    arr.name = 'qiqingfu'
    //The for in loop can traverse the key name name
    for (let i in arr) {
        console.log(i) // a,b,name 
    }
    for (let i of arr) {
        console.log(i)//a,b
    }

Combined with the above examples, the analysis shows that:
The for… In statement is used to traverse the properties of an array or object (loop through the properties of an array or object).
For in gets the key or array of the object and the subscript of the string
For of, like foreach, gets the value directly
For of cannot be an object, and an error will be reported
In short, for in is the traversal key name and for of is the traversal key value.

What is the difference between var let const?

Var declared variables can be declared repeatedly, while let cannot be declared repeatedly
 VaR is not limited to the block level, while let is limited to the block level
 Var will be mapped to window (a property will be attached), while let will not be mapped to window
 Var can access variables on the declaration, while let has temporary deadband. Accessing variables on the declaration will report an error
 Value must be assigned after const declaration, otherwise an error will be reported
 Const defines an immutable quantity. If it is changed, an error will be reported
 Like let, const does not map to window, supports block level scope, and accesses variables on the declaration will report an error

Understanding of arrow function?

1. Basic form of arrow function

let func = (num) => num;
let func = () => num;
let sum = (num1,num2) => num1 + num2;
[1,2,3].map(x => x * x);

2. Basic characteristics of arrow function

(1) . the arrow function this is this of the parent scope, not this when called
This of the arrow function always points to its parent scope. No method can be changed, including call, apply and bind.
This of a normal function points to the object that calls it.

let person = {
    name:'jike',
    init:function(){
        //Add a click event to the body to see how the this attribute is different after clicking
        document.body.onclick = ()=>{
            alert(this.name);//??  This object is called by default in the browser. It is variable?                  
        }
    }
}
person.init();

In the above example, init is a function called by person.init, whose internal this is the person itself, and the onclick callback is an arrow function,
The internal this is the parent scope’s this and person, and you can get name.

let person = {
    name:'jike',
    init:()=>{
        //Add a click event to the body to see how the this attribute is different after clicking
        document.body.onclick = ()=>{
            alert(this.name);//??  This object is called by default in the browser. It is variable?                  
        }
    }
}
person.init();

In the above example, init is an arrow function, its internal this is a global window, and onclick’s this is the init function’s this, which is also a window,
The obtained this.name is undefined.

(2) . arrow function cannot be used as constructor, and new cannot be used

//The constructor is as follows:
function Person(p){
    this.name = p.name;
}
//If the arrow function is used as the constructor, it is as follows
var Person = (p) => {
    this.name = p.name;
}

Since this must be an object instance and the arrow function has no instance, this here points elsewhere and cannot generate a person instance, which is self contradictory.

(3) . the arrow function does not have arguments, caller, callee

The arrow function itself does not have arguments. If the arrow function is inside a function, it will use the arguments of the external function.
If you want to receive indefinite parameters in the arrow function, you should use the rest parameter… To solve it.

let B = (b)=>{
  console.log(arguments);
}
B(2,92,32,32);   // Uncaught ReferenceError: arguments is not defined

let C = (...c) => {
  console.log(c);
}
C(3,82,32,11323);  // [3, 82, 32, 11323]

(4) . the arrow function is called through call and apply. It does not change the direction of this, but only passes in parameters

let obj2 = {
    a: 10,
    b: function(n) {
        let f = (n) => n + this.a;
        return f(n);
    },
    c: function(n) {
        let f = (n) => n + this.a;
        let m = {
            a: 20
        };
        return f.call(m,n);
    }
};
console.log(obj2.b(1));  // 11
console.log(obj2.c(1)); // 11

(5) . arrow function has no prototype property

var a = ()=>{
  return 1;
}

function b(){
  return 2;
}

console.log(a.prototype);  // undefined
console.log(b.prototype);   // {constructor: ƒ}

(6) . the arrow function cannot be used as a generator function, and the yield keyword cannot be used

(7) When the arrow function returns an object, it needs to add a parenthesis

var func = () => ({ foo: 1 }); // correct
var func = () => { foo: 1 };   // error

(8) The method declared by the arrow function in ES6 class is an instance method, not a prototype method

//deom1
class Super{
    sayName(){
        //do some thing here
    }
}
//The sayname method can be accessed through super.prototype. All methods defined in this form are defined on the prototype
var a = new Super()
var b = new Super()
a.sayName === b.sayName //true
//All instantiated objects share the sayname method on the prototype

//demo2
class Super{
    sayName =()=>{
        //do some thing here
    }
}
//The sayname method cannot be accessed through super.prototype, which is not defined on the prototype
var a = new Super()
var b = new Super()
a.sayName === b.sayName //false
//The instantiated objects have their own sayname methods, which requires more memory space than Demo1

Therefore, try not to declare methods with arrow functions in class.

(9) The multiple arrow function is a high-order function, which is equivalent to an embedded function

const add = x => y => y + x;
//Equivalent to
function add(x){
  return function(y){
    return y + x;
  };
}

(10) . common errors in arrow functions

let a = {
  foo: 1,
  bar: () => console.log(this.foo)
}

a.bar()  //undefined

This in the bar function points to the parent scope, but the a object has no scope. Therefore, this is not a and the print result is undefined

function A() {
  this.foo = 1
}

A.prototype.bar = () => console.log(this.foo)

let a = new A()
a.bar()  //undefined

The prototype uses the arrow function. This refers to its parent scope, not object a, so the expected result cannot be obtained

What is the difference between ordinary functions and arrow functions?

//Arrow function
let fun = () => {
    console.log('lalalala');
}
//Ordinary function
function fun() {
    console.log('lalla');
}

What should we pay attention to when using arrow functions?

(1) With the arrow function, this does not point to the window, but to the parent (the point is variable)
(2) Arguments object cannot be used
(3) It cannot be used as a constructor, which means that the new command cannot be used, otherwise an error will be thrown
(4) You cannot use the yield command, so the arrow function cannot be used as a generator function

Understanding of the then () method

Then() is only available in promise objects.
1. The then () method is executed asynchronously
2. It means that when the method before then () is executed, the internal program of then () is executed, so as to avoid the problem of not obtaining data.
3. Syntax: promise. Then (oncompleted, onrejected);
4. Parameters

1. Required( promise)
    Promise object
2. Required( onCompleted)
    The fulfillment handler function to run when the promise completes successfully
3. Optional( onRejected)
    An error handler function that promises to run when rejected

Realization of promise principle

1. The simplest implementation
Based on the above application scenario, it is found that promise can have three states: pedding, fulfilled and rejected

The initial state of the pedding promise object instance when it is created
Fulfilled can be understood as a state of success
Rejected can be understood as a failed state

Promise.all can wrap multiple promise instances into a new promise instance. At the same time, the return values of success and failure are different. When successful, a result array is returned, while when failed, the value of the first rejected failure state is returned.
The specific codes are as follows:

let p1 = new Promise((resolve,reject)=>{
   Resolve ('succeeded ')
})
let p2 = new Promise((resolve,reject)=>{
   resolve('success')
}) 
Let P3 = promise. Reject ('failed ')
Promise.all([p1,p2]).then((result)=>{
   Console.log (result) // ['succeeded', 'success']
}).catch((error)=>{
   console.log(error)
})
Promise.all([p1,p3,p2]).then((result)=>{
   console.log(result) 
}).catch((error)=>{
   Console.log (error) // failed. Type "failed"
})

Promise.all is very useful when processing multiple asynchronous processes. For example, a page needs to wait for two or more ajax data to come back before it is displayed normally. Before that, only the loading icon is displayed.