简述ECMASript 11 新特性 ?

参考回答

ECMAScript 11(也称为 ES2020)是 ECMAScript 标准的第十一版,发布于 2020 年。ES11 引入了一些实用的特性,进一步增强了 JavaScript 的功能,主要的新特性包括:

  1. BigInt:引入了 BigInt 类型,可以表示任意大小的整数,解决了 JavaScript 在处理超大数字时的限制。

  2. Promise.allSettled():引入了 Promise.allSettled() 方法,用于处理多个 Promise 对象,无论它们是成功还是失败,都会返回一个结果。

  3. globalThis:提供了一个标准化的方式来访问全局对象,跨平台适用,解决了不同环境中全局对象访问的差异问题。

  4. nullish coalescing operator (??):引入了空值合并运算符 ??,用于在左侧操作数为 nullundefined 时返回右侧的值,避免了传统的 || 运算符可能带来的不准确判断。

  5. optional chaining (?.):引入了可选链操作符 ?.,简化了深层对象访问时的 nullundefined 检查,避免了出现异常错误。

详细讲解与拓展

1. BigInt

BigInt 是一种新的原始数据类型,用于表示任意精度的整数。传统的 JavaScript 数字类型(Number)只能表示 64 位浮点数,且最大可表示的整数为 2^53 - 1。而 BigInt 允许表示超过此范围的整数,适用于大数运算,如处理金融数据、加密等场景。

用法:

const bigIntValue = 1234567890123456789012345678901234567890n;
console.log(bigIntValue); // 1234567890123456789012345678901234567890n
  • 创建 BigInt 时,可以在数字后面加上 n,表示这是一个 BigInt 类型。
  • BigIntNumber 类型不能直接进行运算,必须显式转换。
const bigIntValue = 10n;
const numberValue = 20;

console.log(bigIntValue + BigInt(numberValue)); // 30n
// 错误示例:console.log(bigIntValue + numberValue); // 会抛出 TypeError

2. Promise.allSettled()

Promise.allSettled() 方法接收一个 Promise 对象数组,并返回一个新的 Promise。无论数组中的每个 Promise 最终是成功还是失败,Promise.allSettled() 都会在所有 Promise 执行完成后返回一个结果数组,结果数组中每个元素包含每个 Promise 的状态和结果。

用法:

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

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

Promise.allSettled() 是处理多个异步操作时非常有用的工具,特别是在你需要等待所有操作完成并且不关心它们是否成功时。

3. globalThis

在不同的执行环境中,JavaScript 的全局对象可能不同:在浏览器中是 window,在 Node.js 中是 globalglobalThis 提供了一个标准的方式来访问当前环境的全局对象。

用法:

console.log(globalThis); // 在浏览器中打印 window 对象,在 Node.js 中打印 global 对象

globalThis 使得在跨平台的 JavaScript 代码中,可以更一致地访问全局对象。

4. nullish coalescing operator (??)

空值合并运算符 ?? 用于在一个表达式的左侧值为 nullundefined 时,返回右侧的值。这解决了传统 || 运算符的问题,因为 || 会将 0、空字符串、false 等值视为假值,导致不必要的返回右侧值。

用法:

const name = null;
const defaultName = "Guest";

console.log(name ?? defaultName); // "Guest" 因为 name 为 null
console.log(0 ?? "Default"); // 0,因为 0 不是 null 或 undefined
console.log("") ?? "Default"; // "" 因为空字符串不是 null 或 undefined

?? 提供了更准确的逻辑判断,避免了误判。

5. optional chaining (?.)

可选链操作符 ?. 使得访问嵌套对象属性时,能够安全地处理 nullundefined 的值,而不会抛出错误。这对于处理复杂的对象结构非常有用,尤其是当对象属性不确定时。

用法:

const user = {
  address: {
    street: '123 Main St'
  }
};

console.log(user?.address?.street); // "123 Main St"
console.log(user?.contact?.email); // undefined,避免抛出错误

使用 ?. 可以避免深层嵌套对象访问时出现 TypeError,使得代码更简洁、安全。

总结

ECMAScript 11(ES2020)引入了几个增强 JavaScript 的重要特性。BigInt 解决了处理大整数的需求,Promise.allSettled() 提供了对多个异步操作结果的统一处理方式,globalThis 让跨平台代码能够一致地访问全局对象,nullish coalescing operator (??)optional chaining (?.) 则简化了代码并提高了代码的健壮性。这些特性使得 JavaScript 更加现代化,解决了常见问题并提升了开发效率。

发表评论

后才能评论