巧妙使用ES6+写出优雅的代码

一、取值

const obj = {
    a:1,
    b:2
};

传统的写法

const a = obj.a;
const b = obj.b;

es6 对象的解构赋值

const {a , b} = obj;
//变量的重命名
const {a:a1 , b:b1} = obj;

取值容错的处理

 //传统写法
 let a = obj.a ? obj.a : '';
 //es11 可选链操作符
 let a = obj?.a;

补充

解构对象不能为 undefined 或 null，可以给对象一个默认值

const {a , b} = obj || {}

二、对象和数组的合并

const a = [1, 2];
const b = [3，4];
const objA = {a:1};
const objB = {b:1};

传统的写法

//数组的合并
const c = a.concat(b);//[1,2,3,4]
//对象的合并
const obj = Object.assign({}, objA, objB);//{a:1,b:1}

set 和 对象扩展符

const c = [...new Set([...a,...b])]; //[1,2,3,4]
const obj = {...objA, ...objB};//{a:1,b:1}

三、字符串的拼接

const a = 60;
var str = '';

传统的写法

if(a>=60){
  str =  '您的成绩合格'；
}else{
  str =  '您的成绩不合格'；
}

模版字符串

str = `${a>=60?'您的成绩合格':您的成绩不合格'}`

四、条件判断或运算

传统的写法

 if(a == 1 || a == 2){
    ...
 }
 switch(a){
    case 1 :
       ...
       break;
    case 2 :
       ...
       break;
    default :
       break;
 }

es6 includes用法

const arr = [1,2];
if(arr.includes(a)){
   ...
}

五、非空判断

传统的写法

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

空值合并运算符

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

空值合并运算符：只会在左侧表达式是 null 或 undefined 时返回右侧的表达式

六、数组扁平化

const obj = {
    a:[1,2],
    b:[3,4]
}

传统的写法

let arr = [];
for (let item in obj){
    if(Array.isArray(obj.item)){
        arr = arr.concat(obj.item);
    }
}

flat的用法

let arr = Object.values(obj).flat(Infinity);

七、异步函数

const promise = () =>{
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve();
        }, 300);
    });
}
const fn1 = promise();
const fn2 = promise();

传统的写法

const fn = () =>{
    fn1().then(res1 =>{
        console.log(res1);
        fn2().then(res2 =>{
            console.log(res2)
        })
    })
}

async await的使用

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