ECMAScript 2020 新特性速览
发布:elantion 日期:2021-01-29 阅读:1434 评论: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"]
空值合并操作符(??)
它判断左值是否为null
或undefined
,而 ||
判断左值是否为真值,在设置默认值时会非常有用:
// 当 sizeArg 为数字 0 时,size 会等于 0
const size = sizeArg ?? 40;
可选链式操作符(?.)
它可以简化获取对象属性,避免非对象错误:
// 以前
if (obj && obj.pro1 && obj.pro1.pro2) {
// todo
}
// 现在
if (obj?.pro1?.pro2) {
// todo
}
结尾
像最近版本一样,每年加入的新特性都不会太多,但都非常值得学习和使用,大家都了解下吧~