JavaScript 已经成为了我们的 Web 开发中非常重要的一部分，而 ES11 也是 JavaScript 语言的一个新版本，带来了一系列的新特性和更新。在这篇文章中，我将从详细解释每个特性的用途、作用及其在实际开发中应用的情况。
1. Optional Chaining
Optional Chaining 是一项非常有用的特性，它允许我们检查目标对象是否存在并访问其属性，如果目标不存在，则返回 undefined。以下是一个简单的例子：
-- -------------------- ---- -------
----- ---- - -
----- ------
---- ---
-------- -
----- ----------
--------- ----------
-------- -------
-
-
----------------------------------- -- -----
-------------------------------- -- ---------上面的代码中，user 对象存在一个嵌套的 address 对象和一个没有定义的 phone 对象，我们可以使用 Optional Chaining 来访问 address 对象的 country 属性，如果 phone 对象不存在，则不会报错。
2. Nullish coalescing Operator
Nullish coalescing Operator 是一种新的运算符，它可以用来判断一个值是否为 null 或者 undefined。 如果一个变量的值是 null 或 undefined，那么赋值的结果取决于赋值运算符的右边操作数，而不是左边的操作数。
以下是一个例子：
const a = null ?? 'default value'; // 'default value' const b = undefined ?? 'default value'; // 'default value' const c = 0 ?? 'default value'; // 0 const d = false ?? 'default value'; // false
在上面的代码中，变量 a 和 b 的值分别为 null 和 undefined，使用 Nullish coalescing Operator 对它们进行赋值，结果都是 'default value'。
3. String.prototype.matchAll
String.prototype.matchAll 可以在一个字符串中查找所有与正则表达式匹配的子串。这个功能类似于 RegExp.prototype.exec，但它返回的是一个迭代器，因此我们可以通过 for...of 循环获取所有的匹配子串，以下是一个示例：
const regex = /pattern/g;
const str = 'pattern is great, pattern is beautiful';
for (const match of str.matchAll(regex)) {
console.log(match);
}在上面的代码中，我们创建了一个正则表达式，然后使用 matchAll 方法在字符串 str 中搜索匹配的所有子串。
4. Promise.allSettled
在 ES11 中，我们有一个新的 Promise 方法叫做 Promise.allSettled。这个方法类似于 Promise.all，但是它会等待所有的 Promise 被解决（即 fulfilled 或者 rejected），然后返回一个数组，其中每个元素表示一个 Promise 的解决结果的状态，具体形式为 {status: 'fulfilled', value: 'xxx'} 或 {status: 'rejected', reason: 'xxx'}。
以下是一个示例：
-- -------------------- ---- -------
----- -------- - -------------------
----- -------- - --- ----------------- ------- -- ------------------ ----- ----------
----- -------- - --- ----------------- ------- -- ------------------- ---- ---------
----------------------------- --------- ----------
--------------- -- -
---------------------
--
-------------- -- -
-------------------
---在上面的代码中，我们创建了三个 Promise，分别用来演示 Promise.allSettled 的用法。
5. import()
ES11 引入了 import() 动态导入语法。在之前的版本中，我们只能在模块的开头使用 import，但是在 ES11 中，我们可以在运行时动态地加载模块。
以下是一个示例：
-- -------------------- ---- ------- ----- ---------- - ----- -- -- - ----- ------ - ----- ---------------------- ----- - -------- ---- ------- - - ------- ---------------------- -- - --------------------- -- --- - -------------
在上面的代码中，我们使用 import() 方法动态地加载模块 module.js，并使用 await 等待模块加载完成。加载完成后，我们可以像普通模块一样使用其中的变量和函数。
总结
在 ES11 中，我们看到了几个非常有用的更新和新特性，这些特性都可以让我们更加有效地开发和调试 JavaScript 应用程序。不断学习和了解新的技术特点，以便我们可以更好地应用这些技术来提高我们的开发效率，并写出更优秀的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ec9671f6b2d6eab36e46bc