JavaScript 是一门充满活力和不断发展的语言，每年都会有新的规范和改进。ES11（也被称为 ECMAScript 2020）是这种持续发展的结果之一。本文将介绍 ES11 的最有用的新特性，并提供详细、深入的学习和指导意义。
可选链操作符
在 JavaScript 中，我们经常会遇到需要深度访问一个对象的场景。但是如果对象中的某个属性不存在，就会出现错误。为了避免这种情况，我们需要先判断该属性是否存在。以前，我们可以使用 if 语句来完成这项工作：
if (user && user.address && user.address.street) {
// Do something with user.address.street
}这看起来相当冗长且繁琐。ES11 为我们提供了可选链操作符（?.），让代码更加简单明了:
const street = user?.address?.street;
如果 user 不存在、address 不存在或者 street 不存在，那么变量 street 将会是 undefined。这样我们就可以省去繁琐的 if 语句。
空值合并操作符
在 JavaScript 中，有时我们需要检查变量是否为 falsy 值（包括 null、undefined、空字符串和数字 0）。如果变量是 falsy 值，我们需要提供一个默认值。
以前，我们可以使用条件运算符（?:）来完成这项工作：
const name = inputName || 'default name';
这样的代码看起来很简单，但在某些情况下可能会产生错误。例如，如果 inputName 的值为 0，此时输入值为默认值 'default name'，这显然是我们不想看到的。
ES11 提供了空值合并操作符（??），它仅在变量为 null 或者 undefined 时提供默认值：
const name = inputName ?? 'default name';
使用空值合并操作符时，只有在 inputName 为 null 或者 undefined 时才会使用默认值。
动态 Import
以前，在 JavaScript 中引入外部模块需要使用 require 函数。这种方法受到了一些限制，例如它不能异步地加载模块，也不能动态地加载模块。
ES11 引入了动态 Import 机制来解决这些限制。动态 Import 允许我们异步地加载一个模块，并在需要时动态地加载它：
async function loadModule(modulePath) {
const module = await import(modulePath);
// Do something with the module
}此时，我们可以将一个字符串参数传递给 loadModule 函数，该参数指定要加载的模块路径。当代码执行到 await import(modulePath) 时，会异步地加载指定的模块。
更好的 BigInt 支持
在 JavaScript 中，Number 类型可以表示的最大整数是 2^53 - 1。如果要处理更大的整数，我们需要使用 BigInt 类型。ES11 为 BigInt 类型提供了更好的支持，使得我们可以对 BigInt 类型进行更多的操作。
const x = 123456789012345678901234567890n; const y = 123n; console.log(x + y); // 123456789012345678901234567913n
快照稳定排序
在 ES11 之前，如果我们使用 sort() 方法对数组进行排序，将会按照 Unicode 字符编码的顺序进行排序。
ES11 引入了快照稳定排序，它将把相同值的元素保持在原来的顺序，同时在快照的帮助下提升排序效率。
const arr = [3, 1, 4, 1, 5, 9, 2, 6]; arr.sort(); console.log(arr); // [1, 1, 2, 3, 4, 5, 6, 9]
使用快照稳定排序时，我们可以对数组进行排序，且相同的元素保持其原先的顺序。
总结
ES11 带来了很多有用的新特性，许多这些特性可以大大简化代码，提高开发效率。我们介绍了可选链操作符和空值合并操作符，它们为我们提供了更加方便的访问对象属性的方式。我们还介绍了动态 Import 机制和更好的 BigInt 支持，它们为开发者提供了更多的选择。此外，快照稳定排序为 JS 的排序操作提供了更好的支持。我们希望本文能够为您提供有价值的信息。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a62d42add4f0e0ffedfad0