ES6 Interview Summary

The interview summary: https://segmentfault.com/a/11…

The Map, the Set

Refer to https://www.runoob.com/w3cnot… Map Map is a structure of key-value pairs with extremely fast lookups. For example, if you want to find a grade by the name of a classmate, you need two Arrays:

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

Given a name, to find the corresponding score, it is necessary to first find the corresponding position in names, and then retrieve the corresponding score from scores. The longer Array, the longer it takes. If you use Map, you only need a “name” – “score” comparison table, and search results directly according to the name. No matter how big the table is, the search speed will not be slow. Write a Map in JavaScript like this:

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

Initializing a Map requires a two-dimensional array, or simply initializing an empty Map. 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'); // if there is key 'Adam': true m.get('Adam'); // 67 m.delete('Adam'); // delete key 'Adam' m.get('Adam'); Var m = new Map(); var m = new Map(); var m = new Map(); m.set('Adam', 67); m.set('Adam', 88); m.get('Adam'); / / 88

SET A SET, like a Map, is a Set of keys, but it does not store values. Since keys cannot be repeated, there are no duplicate keys in a Set. To create a Set, either provide an Array as input or simply create an empty Set:

var s1 = new Set(); Var s2 = new Set([1, 2, 3]); var s2 = new Set([2, 3]); // Includes 1, 2, 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 a Set using the add(key) method, which can be repeated but has no effect:

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

We can delete elements with the delete(key) method:

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

What’s the difference between Maps and Objects?

An Object’s key can only be a string or a Symbols, but a Map’s key can be any symbol.

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

The number of key-value pairs for Map can be retrieved from the size property, while the number of key-value pairs for Object can only be calculated manually.

Each Object has its own prototype, and 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', For (let I of arr) {console.log(I)} for (let I of arr) {console.log(I)} console.log(i)//a,b,c }

Example 3:

const arr = ['a', Arr. Name = 'qiqingfu' // For (let I in arr) {console.log(I) // A, B, name } for (let i of arr) { console.log(i)//a,b }

For example, for… The in statement is used to iterate over arrays or objects’ properties (iterating over arrays or objects’ properties). For in gets the key or array of the object, the index of the string for of just like forEach, gets the value directly for of can’t get an object, it gets an error so simply for in is the name of the traversal key, and for of is the traversal key value.

What is the difference between var let const?

Let is bounded by the block level. Var maps to the window. Let does not map to the window. Var can access variables on top of the declaration, let has a deadzone, A value must be assigned after the declaration, otherwise it will return a const. Defining an immutable quantity that changes to a const will return an error. Like a let, it does not map to window

What is the 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). This is the parent scope of this function, not the call of this this arrow function is always referred to its parent scope, any method can be changed, including call, apply, bind. The this of a normal function refers to the object on which it was called.

Let person = {name:'jike', init:function(){// Add a click event for the body, Document.body.onclick = ()=>{alert(this.name); document.body.onclick = ()=>{alert(this.name); / /?? This is called by default in the browser object, mutable? } } } person.init();

In the example above, init is a function called as person.init, inside which this is the person itself, and onclick callback is the arrow function, inside which this is the parent scope of this, which is the person, and gets the name.

Let person = {name:'jike', init ()=>{// Add a click event for the body, Document.body.onclick = ()=>{alert(this.name); document.body.onclick = ()=>{alert(this.name); / /?? This is called by default in the browser object, mutable? } } } person.init();

In the example above, init is the arrow function, inside which this is the global window, onclick this is the init function this is also the window, the result of this.name is undefined.

(2). Arrow function cannot be used as constructor, can not use new

Function Person(p){this.name = p.name; this.name = p.name; Var Person = (p) => {this.name = p.name; this.name = p.name; this.name = p.name; this.name = p.name; }

Since this must be an instance of an object, and the arrow function has no instance, this points elsewhere and cannot produce a Person instance.

Arrow functions do not have arguments, caller, callee

Arrow functions have no arguments themselves. If the arrow function is inside a function, it will use arguments from the outside function. To receive indeterminate arguments in an arrow function, use REST arguments… To solve.

let B = (b)=>{ console.log(arguments); },92,32,32 (2 B); // Uncaught ReferenceError: arguments is not defined let C = (... c) => { console.log(c); } C (3,82,32,11323); // [3, 82, 32, 11323]

(4). Arrow function is called through call and apply, and will not change this pointing, only pass 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). Arrow functions cannot be used as Generator functions, and the yield keyword cannot be used

(7). When an arrow function returns an object, add a parenthesis

var func = () => ({ foo: 1 }); 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}} // super. prototype Var a = new Super() var b = new Super() a.setName === b.setName //true // DemO2 class Super{sayName =()=>{//do some thing here}} // The sayName method cannot be accessed via super. prototype. Var a = new Super() var b = new Super() a.setName === b.setName //false // Requires more memory space than DEMO1

Therefore, use arrow functions to declare methods in the Class as little as possible.

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

const add = x => y => y + x; Function add(x){return function(y){return function(y){return function(x); }; }

(10). Common errors of arrow function

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

a.bar()  //undefined

This in bar refers to the parent scope. The A object has no scope, so this is not A and is printed as undefined

function A() {
  this.foo = 1
}

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

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

The arrow function is used on the prototype. This points to its parent scope, not the object A, so it does not get the expected result

What’s the difference between a normal function and an arrow function?

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

What should I pay attention to when using arrow functions?

(3) Arguments can't be used as a constructor, which means you can't use a new command, which would throw an error. (4) You can't use the yield command. (4) You can't use the yield command. Therefore, the arrow function cannot be used as the Generator function

Understanding of the then() method

Then () is available only in Promise objects. Then () method is executed asynchronously. If the method before then() is executed, then() method is executed asynchronously. 3. Syntax: Promise. Then (onCompleted,onRejected); Parameters of 4.

1. Required. Promise object 2. Required. (onCompleted) The fulfilment handler function 3 to be run upon successful completion. Optional. (OnRejected) promises error handler functions to run if rejected

Promise Principle Implementation

1. The simplest implementation can discover a promise based on the above application scenario, which can have three states: pedding, Fulfilled and Rejected.

The initial state of the Pedding Promise object instance can be interpreted as a successful state and the Rejected state can be interpreted as a failed state

Promise. All can wrap multiple Promise instances into a new Promise instance. Also, the return values for success and failure are different, with an array of results returned on success and a reject of the value of the failure state that was first rejected on failure. The specific code is as follows:

Let p2 = new Promise((resolve,reject)=>{resolve('success')) let p2 = new Promise((resolve,reject)=>{resolve('success')) let p2 = new Promise((resolve,reject)=>{resolve('success')) }) let p3 = promise.reject (' reject ') promise.all ([p1,p2]).then((result)=>{console.log(result) //[' success']] }).catch((error)=>{ console.log(error) }) Promise.all([p1,p3,p2]).then((result)=>{ console.log(result) }). The catch ((error) = > {the console. The log (error) / / failed, hit 'failure'})

Promise. All is useful when handling multiple asynchronous processes, such as displaying only the Loading icon on a page until two or more Ajax data returns.