不接受杠精,这里暂时将es5之后的统称为es6,感谢理解

1.对象取值

恕我直言,2022了,还有人不用解构赋值的吗?

    let obj = {
        a:1,
        b:2,
        c:3,
        d:4,
        e:5,
    }

    const a = obj.a;
    const b = obj.b;
    const c = obj.c;
    const d = obj.d;
    const e = obj.e;

一行代码的事,再多就不值得了

改进

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

当然,有些人说obj中的key不规范,我不想要,我需要修改key值,可以的啊

改进

const {a:testA,b:testB} = obj;
console.log("testA",testA);// 1
console.log("testB",testB);// 2 
//const {partA:partB} = obj 将obj.partA的值赋予partB,不会影响obj的属性

当然,解构赋值虽好,但如果对象为undefined或null,则报错,因为,链式结构不存在

2. if判断条件

很多时候,有人会在if的判断条件中进行多取值判断
如下所示:

let type = 3;

if (type === 1 || type === 2 || type === 3) {

//...
} else {
//...
}

使用es6种的includes方法,不就轻松愉快了吗?

改进

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

3. 数组扁平化

获取所有班级的成员id,json格式如下

    const list = {
        "一班":[1,2,3],
        "二班":[4,5],
        "三班":[6]
    }
    let students = [];
    for (let item in list){
        const value = list[item];
        if(Array.isArray(value)){
            students = [...students,...value];
        }
    }
    console.log("students",students)

首先,获取对象全部属性不需要遍历,Object.values轻松解决,其次,数据的扁平化处理,es6有flat方法来处理,这个方法,可以无视被扁平化的数组的维度,直接获取数组所有的值,同时,也将移除空项

改进

    const list = {
        "一班":[1,2,3],
        "二班":[4,5],
        "三班":[6]
    }
    let students = Object.values(list).flat(Infinity);//[ 1, 2, 3, 4, 5, 6 ]

flat()方法,可以获取数组指定层数内的所有元素,并输出为新的数组
语法如下:

    let newArray = arr.flat(depth)
    参数：depth 可选，指定要提取嵌套数组的结构深度，默认值为 1,一般为数字,也可使用Infinity,提取所有的层级的元素

    let arr = [1,2,[3,4,[5,6]],7];

    let arr = [1,2,[3,4,[5,6,[8]]],7];
    let arr1 = arr.flat(1);
    console.log("arr1",arr1) //    let arr = [1,2,[3,4,[5,6,[8]]],7];

    let arr2 = arr.flat(2);
    console.log("arr2",arr2) // [1, 2, 3, 4, 5, 6,[ 8 ], 7]

    let arrAll = arr.flat(Infinity);
    console.log("arrAll",arrAll) //[1, 2, 3, 4,5, 6, 8, 7]

flat缺点是:不支持IE浏览器

4.合并数据

两个数组/对象合并为一个

const a = [1, 2, 3];
const b = [1, 5, 6];
const c = a.concat(b);//[1,2,3,1,5,6]
console.log("c", c)
const obj1 = {
a: 1,
}
const obj2 = {
b: 1,
}
const obj = Object.assign({}, obj1, obj2);//{a:1,b:1}
console.log("obj", obj)

改进

使用es6的 new Set()对象合并数组(同时还能达到去重效果)
使用es6的...运算符,合并对象

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

    const obj1 = {
        a:1,
    }
    const obj2 = {
        b:1,
    }
    const obj = {...obj1,...obj2};//{a:1,b:1}
    console.log("obj", obj)

5. 字符串拼接模版

字符串模版拼接数据,灵活使用,有些人只在使用基本功能

    const name = 'lock';
    const merits = "A";
    let result = '';
    if(merits === "A"){
        result = `${name}提升等级`;
    }else{
        result = `${name}优化处理`;
    }
    console.log("result",result)

改进

es6的${},是可以放入任何javaScript表达式的,可以进行计算或对象属性引用

    const name = 'lock';
    const merits = "A";
    const result = `${name}${merits === "A" ?'提升等级':'优化处理'}`;
    console.log("result",result)

6.参数非空判断

我相信,很多人还在使用下述方法判断参数非空

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

改进

es6有一个新的运算符,null判断运算符,??
它的行为类似||，但是只有运算符左侧的值为null或undefined时，才会返回右侧的值;

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