ES6、ES7特性回顾(为自己之前的周马观花买单，面试有问哦)

ES6

1、解构赋值

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、默认参数

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、拓展运算符

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

4、数据的归并

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、对象的扩展

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对象转数组

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类数组对象

⚠️注意：一个类数组对象必须要有length，他们的元素属性名必须是数值或者可以转换成数值的字符

不加length转换出来的数据为空

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字符串转数组

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

(4)Array.from对数组元素进行操作

第一个参数数据源， 第二个参数对数据源项进行处理的方法，第三个参数map函数中this指向的对象

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懒查找
// 查找第一个满足要求的对象

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

// 查找第一个满足要求的下标

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

7、数据结构的拓展

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(求幂运算)

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、异步操作

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