ES6之语法用例分析（代码优化篇）

一、解构赋值

使用场景：从对象obj中取多个对象赋值

const {a,b,c,d,e} = obj

若创建的属性名和服务端返回的数据对象名不同

const {a:a1} = obj;

注意：解构对象不能为undefined和null，否则会报错，可以给一个{}默认值

const {a,b,c,d,e} = obj || {};

二、…扩展运算符

1、使用场景：合并数据

const a = [1,2,3];
const b = [1,5,6];
const c = [...new Set([...a,...b])];//[1,2,3,5,6]

const obj1 = {a:1}
const obj2 = {b:2}
const obj = {...obj1,...obj2};//{a:1,b:1}

三、${}字符串模板

1、使用场景：拼接字符串

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

四、数组实例方法includes

1、使用场景：多个if判断条件优化，如：

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

优化后：

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

五、find方法

1、使用场景：精确搜索
相对filter来说，性能更好，find找到符合条件的选项后不会继续遍历数组

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

注意find也可找到对应元素后直接更改其属性，find会更改原数组

let arr = [{id: 'pay_type',editable: true},{id: 'pay_money',editable: true}]
arr.find(item => {return item.id == 'pay_type'}).editable = "false"  
console.log(arr) // [{id: 'pay_type',editable: false},{id: 'pay_money',editable: true}]

六、flat方法

1、使用场景：数组的扁平化处理

const deps = {
    '采购部':[1,2,3],
    '人事部':[5,8,12],
    '行政部':[5,14,79],
    '运输部':[3,64,105],
}
let member = Object.values(deps).flat(Infinity);
console.log(member)  // {1,2,3,5,8,12,5,14,79,3,64,105}

其中使用Infinity作为flat的参数，使得无需知道被扁平化的数组的维度。

七、可选链操作符

1、使用场景：项目中从接口返回的数据，其中一个对象可能不存在，即undefined或元素为null，从而会报错并影响流程
例：

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};
const name = adventurer.cat.name

若cat为undefined，则adventurer.cat.name必然会报错

常见解决办法：

const name = adventurer && adventurer.cat && adventurer.cat.name

弊端：若判断条件比较多则代码很长，可维护性低

使用可选链操作符：

const name = adventurer?.cat?.name

若adventurer.cat为null或undefined，则表达式直接短路返回undefined，不会抛出异常影响流程

2、可选链支持表达式：

let nestedProp = obj?.['prop' + 'Name'];

注意：可选链只能用于访问属性，不能用于赋值

3、可选链短路计算：

let potentiallyNullObj = null;
let x = 0;
let prop = potentiallyNullObj?.[x++];
console.log(x); // x 将不会被递增，依旧输出 0

4、可选链可多层嵌套：

let customerCity = customer.details?.address?.city;
let duration = vacations.trip?.getTime?.();

八、对象属性名使用表达式

1、使用场景：动态添加属性名

let obj = {};
let index = 1;
obj[`topic${index}`] = '话题内容';

九、空值合并运算符 ‘??’

1、使用场景：判断条件优化
若a不为undefined且不为null时取a，否则取b
常见解决办法：

result = (a !== null && a !== undefined) ? a : b;

使用空值合并运算符：

 result = a ?? b

a ?? b的含义是：
如果 a 是已定义的，则结果为 a，
如果 a不是已定义的，则结果为 b。

2、支持多层嵌套

let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// 显示第一个已定义的值
alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder

3、与 || 比较

• ||返回第一个 真 值。
• ?? 返回第一个 已定义的 值
  换句话说，||无法区分false、0、空字符串 "" 和 null/undefined。它们都一样 ——假值（falsy values）。如果其中任何一个是||的第一个参数，那么我们将得到第二个参数作为结果。

4、优先级

let height = null;
let width = null;
let area = (height ?? 100) * (width ?? 50); // 5000

注意：??运算符的优先级相当低，如果存在其它运算符号需要加上()

十、异步函数async await

const fn = async () =>{
  const res1 = await fn1();
  const res2 = await fn2();
  console.log(res1);// 1
  console.log(res2);// 2
}

如果要做并发请求，需要用到Promise.all()

const fn = () =>{
   Promise.all([fn1(),fn2()]).then(res =>{
       console.log(res);// [1,2]
   }) 
}

如果并发请求时，只要其中一个异步函数处理完成，就返回结果，要用到Promise.race()

参考文章：你会用ES6，那倒是用啊！