ES2020新特性记录
阅读原文时间:2023年07月10日阅读:1

1.可选链操作符

// old
let ret = obj && obj.first && obj.first.second
// new
let ret = obj?.first?.second

2.空位合并操作符

// old
let c = a ? a : b
let c = a || b
// new 如果表达式在??的左侧运算符求值为 undefined 或 null,就返回其右侧默认值。 (0, false 标示有效值)
let c = a ?? b

3.Promise.allSettled

Promise.all 具有并发执行异步任务的能力。但它的最大问题就是如果参数中的任何一个promise为reject的话,则整个Promise.all 调用会立即终止,并返回一个reject的新的 Promise 对象。

Promise.allSettled跟Promise.all类似, 其参数接受一个Promise的数组, 返回一个新的Promise, 唯一的不同在于, 它不会进行短路, 也就是说当Promise全部处理完成后,我们可以拿到每个Promise的状态, 而不管是否处理成功。

4.String.prototype.matchAll

old

function collectGroup1 (regExp, str) {
const matches = []
while (true) {
const match = regExp.exec(str)
if (match === null) break
matches.push(match[1])
}
return matches
}
console.log(collectGroup1(/"([^"]*)"/g, `"foo" and "bar" and "baz"`))
// [ 'foo', 'bar', 'baz' ]

 new 

function collectGroup1 (regExp, str) {
let results = []
for (const match of str.matchAll(regExp)) {
results.push(match[1])
}
return results
}
console.log(collectGroup1(/"([^"]*)"/g, `"foo" and "bar" and "baz"`))
// ["foo", "bar", "baz"]

5.Dynamic import

el.onclick = () => {
import('/modules/my-module.js')
.then(module => {
// Do something with the module.
})
.catch(err => {
// load error;
})
}

let module = await import('/modules/my-module.js');

6.BigInt

创建 BigInt 类型的值也非常简单,只需要在数字后面加上 n 即可

const aNumber = 111;
const aBigInt = BigInt(aNumber);
aBigInt === 111n // true
typeof aBigInt === 'bigint' // true
typeof 111 // "number"
typeof 111n // "bigint"

在大多数操作中,不能将 BigInt与Number混合使用。比较Number和 BigInt是可以的,但是不能把它们相加。

1n < 2
// true

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

7.globalThis

// ES10之前的解决方案
const getGlobal = function(){
if(typeof self !== 'undefined') return self
if(typeof window !== 'undefined') return window
if(typeof global !== 'undefined') return global
throw new Error('unable to locate global object')
}

// ES10内置
globalThis.Array(0,1,2) // [0,1,2]

// 定义一个全局对象v = { value:true } ,ES10用如下方式定义
globalThis.v = { value:true }

globalThis 目的就是提供一种标准化方式访问全局对象