1. 解构
1. 解构赋值设置默认值
解构赋值允许指定默认值，但是如果值为 null 是无法设定默认值的；通常出现在处理后台返回数据中，后台返回的数据中部分值为 null ，可以通过控制合并运算符?? 来设置默认值
ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效
// badconst { a=1, b=2 } = { a: 3, b: null }; console.log(a, b); // 输出的结果为：3 null，这里b并没有取到默认值2// goodconst { a, b } = { a: 3, b: null }; console.log(a??1, b??2); // 输出的结果为：3 2
2. 解构 undefined 和 null
解构赋值时，如果等号右边是数值和布尔值，则会先转为对象，但是等号右边为 undefined 和 null 时无法转为对象，所以对他们进行解构赋值时，都会报错；所以需要短路解构一个空对象，防止报错
// badconstA=null; const { a=1 } =A; console.log(a); // Uncaught TypeError: Cannot read property 'a' of nullconstB=undefined; const { b=1 } =B; console.log(b); // Uncaught TypeError: Cannot read property 'b' of undefined// goodconstA=null; const { a=1 } =A|| {}; console.log(a); // 1constB=undefined; const { b=2 } =B|| {}; console.log(b); // 2
3. 匹配模式取值
// 对象的解构constobj= { a: 1, b: 2, c: 3, d: 4, e: 5, }; // badconsta=obj.a; constb=obj.b; constc=obj.c; constd=obj.d; conste=obj.e; // badconstf=obj.a+obj.d; constg=obj.c+obj.e; // goodconst { a, b, c, d, e } =obj; constf=a+d; constg=c+e; // good// 如果解构取到的值不符合自己的要求，可以进行重命名const { a: a1 } =obj; console.log(a1);// 1// 数组的解构constarr= [1, {a: 'a'}, 'b']; // badconstarr0=arr[0]; constarr1=arr[1].a; // goodconst [arr0, {a: arr1}] =arr; console.log(arr0); // 1,console.log(arr1); // 'a'
2. 扩展运算符
1. 数据的合并
// 数组的合并consta= [1, 2, 3]; constb= [1, 5, 6]; // badconstc=a.concat(b);//[1, 2, 3, 1, 5, 6]// good// 合并并去重constc= [newSet([a,b])]; // [1, 2, 3, 5, 6]// 对象的合并constobj1= { a:1, }; constobj1= { b:1, }; // badconstobj=Object.assgin({}, obj1, obj2); // {a: 1,b: 1}// goodconstobj= {obj1,obj2}; //{a: 1,b: 1}
3. 数组扩展方法
1. includes - 处理 if 语句
// badif( type==1||type==2||type==3||type==4){ //...} // goode constcondition= [1, 2, 3, 4]; if(condition.includes(type)){ //...}
2. find - 更精确的搜索
要注意区分 filter 的使用场景，filter更多的是过滤，且返回的是个数组，而 find返回的是一个精确的项
consta= [1, 2, 3, 4, 5]; // filter 过滤数组中出大于2的值 constresult=a.filter(item=>item>3); // [4, 5]// finde 找出数组中等于3的值constresult=a.find(item=>item===3); // 3
3. flat - 扁平化数组
flat() 接收一个整数参数，表示想要扁平化的层数，默认为1。如果不管有多少层嵌套，都要转成一维数组，可以用 Infinity 关键字作为参数。
constdeps= { '采购部': [1, 2, 3], '人事部': [5, 8, 12], '行政部': [5, 14, 79], '运输部': [3, 64, 105], }; // badletmember= []; for (letitemindeps){ constvalue=deps[item]; if(Array.isArray(value)){ member= [member, value] } } member= [newSet(member)]; // goodletmember=Object.values(deps).flat(Infinity);
4. 新增运算符
1. 可选链操作符 ?. 容错取值
本质上，?.运算符相当于一种短路机制，只要不满足条件，就不再往下执行。
通常可以用来做容错处理，防止报错
// wrongconstfirstName=message.body.user.firstName||'default'; // badconstfirstName= (message&&message.body&&message.body.user&&message.body.user.firstName) ||'default'; // goodconstfirstName=message?.body?.user?.firstName||'default';
2. 空值合并运算符 ?? 处理输入框非空的判断
空值合并运算符的行为类似
||，但是只有运算符左侧的值为null或undefined时，才会返回右侧的值
输入框非空判断
// badif(value!==null&&value!==undefined&&value!==''){ //...} // goodif(value??''!==''){ //...}
5. async 函数
1. 处理地狱回调
constfn1= () => { returnnewPromise((resolve, reject) => { setTimeout(() => { resolve(1); }, 300); }); }; constfn2= () => { returnnewPromise((resolve, reject) => { setTimeout(() => { resolve(2); }, 600); }); }; // bad constfn= () => { fn1().then((res1) => { console.log(res1); // 1fn2().then((res2) => { console.log(res2); }); }); }; // good constfn=async () => { constres1=awaitfn1(); constres2=awaitfn2(); console.log(res1); // 1console.log(res2); // 2}; // 处理并发请求// 等待所有请求完成constfn= () => { Promise.all([fn1(), fn2()]).then((res) => { console.log(res); // [1,2] }); }; // 只要其中一个异步函数处理完成constfn= () => { Promise.race([fn1(), fn2()]).then((res) => { console.log(res); // 1 }); };
