JS 新特性：ES11 (2020) 知多少
在不断被更新迭代的 Web 前端领域，JavaScript 语言始终扮演着重要的角色。ES11（也称为 ES2020）是 JavaScript 语言最新的标准规范，以其新特性极大地提升了开发人员的效率和代码质量。本篇文章将详细介绍 ES11 的新特性，并提供示例代码以帮助读者深入了解和掌握这些新功能。
- 可选链操作符（Optional Chaining Operator）
在早期版本的 JavaScript 中，当访问给定值的属性时，如果该值为 null 或 undefined，代码将会抛出一个异常。ES11 引入了一个新的可选链操作符（?.）来解决这一问题。它允许我们访问任意深度嵌套的对象属性，而无需显式地检查每个中间的属性。当使用可选链操作符时，如果访问的属性不存在，则可以安全地返回 undefined，而无需抛出异常。
示例代码：
const user = { name: 'Lucy', address: { city: 'Beijing', zipCode: 10000 } };
// 访问嵌套的对象属性 const zipCode = user?.address?.zipCode; // 10000 const province = user?.address?.province; // undefined const age = user?.age; // undefined
- 空值合并操作符（Nullish Coalescing Operator）
在 JavaScript 中，有时我们需要使用类似于它的算术运算符“||”来提供默认值，但它存在一些问题。例如，当值为“0”或空字符串“''”时，它将被视为 false，这可能会引起一些 Bug。ES11 引入了空值合并操作符（??），如果左侧的操作数为 null 或 undefined，则返回右侧的操作数，否则返回左侧的操作数。
示例代码：
const defaultValue = '';
// 在默认值为 0 或 '' 时引起 Bug const result1 = defaultValue || 'Hello World'; // 'Hello World' const result2 = defaultValue ?? 'Hello World'; // ''
const value1 = null; const value2 = undefined; const value3 = 'Hello World';
const result3 = value1 ?? 'Default'; // 'Default' const result4 = value2 ?? 'Default'; // 'Default' const result5 = value3 ?? 'Default'; // 'Hello World'
- 动态 import（Dynamic Import）
动态 import 是 ES11 引入的一个重要新特性。它允许我们动态地加载 JavaScript 模块，而不必像以前那样在加载时预先声明所有依赖关系。动态 import 返回一个 promise，该 promise 在所有依赖项都已加载和执行后解析。
示例代码：
// 动态加载一个模块 async function loadModule(path) { const module = await import(path); // 使用返回的模块 }
- BigInt
BigInt 是 JavaScript 中的一个新的原始数据类型，它可以表示大于 253 - 1 的整数。在以前，JavaScript 中的数字类型被限制为 253 - 1，这使得某些类型的计算变得困难。ES11 引入 BigInt 将有助于解决这些问题。
示例代码：
// 创建一个 BigInt 值 const value = BigInt(2) ** BigInt(64);
// BigInt 和普通数字相加 const result1 = value + 2n; // 18446744073709551618n const result2 = Number(value) + 2; // 1.8446744073709552e+19
- Promise.allSettled
以前，Promise.all 只有在所有 promises 都解决后才解决，这可能会阻止一些重要的错误信息展示。ES11 引入了 Promise.allSettled，它在所有 promises 解决后立即解决，并返回一个对象数组，其中包含每个 promise 的结果。
示例代码：
// 等待所有 promises 结束 async function waitAll(promises) { const results = await Promise.allSettled(promises); // 处理结果 }
总结
ES11 带来了许多新特性，这些特性为前端开发人员提供了更多的工具和技术，以增强代码的可读性和可维护性。在实践中，学习这些新特性将使您更清晰地了解 JavaScript 语法和机制，并提高您的代码质量和效率。我们鼓励每一个前端开发人员将这些技术运用到实践中，为更好的 Web 前端体验做出贡献。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/648bbf9548841e9894a09ec9