ECMAScript 2020

ECMAScript 2020（ES11）于 2020 年 6 月发布。

核心特性

1. 可选链操作符（Optional Chaining）

可选链操作符 ?. 使得开发者能够安全地访问深层嵌套的对象属性。如果某个中间属性不存在或为 null 或 undefined，则返回 undefined，而不是抛出错误。

const user = { profile: { name: "Alice" } };

console.log(user.profile?.name); // 'Alice'
console.log(user.address?.city); // undefined

影响：

• 简化深层嵌套属性的访问：避免了手动检查每一层对象是否存在。
• 提升代码安全性：防止了由于访问 null 或 undefined 属性而导致的运行时错误。

2. 空值合并运算符（Nullish Coalescing Operator）

空值合并运算符 ?? 用于判断左侧操作数是否为 null 或 undefined。如果是，返回右侧操作数，否则返回左侧操作数。与 || 运算符不同，?? 只会考虑 null 或 undefined，而不会在左侧值为其他 falsy 值（如 0、NaN、false、"" 等）时触发。

const a = null;
const b = 0;

console.log(a ?? "Default"); // 'Default'
console.log(b ?? "Default"); // 0

影响：

• 简化值判定：在处理 null 或 undefined 时，提供了一个简洁的语法。
• 避免错误判断：不像 ||，它不会误判其他 falsy 值，保证了更精确的逻辑判断。

3. BigInt 类型

BigInt 类型，允许处理大于 2^53 - 1 的整数。对于需要大数字精度计算的场景（如加密、科学计算等），BigInt 提供了原生支持。

const bigIntValue = 9007199254740991n;
console.log(bigIntValue); // 9007199254740991n

const anotherBigInt = BigInt(123456789123456789);
console.log(anotherBigInt); // 123456789123456789n

影响：

• 处理大数字：对于涉及大整数计算的应用，BigInt 提供了安全和高效的原生支持。
• 避免精度问题：原生支持超大整数，解决了 Number 类型的精度限制问题。

4. Promise.allSettled() 方法

Promise.allSettled() 方法接受一个 Promise 可迭代对象，并返回一个新的 Promise，只有当所有输入的 Promise 都完成时，返回的 Promise 才会解决，解决的结果是一个包含每个 Promise 状态及其值的数组。即使某个 Promise 被拒绝，allSettled() 也会继续等待其他 Promise 完成。

const promise1 = Promise.resolve(42);
const promise2 = Promise.reject("Error occurred");
const promise3 = Promise.resolve(100);

Promise.allSettled([promise1, promise2, promise3]).then((results) => {
  results.forEach((result) => {
    console.log(result.status); // 'fulfilled' or 'rejected'
    console.log(result.value); // 成功时的值，失败时为 undefined
    console.log(result.reason); // 失败时的原因
  });
});

影响：

• 改进错误处理：解决了 Promise.all() 只要有一个 Promise 被拒绝就会立即失败的问题，提供了更灵活的错误处理方式。
• 支持并行异步任务：非常适合处理多个并行异步任务，尤其是当不在乎某些任务失败时。

5. globalThis 对象

globalThis 提供了一个标准的方式来访问全局对象，无论是在浏览器、Node.js 还是 Web Worker 中，都能统一访问全局环境。它取代了不同环境中对全局对象的不同引用（如 window、global 等）。

const arr = [1, 2, 3, 4];
console.log(arr.at(-1)); // 4 (最后一个元素)
console.log(arr.at(-2)); // 3 (倒数第二个元素)

影响：

• 统一访问全局对象：简化了跨环境代码的编写，使得开发者不再需要根据不同环境判断如何访问全局对象。
• 提升可移植性：无论是在浏览器、Node.js 还是其他 JavaScript 环境中，都可以统一使用 globalThis。

6. for-in 循环的顺序规范

ES2020 确定了 for-in 循环在枚举对象属性时的顺序行为。以前，for-in 的属性遍历顺序在不同环境中可能会有所不同，ES2020 确保了 for-in 遍历对象属性时，遵循以下顺序：

• 数字键（按升序排列）。
• 字符串键（按插入顺序排列）。
• Symbol 键（按插入顺序排列）。

const obj = {
  3: "three",
  1: "one",
  2: "two",
  a: "alpha",
};

for (const key in obj) {
  console.log(key); // 输出顺序：1, 2, 3, a
}

影响：

• 稳定的属性遍历顺序：确保了不同 JavaScript 环境中 for-in 循环的属性遍历顺序一致，避免了不必要的错误。

7. module 类型支持（ES 模块）

ES2020 为浏览器和 Node.js 提供了对原生模块（ES Module）支持。通过 type="module" 属性，浏览器支持 <script> 标签内直接使用 ES6 的模块语法，Node.js 也开始支持 .mjs 后缀和原生模块系统。

<script type="module">import {greet} from './greet.js'; greet('Alice');</script>

影响：

• 简化模块化开发：支持原生 ES 模块（ESM），让 JavaScript 开发更加现代化和模块化。
• 统一模块系统：解决了浏览器和 Node.js 之间模块导入的兼容性问题。

兼容性

Chrome 80+

Firefox 68+

Safari 13+

Edge 80+

Node 12+

注：兼容性数据可能随着版本的更新而有所调整，建议开发者根据项目的具体需求参考最新的浏览器版本和 Polyfill 支持情况。

总结

ECMAScript 2020（ES11）为 JavaScript 带来了多个重要的特性，特别是对于开发者来说，可选链操作符、空值合并运算符、BigInt、Promise.allSettled() 等新特性极大地提高了代码的简洁性、可读性和稳定性。它们为处理深层对象访问、异步任务并行处理、大数字运算等场景提供了更好的支持。

参考文献

ECMA-262 2020 规范 👉