ES6 实用技巧

对象析构赋值用于取值

const obj = {
    a:1,
    b:2,
    c:3,
    d:4,
    e:5,
}

const {a,b,c,d,e} = obj;
const f = a + d;
const g = c + e;

还可创建赋值新变量，而不一定时析构默认对象属性名一致的对象

const {a:a1} = obj;
console.log(a1);// 1

扩展运算符用于数组、对象合并

• ES6之前数组合并一般用concat const c = a.concat(b)，对象使用Object.assign（）Object.assign({}, obj1, obj2
• ES6使用扩展运算符即可，并且数组使用set方法去重

const c = [...new Set([...a,...b])]

const obj = {...obj1,...obj2}

扩展运算符浅拷贝

const obj = { ...oldObj }
const arr = [ ...oldArr ]

模板字符串中使用JS表达式

const name = '小明';
const score = 59;
const result = `${name}的考试成绩${score > 60?'':'不'}及格`

数组includes代替繁杂的if判断

if(
    type == 1 ||
    type == 2 ||
    type == 3 ||
    type == 4 ||
){
   //...
}


const condition = [1,2,3,4];
if( condition.includes(type) ){
   //...
}

数组搜索某元素使用find优化性能

相比于filter()，找到了符合条件的项将不会继续遍历数组

const a = [1,2,3,4,5];
const result = a.find( 
  item =>{
    return item === 3
  }
)

数组拍平flat

flat 使用 Infinity参数，可以不需要直到数组的深度，并且可以忽略数组空位

const veryDeep = [[1, [2, 2, [3,[4,[5,[6]]]]], 1]];

veryDeep.flat(Infinity);
// [1, 2, 2, 3, 4, 5, 6, 1]

可选链操作符获取对象属性值防止报错

之前的写法：

const name = obj && obj.name;

即使obj不存在也不会报错

const name = obj?.name;

对象属性名可以是表达式用于添加属性

let obj = {};
let index = 1;
obj[`person${index}`] = `士兵${index}号`;

Async/Await结合数组解构

const [user, account] = await Promise.all([
  fetch('/user'),
  fetch('/account')
])