ECMAScript 2020 新特性速览

发布:elantion 日期:2021-01-29 阅读:760 评论:0

过去的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"]

空值合并操作符(??)

它判断左值是否为nullundefined,而 || 判断左值是否为真值,在设置默认值时会非常有用:

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

可选链式操作符(?.)

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

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

结尾

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