ES6相对于ES5的优化（二）

一、关于扁平化数组

一个部门JSON数据当中，属性名是部门id，属性值是各个部门成员id数组的集合，现在要把有部门的成员id提取出来放到一个数组集合中。

const deps = {
    '人事部' : [1,2,3],
    '采购部' : [3,4,5],
    '研发部' : [5,6,7],
    '教育部' : [8,9,10],
}

let member = [];
for(let item in deps){
    const value = deps[item];
    if(Array.isArray(value)){
        member = [...member,...value]
    }    
}

member = [...new Set(member)]

获取对象的全部属性值并不需要遍历，可以使用Object.values()方法，涉及到数组的扁平化处理，可以使用flat方法，如果是四维，五维深度的数组利用循环嵌套循环使得数组扁平化会不利于代码的可读性。

改进代码如下：

const deps = {
    '人事部' : [1,2,3],
    '采购部' : [3,4,5],
    '研发部' : [5,6,7],
    '教育部' : [8,9,10],
}
let member = Object.values(deps).flat(Infinity);

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

注意：flat方法不支持IE浏览器。

二、关于添加对象属性值

当给对象添加属性时，如果属性名是动态变化的，应该怎么办？

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

在ES6中对象属性吗是可以用表达式的。

改进写法如下：

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

三、关于输入框非空的判断

在处理输入框的相关业务时，往往会判断输入框未输入值的情况。

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

ES6中新出的控制合并运算符可以是的代码更简洁。

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

四、关于异步函数

异步函数是很常见的，经常是用Promise来实现的。

const fn1 = () =>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(1);
        },100);
    });
}

const fn2 = () =>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(2);
        },200);
    });
}

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

以上这种写法调用异步函数，可能会形成回调地狱。

改进：

const fn1 = () =>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(1);
        },100);
    });
}

const fn2 = () =>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(2);
        },200);
    });
}


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()