ECMAScript 2020 新特性速览

过去的2020年可谓诸事不顺，anyway，ECMAScript 还是如期发布了新版本，作为前端老司机，避免不了学习一下。

动态加载模块

如果用过Webpack4，那应该早就知道这个语法了：import()，它的作用就是动态加载一个模块，举个例子：

button.onclick = async () => {
    const userModule = await import('./user.js');
    const userInfo = await userModule.getUserInfo();
    alart(userInfo.name);
}

这个 user.js 模块可以在用户点击按钮时才加载，而不必随页面加载，避免影响打开页面的速度。
要注意的是，import() 返回的是个 Promise 对象。

import.meta 对象

这个 import.meta 包含当前模块的元信息，但目前只有一个属性：import.meta.url，值为当前模块的引用地址，例如：/js/user.js。这个新属性目前没什么作用。

新的导出模块语法

在以前，以某个命称导出一个引入的模块是这样的：

import * as anyModule from './anyModule';
export { anyModule };

现在可以写成这样：

export * as anyModule from './anyModule';

大整数BigInt数据类型

JavaScript 的 Number 整型最大值是：2的53次方 - 1，而 BigInt 可以突破这个限制，取任意大值。
这是新增的数据类型，不仅仅是新加一个对象那么简单，例如用 typeof 获取变量类型时，会输出 bigint，而不是number：

typeof 1n === 'bigint'           // true
typeof BigInt('1') === 'bigint'  // true

它们之间的运算必须都是BigInt，不能混入number类型：

1n + 1;
// Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions

严格等于下，它和number永不相等（毕竟不同类型嘛）：

1n === 1; // false

其它特性跟number一样，例如条件判断：

if (0n) {
    console.log('if');
} else {
    console.log('else');
}
// 'else'

String.prototype.matchAll()

以数组的型式返回正则匹配命中的所有字符

const regexp = /t(e)(st(\d?))/g;
const str = 'test1test2';

const array = [...str.matchAll(regexp)];

console.log(array[0]);
// expected output: Array ["test1", "e", "st1", "1"]

console.log(array[1]);
// expected output: Array ["test2", "e", "st2", "2"]

空值合并操作符（??）

它判断左值是否为null或undefined，而 || 判断左值是否为真值，在设置默认值时会非常有用：

// 当 sizeArg 为数字 0 时，size 会等于 0
const size = sizeArg ?? 40;

可选链式操作符（?.）

它可以简化获取对象属性，避免非对象错误：

// 以前
if (obj && obj.pro1 && obj.pro1.pro2) {
    // todo
}
// 现在
if (obj?.pro1?.pro2) {
    // todo
}

结尾

像最近版本一样，每年加入的新特性都不会太多，但都非常值得学习和使用，大家都了解下吧~