ES2020 新特性

ES2020 新特性

BigInt

JavaScript 最大数值 Number.MAX_SAFE_INTEGER,那么如何表达比这个数值更大的数字呢?

// 注意后缀有 n:表示 large number
const bigNum = 10000000000000n;
console.log(bigNum * 2n);

动态 import

const doMath = async (num1, num2) => {
    if (num1 && num2) {
        const math = await import('./math.js')
        console.log(math.add(5, 10))
    }
}

doMath(4, 2)

Nullish Coalescing

let person = {
    profile: {
        name: "",
        age: 0
    }
};

// 默认值
console.log(person.profile.name || "Anonymous")
console.log(person.profile.age || 18)

现在可以不使用 ||,而用 ?? 来指定默认值了:

console.log(person.profile.name ?? "Anonymous")
console.log(person.profile.age ?? 18)

更多示例:

Optional Chaining

personundefined,还是 profileundefined,还是 nameundefined 的时候,才使用 Anonymous 这个默认值?

let person = {};

console.log(person.profile.name ?? "Anonymous")
console.log(person?.profile?.name ?? "Anonymous")
console.log(person?.profile?.age ?? 18)

类私有变量

class Message {

    #message = "Hello"

    sayHi() {
        console.log(this.#message)
    }

}

Promise.allSettled

const p1 = new Promise((res, rej) => setTimeout(res, 1000));
const p2 = new Promise((res, rej) => setTimeout(rej, 1000));

Promise.allSettled([p1, p2]).then(data => console.log(data));

String.matchAll

匹配字符串,并且打印出每个匹配上的子串的 index

const string = 'Magic hex numbers: DEADBEEF CAFE';
const regex = /\b\p{ASCII_Hex_Digit}+\b/gu;
let match;
while (match = regex.exec(string)) {
  console.log(match);
}

// Output:
//
// [ 'DEADBEEF', index: 19, input: 'Magic hex numbers: DEADBEEF CAFE' ]
// [ 'CAFE',     index: 28, input: 'Magic hex numbers: DEADBEEF CAFE' ]

现在直接这样写,即可:

const string = 'Magic hex numbers: DEADBEEF CAFE';
const regex = /\b\p{ASCII_Hex_Digit}+\b/gu;
for (const match of string.matchAll(regex)) {
  console.log(match);
}

// Output:
//
// [ 'DEADBEEF', index: 19, input: 'Magic hex numbers: DEADBEEF CAFE' ]
// [ 'CAFE',     index: 28, input: 'Magic hex numbers: DEADBEEF CAFE' ]

globalThis

JavaScript 的全局 this 可能是 window,可能是 Node.js 的 global,也可能是 self,想要获取全局 this 需要经过逐个 if 条件去判断才行:

if (typeof globalThis !== 'undefined') return globalThis;
if (typeof self !== 'undefined') return self;
if (typeof window !== 'undefined') return window;
if (typeof global !== 'undefined') return global;

现在引入 globalThis 这个变量,可以直接返回全局 this

const theGlobalThis = globalThis;

模块命名空间导出

以前,JavaScript 仅支持如下 import 写法:

import * as utils from './utils.js';

现在 export 也可以这样写了:

export * as utils from './utils.js';

更为明确的 for-in 顺序

for (x in y) 以怎样的顺序遍历,将会在 ES2020 中以官方指定的标准化的形式得到统一。

import.meta

考虑如下 module

<script type="module" src="module.js">
</script>

你可以通过 import.meta 来获取到它的 meta 信息:

console.log(import.meta); // { url: "file:///home/user/module.js" }

参考