前言
ES11 是 JavaScript 语言的最新版本，又称为 ECMAScript 2020，最初提案于 2019 年 6 月，在2020年6月由 EBMAScript 官方发布，其中新增了很多的特性，使开发人员能够更容易地编写和维护代码，在这篇文章中，我们将深度讨论 ES11 引入的新特性，及其在前端开发中的意义和应用。
ES11 主要特性
可选的 Chaining 运算符（Optional Chaining Operator）
在 JavaScript 中有许多情况下，我们需要深度读取对象的属性，例如我们要访问 person.job.company.location，这时候就需要判断 person、job 和 company 是否存在，否则就会报找不到 undefined 属性的错误。实际上，我们可以使用以下方式来避免这个问题：
const location = person && person.job && person.job.company && person.job.company.location;
这段代码会逐层判断，只有当 person、job、company 和 location 都有值时才会返回 location。但是，这种写法需要写很多判断，因此在 ES11 中，引入了可选链运算符 ?.，可以通过更少的代码实现同样的效果：
const location = person?.job?.company?.location;
上面的代码只要有任意一层属性不存在，就会返回 undefined。
空值合并运算符（Nullish Coalescing Operator）
在 JavaScript 中，当访问一个不存在的属性时，默认会返回 undefined。但是，在某些情况下，我们可能需要判断一个值是否为真（truthy），如果不存在或者为假（falsy），就使用一个默认值来代替 undefined。在 ES11 中，可以使用空值合并运算符 ?? 来实现这个功能：
const value = foo ?? 'default';
如果 foo 有值，就返回它的值，否则会返回 'default'。
变更的 import/export 语法
在 ES6 中，引入了 import/export 语法，使我们能够轻松地将代码拆分成不同的模块。但是，在 ES11 中，它们被补充了一些变化，包括：
动态 Import
在以前，我们必须在代码中使用静态导入语句，即明确指定导入的模块。但是，在 ES11 中，我们可以使用动态导入语句来加载模块，这非常有用，特别是在需要按需加载依赖项时。例如：
async function fetchModule() {
const module = await import('./some-module.js');
module.render();
}
fetchModule();上面的代码在运行时动态加载模块，把 ./some-module.js 作为参数传递给 import() 方法，然后在加载成功后直接调用它的 render() 方法。
增强的导出语法
在以前，如果我们希望从一个模块中导出多个变量，必须在代码中使用命名导出语法，并给每个变量命名。但是，在 ES11 中，我们可以使用增强的导出语法，一次性导出多个变量和常量。例如：
export * as utils from './utils.js';
上面的代码将 utils.js 文件中的所有内容导出，并放置到一个名为 utils 的命名空间中。
全局对象的新方法与属性
在 ES11 中，全局对象（window 或 global 对象）引入了以下新的方法和属性：
globalThis
在浏览器和 Node.js 中，我们经常需要访问全局对象。但是，在不同的环境中，全局对象的名称却不一样：在浏览器中是 window，在 Node.js 中是 global。为了解决这个问题，ES11 引入了一个新的全局对象 globalThis，可以在任何环境下都能使用：
const globalThisVar = (typeof globalThis !== 'undefined') ? globalThis :
(typeof self !== 'undefined') ? self :
(typeof window !== 'undefined') ? window : {};
console.log(globalThisVar);上面的代码中，如果 globalThis 存在就使用它，否则逐一判断 self、window 等全局对象，最终返回一个全局对象。
Promise.allSettled
在以前，如果我们有一个 Promise 数组，并希望以一种更复杂的方式优化处理结果，例如：不仅希望看到它们是否解决，还希望了解不解决每个 Promise 的原因（这是 Promise.allSettled 很有用的场景）。例如：
-- -------------------- ---- -------
----- -------- - -
-----------------------------
-----------------------------
------------------------------
--
----- ------- - ----- -----------------------------
--- ------ ------ -- -------- -
-- -------------- --- ------------ -
--------------------------
- ---- -
-------------------- -------------------
-
-上面的代码使用 Promise.allSettled 方法来获取全部 Promise 值的解决情况，并根据状态进行相应处理。
其他语言特性
ES11 中还引入了很多其他的语言特性，包括：
- 双重 :: 运算符（Double Colon Operator）：类似于 PHP 语言中的
::运算符； - 可以退出函数与循环语句时的可选标签名；
- 新增了 String.prototype.matchAll() 方法，可以一次性返回所有匹配项的详细信息；
- 新增了 BigInt 数据类型，可以在 JavaScript 中实现大整数；
- 新增了可选参数捕捉，还有更多高级函数。
总结
ES11 引入的新特性是一大步向前，使开发者能够快速编写并维护代码。我们在本文中深入讨论了 ES11 引入的一些新特性，并展示了它们如何应用于实际的代码。当你进一步了解 ES11 中的新功能时，这些新特性必将极大地帮助你在开发过程中更加灵活、高效和专业。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a7713a48841e98943ef632