了解 JS 新版：ECMAScript 2020（ES11）全面解析-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的不断发展，ECMAScript 也在不断地更新迭代，其中最新的版本为 ECMAScript 2020（ES11）。作为前端开发者，我们需要及时了解新版本的特性和变化，以便更好地应用在我们的项目中。本文将全面解析 ECMAScript 2020 的新特性和变化，并提供相关示例代码，帮助读者更好地学习和应用。

新特性

可选链操作符

在 ES11 中，新增了可选链操作符（Optional Chaining Operator），用于简化对可能为 null 或 undefined 的属性或方法的访问。以往我们需要使用 if 判断或三元表达式来避免报错，而现在我们可以使用可选链操作符来简化代码。

示例代码：

const user = {
  name: 'Tom',
  address: {
    city: 'Beijing',
    street: '1234'
  }
}

console.log(user?.address?.city) // 'Beijing'
console.log(user?.address?.zipCode) // undefined

空值合并操作符

在 ES11 中，新增了空值合并操作符（Nullish Coalescing Operator），用于判断某个值是否为 null 或 undefined，如果是则返回默认值。与 || 运算符不同的是，空值合并操作符只会在值为 null 或 undefined 时返回默认值，而不是在值为 false、0、'' 等 falsy 值时返回默认值。

示例代码：

const a = null
const b = 0
const c = ''
const d = undefined

console.log(a ?? 'default') // 'default'
console.log(b ?? 'default') // 0
console.log(c ?? 'default') // ''
console.log(d ?? 'default') // 'default'

Promise.allSettled

在 ES11 中，Promise.allSettled 方法被正式纳入标准，用于返回一组 Promise 对象的状态。与 Promise.all 不同的是，Promise.allSettled 会等待所有 Promise 对象都返回结果后再返回状态，不会因为其中某个 Promise 对象出错而中断。

示例代码：

const promise1 = Promise.resolve(1)
const promise2 = Promise.reject('error')
const promise3 = Promise.resolve(3)

Promise.allSettled([promise1, promise2, promise3]).then(results => {
  console.log(results)
})
// [
//   { status: 'fulfilled', value: 1 },
//   { status: 'rejected', reason: 'error' },
//   { status: 'fulfilled', value: 3 }
// ]

String.prototype.matchAll

在 ES11 中，String.prototype.matchAll 方法被正式纳入标准，用于返回一个迭代器，可以遍历字符串中所有匹配正则表达式的结果。与 String.prototype.match 不同的是，matchAll 可以返回所有匹配结果，而不是只返回第一个匹配结果。

示例代码：

const str = 'hello world'
const regex = /l/g

for (const match of str.matchAll(regex)) {
  console.log(match[0])
}
// 'l'
// 'l'

变化

import() 动态导入

在 ES11 中，import() 动态导入被正式纳入标准，用于在运行时动态导入模块。与静态导入不同的是，动态导入可以根据条件来决定是否加载某个模块，从而提高应用的性能和灵活性。

示例代码：

async function loadModule(moduleName) {
  const module = await import(`./modules/${moduleName}.js`)
  module.init()
}

loadModule('module1')

BigInt 类型

在 ES11 中，BigInt 类型被正式纳入标准，用于表示任意精度的整数。与 Number 类型不同的是，BigInt 类型可以表示超过 Number.MAX_SAFE_INTEGER 的整数，从而避免精度丢失的问题。

示例代码：

const a = BigInt(Number.MAX_SAFE_INTEGER) + BigInt(1)
console.log(a) // 9007199254740992n

globalThis 对象

在 ES11 中，新增了 globalThis 对象，用于在任何环境下都能访问全局对象。与 window 和 self 不同的是，globalThis 可以在浏览器、Web Worker、Node.js 等环境下都能正确访问全局对象。

示例代码：

console.log(globalThis)

总结

本文介绍了 ECMAScript 2020 的新特性和变化，包括可选链操作符、空值合并操作符、Promise.allSettled、String.prototype.matchAll、import() 动态导入、BigInt 类型和 globalThis 对象。这些新特性和变化都可以提高我们的开发效率和代码质量，帮助我们更好地应对不同的开发场景。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658cf7fdeb4cecbf2d2dbee5