ES10新特性

在 ES 2020 中，有一些非常实用的新特性，接下来，就跟我一起看看在新版本中有哪些新特性在平时的开发中可以用到。

一. 可选链式操作符

大家平常在工作中写代码的时候，有时候会写这样的代码：

if (a && a. b && a.b.c) {
console.log(a.b.c);
}

因为我们不确定a或b是否存在，那么获取c就会报错，这时候可选链式调用就非常有用了。

我们可以使用可选链式操作符 ?.，如果没有值，则返回undefined 而不是直接报错，就像下面这样：

console.log(a?.b?.c || '');

再例如：读取一个被连接对象的深层次的属性的值

const user = {
    address: {
        street: 'xx街道',
        getNum() {
            return '80号'
        }
    }
}

ES5写法：

const street = user && user.address && user.address.street
const num = user && user.address && user.address.getNum && user.address.getNum()

ES6写法：
注意： 最外层的对象一定要存在，否则就报错了。

const street = user?.address?.street
const num = user?.address?.getNum?.()

二. 空值合并

空值合并运算符为 ??，它的作用是当左侧操作数为null或者 undefined时，则返回右侧操作数，我们来看实际的例子：

null ?? 7              // 7

有些同学可能就要问了，这东西和||有什么区别？其实||操作符还是必须的，这是这两者的应用场景不一样，比如下面的情况：

'' ?? 7; // ''
'' || 7; // 7

也就是说 ?? 只有当左边是null和 undefined 时，才会取右边的值，而||则是左边为假时，就会取右边的值，比较典型的就是 0 和空字符串了。

??
空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

与逻辑或操作符（||）不同，逻辑或操作符会在左侧操作数为假值时返回右侧操作数。也就是说，如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为。比如为假值（例如，’’ 或 0）时。见下面的例子。

const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0

三. 空值赋值操作符

??=
空值赋值运算符 (x ??= y) 仅在 x 是 (null 或 undefined) 时对其赋值。

const a = { duration: 50 };

a.duration ??= 10;
console.log(a.duration);
// expected output: 50

a.speed ??= 25;
console.log(a.speed);
// expected output: 25

x ??= y等价于x = (x ?? y)

var x = undefined;

var y = 1;

x ??= y;// 1

四. 动态引入

之前我们可以通过 webpack 来使用动态引入，现在这个特性原生就支持了。

import('a/b.js').then(b => {
console.log(b);
});

但是对于大多数开发者来说是没什么感知的，毕竟大多数人还是用 webpack 来打包的。

五. Promise.allSettled

Promise.allSettled返回一个包含结果和值的对象数组，不论执行每一个 Promise时是成功还是失败，它都会全部执行完成，然后返回结果，下面就是和 Promise.all的对比。

const p1 = Promise.resolve(1);
const p2 = Promise.reject(2);
const p3 = Promise.resolve(3);
/**
*[{status: "fulfilled", value: 1}
* {status: "rejected", reason: 2}
* {status: "fulfilled", value: 3}]
*/
Promise.allSettled([p1, p2, p3]).then(result => console.log(result));
/**
* error 2
*/
Promise.all([p1, p2, p3]).catch(error => console.log('error', error));

其他一些特性

…