ES6, ES7 feature review (pay for my previous Zhou Ma Guanhua, interview questions)

ES6

1. Destructuring assignment

let [va,vb,vc] = [12,'hello',[3,4]];
// va=12, vb='hello',vc=[3,4]

let {va,vb} = {x: 'a', y: 1};
// va='a', vb=1

2. Default parameters

let [x,y='b',c=true] = ['a',undefined];
// x='a', y='b', c=true

let {x1, y1 = 5, z1 = 3} = {x1: 1, y1: undefined, z1: null};
// x1 = 1, y1= 5, z1= null

3. Spread operator

let [valueA, valueB, ...valueC] = [1,2,3,4];
// valueA=1, valueB=2, valueC=[3,4]

4. Data Merge

let a={x2: 1}, b={y2: 2};
let ab = Object.assign({},a,b);
let newab = {...a,...b};
// ab={x2:1, y2:2} newab={x2:1, y2:2}

5. Object extension

let obj = {a: 1, b: 2, c: 3, d: 4};
Object.keys(obj).forEach((key,index)=>{
  console.log(key);
});
// a b c d

let obj = {a: 1, b: 2, c: 3, d: 4};
Object.values(obj).forEach((value,index)=>{
    console.log(value);
});
// 1 2 3 4

let obj = {a: 1, b: 2, c: 3, d: 4};
Object.entries(obj).forEach((entry,index)=>{
    console.log(value);
});
// ["a", 1] ["b", 2] ["c", 3] ["d", 4]

6、Array

(1) Array.from object to array

let map1 = new Map();
map1.set('k1',1);
map1.set('k2',2);
map1.set('k3',3);
let array = Array.from(map1);
array.forEach((item, index)=>{
   console.log(item);
});
// ["k1", 1] ["k2", 2] ["k3", 3]

let set1 = new Set();
set1.add(1).add(2).add(3);
let array = Array.from(set1);
array.forEach((item, index)=>{
   console.log(item);
});
// 1 2 3

(2) Array.from array-like object

⚠️Note: An array-like object must have length, and their element attribute names must be numeric values ​​or characters that can be converted to numeric values

The data converted without length is empty

let obj = {0:'0',1:'1'};
let array = Array.from(obj);
array.forEach((item, index)=>{
   console.log(item);
});

let obj = {0:'0',1:'1',length: 3};
let array = Array.from(obj);
array.forEach((item, index)=>{
   console.log(item);
});
// 0 1 undefined

(3) Array.from string to array

console.log('%s', JSON.stringify(Array.from('hello world')));
// 'h' 'e' 'l' 'l' 'o' '' 'w' 'o' 'r' 'l' 'd'

(4) Array.from operates on array elements

The first parameter is the data source, the second parameter is the method to process the data source item, and the third parameter is the object pointed to by this in the map function

console.log(JSON.stringify(Array.from([1,2,3,4],(n)=> n +1 )));
// [2,3,4,5]

let Obj = {
    handle: function(n){
        return n + 2;
    }
}
let array = Array.from([1,2,3,4],function(x){
    return this.handle(x);
}, Obj);
console.log(array);
// [3, 4, 5, 6]

(5)Array.of,Array

console.log(Array.of(7));
console.log(Array.of(1,23,7));
console.log(Array(7));
console.log(Array(1,23,7));
// Array(1) [7]
// Array(3) [1, 23, 7]
// Array(7) []
// Array(3) [1, 23, 7]

(6) Array.find lazy search
// Find the first object that meets the requirements

let nums = [-1,2,10,3];
let nums2 = nums.find((n)=>n>0);
console.log(nums2);
// 2

// find the first subscript that satisfies the requirement

let nums3 = nums.findIndex((n)=>n>0);
console.log(nums3);
// 1

7. Expansion of data structure

const obj = {a: 123};
const a = [];
a[obj] = 1;
console.log(a["[object Object]"]);
// 1
// 原因是对象只接受字符串作为键名，所以obj被自动转为字符串[object Object]。

---

ES7

1、Array.prototype.includes

let arr = ['react', 'angular', 'vue']
// Correct
if (arr.includes('react')) {
  console.log('Can use React')
}

2. Exponentiation Operator (exponentiation operation)

let a = 7;
a **= 12;
let b = 2;
b **= 7;
console.log(a=== Math.pow(7,12));
console.log(b=== Math.pow(2,7));

3. Asynchronous operation

async function start (){
    let time = Date.now();
    console.log('time='+time);
    await delay(100);
    console.log('t='+ (Date.now() - time));
}

function delay(time){
    return new Promise((resolve,reject)=>{
        console.log('===');
        setTimeout(()=>{
            resolve();
        },time);
    });
}


start();
// time=1524555391000
// ===
// t=115