使用ES2020优化冗余代码

目录

可选链

空值合并运算符

dynamic-import

---

可选链

用途：可选链可让我们在处理多层级对象时不再需要进行冗余的前置防空校验

之前：let name = user && user.info && user.info.name

使用后：let name = user?.info?.name;

可选链中的?表示如果问号左边表达式有值，就会继续查询后面的字段。

空值合并运算符

用途：数值处理时，对0，''也正常进入逻辑判断赋值

// 如果变量level是0或者''时
之前：let value = user?.data?.level || '暂无等级' //会走|| 暂无等级
使用后: let value = user?.data?.level ?? '暂无等级' //会赋值0或者 '', 不走||

dynamic-import

按需import几年前就已提出,如果终于进入ES正式规范，有些资源不需要初始化全量加载，也提高首屏渲染速度。那些按需执行逻辑逻辑资源都体现在某一个事件回调中取加载。目前webpack已经很好的支持了该特性

el.onclick= () => {
    import('xx.js')
    .then((module) => {
        modult.doSomething();
    })
    .catch((err) => {

    })
}