ES6优化ES5语法写法及案例（持续更新）

1.空值合并运算符 ??

　　空值合并运算符（??）是一个逻辑运算符，当左侧操作数为 null 或 undefined 时，返回右侧的操作数，否则返回左侧操作数

注意：?? 运算符的优先级非常低，只略高于？和 =

         如果没有明确添加括号，不能将其与 || 或 && 一起使用

eg：关于输入框非空的判断

if ( value !== null && value !== undefined && value !== '' ){
      // ...
}

// 上面的代码过于繁琐要判断很多个条件 可以运用空值运算符进行编写

if ( value  ??  ''  !== '' ){
     // ...
}

2.可选链操作符 ?.

　　可选链操作符（?.）允许读取位于连接对象链深处的属性值,而不必明确验证链中的每个引用是否有效。

let nestedProp = obj.first && obj.first.second;
// 等价于
let nestedProp = obj.first?.second;

　　js会在尝试访问obj.first.second之前隐式的检查并确定obj.first既不是null也不是undefined。如果obj.first是null或者undefined,表达式将会短路计算直接返回undefined

3.解构赋值

const f = obj.a + obj.d;
const g = obj.c + obj.e;

改进：

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

如果想创建的变量名和对象的属性名不一致，可以这么写：

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

注意：解构的对象不能为undefined、null。否则会报错，故要给被解构的对象一个默认值。

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

4.合并数据

合并两个数组，合并两个对象

const a = [1,2,3];
const b = [1,5,6];
const c = a.concat(b);//[1,2,3,1,5,6]
const obj1 = {
  a:1,
}
const obj2 = {
  b:1,
}
const obj = Object.assign({}, obj1, obj2);//{a:1,b: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:1,
}
const obj = {...obj1,...obj2};//{a:1,b:1}

说明：es6中增加了Map和Set两种新的数据结构

• Map是类似Object的一种键值对集合，区别在于Map的键不仅限于是字符串，其他各种类型的值包括对象都可以成为Map的键
• Set是类似数组的一种数据结构，不同点在于Set中没有重复的值

add(value)：添加某个值，返回Set结构本身。 
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。 
has(value)：返回一个布尔值，表示该值是否为Set的成员。 
clear()：清除所有成员，没有返回值。

let a = new Set([1, 2, 3]);
let b = new Set([3, 5, 2]);
// 并集 let unionSet = new Set([...a, ...b]); //[1,2,3,5]
// 交集 let intersectionSet = new Set([...a].filter(x => b.has(x))); // [2,3]
// ab差集 let differenceABSet = new Set([...a].filter(x => !b.has(x)));

5.数组includes方法（IE不支持）

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似；该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

没有该方法之前，我们通常使用数组的indexOf方法，检查是否包含某个值。

if (arr.indexOf(el) !== -1) {
  // ...
}

indexOf方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。二是，它内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判。

[NaN].indexOf(NaN)
// -1

includes使用的是不一样的判断算法，就没有这个问题。

[NaN].includes(NaN)
// true

6.数组find方法

find方法中找到符合条件的项，就不会继续遍历数组。

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

7.数组扁平化

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

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

详见：https://www.cnblogs.com/younghxp/p/14307918.html

8.异步处理

异步函数很常见，经常是用 Promise 来实现，形成地狱回调

const fn1 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(1);
    }, 300);
  });
}
const fn2 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(2);
    }, 600);
  });
}
const fn = () =>{
   fn1().then(res1 =>{
      console.log(res1);// 1
      fn2().then(res2 =>{
        console.log(res2)
      })
   })
}

改进：

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

说明：但是要做并发请求时，还是要用到Promise.all()。如果并发请求时，只要其中一个异步函数处理完成，就返回结果，要用到Promise.race()。

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