ES11 带来的 21 个新特性
ES11(2020年版 ECMAScript) 是JavaScript的最新版本，其中包含了许多有用的新特性。这些特性可以帮助开发人员更快、更高效地编程。本文将介绍ES11 中最优秀的21 个新特性。
- 字符串 replaceAll
ES11中的字符串方法replaceAll()允许替换所有匹配的字符串。在此之前，只有一个方法replace()，每次只能替换一个匹配项。例如：
const string = 'example example example'; const newString = string.replace('example', 'new');
在这个例子中，只有第一个“example”被替换成“new”。但是，使用replaceAll()方法可以实现替换所有匹配项。例如：
const string = 'example example example'; const newString = string.replaceAll('example', 'new');
现在，所有“example”都被替换成“new”。
- Promise.allSettled
Promise.all()等待所有 Promise 成功解决，或者其中一个 Promise 被拒绝后立即被拒绝。Promise.allSettled()等待所有 Promise 解决，并以对象数组的形式返回每个 Promise 的结果。例如：
const promise1 = Promise.resolve(1); const promise2 = Promise.resolve(2); const promise3 = Promise.reject("Error"); Promise.allSettled([promise1, promise2, promise3]) .then((results) => results.forEach((result) => console.log(result)));
这将返回一个对象数组，其中每个对象表示一个Promise的结果。
- 匹配任意
在正则表达式中，使用一个点“.”来匹配除换行符之外的任何字符，但不能匹配换行符。ES11 引入了一个新元字符“s”，用于匹配任何字符，包括换行符。例如：
const longString = "This is a long string\nthat spans across multiple lines."; const regex = /s.+s/s; console.log(longString.match(regex));
在这个例子中，正则表达式\s.+s/s匹配任何字符，包括换行符。输出结果为：
[ 's is a long string\nthat spans across m' ]
- 私有属性
以前，JavaScript没有私有属性的概念，因为所有属性都可以被访问和更改。ES11 引入了私有属性的概念，让开发人员能够使用#符号将属性标记为私有。例如：
-- -------------------- ---- ------- ----- ------ - ------ ----------------- - ---------- - ----- - --------- - ------ ----------- - - ----- ------ - --- ----------- ------ ------------------------------ -- ---- ---- -------------------------- -- -------- ------------ ------- ----- ------- ---- -- -------- -- -- --------- -----展开代码
- Promise.any
Promise.any()在任意 Promise 确定后即解决。如果所有的 Promise 被拒绝，Promise.any() 引发 "聚合错误"。例如：
-- -------------------- ---- ------- ----- -------- - --- ----------------- ------- -- ------------- -- ------------- ---- ----- -- ----- -------- - --- ----------------- ------- -- ------------- -- ---------------- ---- ----- -- ----- -------- - --- ----------------- ------- -- ------------- -- ---------------- ---- ----- -- ---------------------- --------- ------------------------ -- ---------------------展开代码
因为 promise2 成功，它是最先解决的，Promise.any()返回的是"Success 2"字符串。
- 更好的错误处理
ES11引入了一个新的对象类型，名为 Error Cause, 用于更好地处理错误。当出现嵌套错误时(一个错误是由另一个函数引起的)，可以使用 Error Cause对象来跟踪原始出错的源。如果没有导致错误的东西，Error Cause对象将是 null。例如：
-- -------------------- ---- ------- -------- ----- - ----- --- ------------ ---- - -------- ----- - --- - ------ - ----- --- - ----- --- ------------ --- - ------ - --- - - --- - ------ - ----- --- - --------------- --------------------- -展开代码
在这个例子中，当函数fn1()抛出错误时，它被捕获并使用 Error Cause 对象传递给 fn2()，最终在catch块中输出错误信息和错误源。
- 数字分隔符
ES11允许在数字中添加分隔符，使数字更易于阅读。分隔符使用下划线字符(_)。例如：
const bigNumber = 10_000_000; console.log(bigNumber); // 10000000
- Promise.allSettled()
Promise.allSettled() 方法接收一个 Promise 数组，等待所有 Promise 解决为止。 这与 Promise.all() 方法不同，后者在所有 Promise解决后解决，并且如果有一个 Promise 被拒绝，则立即被拒绝。
- Nullish 合并操作符
Nullish 合并操作符（??，双问号）用于为 null 或 undefined 的值提供默认值。 例如：
const value = (() => {})?.() ?? 'default'; console.log(value); // default
- 可选链操作符
可选链操作符（?.）用于简化访问嵌套对象属性或方法的流程。 在尝试访问具有 null 或 undefined 值的嵌套属性或方法时，代码通常会抛出一个类型错误。 可选链操作符对于处理深层次的嵌套对象结构特别有用。例如：
-- -------------------- ---- ------- ----- ------- - - ----- -------- ------- --- ----------- - ----- --- ------------ --------- - ------- ----- ------- ----- ----- -------- ---- - - -- ----- ------------- - ------------------------------------- --------------------------- -- ----- ------- ----展开代码
在这个例子中，使用可选链操作符，即使manager.department或manager.department.location子对象不存在或为null或undefined，也不会抛出错误。
- 元素position属性 in Intl.ListFormat
当使用Intl.ListFormat Format函数处理数组时, 特别是长数组时，可以使用属性指定单个元素在列表中的位置。 例如：
const listFormat = new Intl.ListFormat('en-US', {style: 'long', type: 'disjunction'}); const fruits = ['apple', 'banana', 'orange', 'kiwi', 'raspberry']; const format = listFormat.formatToParts(fruits); console.log(format.map(item => item.value)); // ["apple", ", ", "banana", ", ", "orange", ", ", "kiwi", ", ", "or", "raspberry"]
在这个例子中，因为 fruits 数组中有八个元素，所以将“or”放在第七个元素后面。
- BigInt API
在JavaScript中，Number 类型的值有一个最大值，即2^53-1，如果需要处理比这个数更大的值，可以使用 BigInt 类型。ES11 提供了一组用于 BigInt 类型操作的 API。例如：
const bigNumber = BigInt("9007199254740991") + BigInt("1"); console.log(bigNumber); // 9007199254740992n
- Promise.allSettled
Promise.allSettled() 方法接收一个 Promise 数组，等待所有 Promise 解决为止。 这与 Promise.all() 方法不同，后者在所有 Promise 解决后解决，并且如果有一个 Promise 被拒绝，则立即被拒绝。
- 或运算符（||）和空值合并运算符（??）的优先级调整
ES11 修复了或运算符（||）和空值合并运算符（??）的优先级问题，使它们具有更加合理的行为。现在，或运算符优先于空值合并运算符。例如：
const x = null; const y = undefined; const z = 'foo'; const result = x ?? y || z; console.log(result); // 'foo'
在这个例子中，使用括号强制先计算 y || z表达式，输出结果 as 'foo'。
- Promise.allSettled()
Promise.allSettled() 方法接收一个 Promise 数组，等待所有 Promise 解决为止。 这与 Promise.all() 方法不同，后者在所有 Promise 解决后解决，并且如果有一个 Promise 被拒绝，则立即被拒绝。
- String.prototype.matchAll()
String.prototype.matchAll() 方法返回一个带所有匹配结果的迭代器。 例如：
const string = 'abqwerqwerqwer'; const regex = /\w{3}/g; for (const match of string.matchAll(regex)) { console.log(match); }
在这个例子中，输出all matches.
- globalThis
globalThis 是一个新的全局对象，用于访问全局上下文。 globalThis 的值与 window 或 self 等全局对象的值相同，并提供了一个平台无关的方法来访问全局上下文。 例如：
console.log(globalThis);
- String.prototype.replaceAll()
String.prototype.replaceAll() 方法替换一个字符串中的所有匹配项，并返回一个新的字符串。例如：
const string = "JavaScript is the best!"; const newString = string.replaceAll("JavaScript", "TypeScript"); console.log(newString); // TypeScript is the best!
- 独立函数的new.target
new.target是函数体内代码中在函数被 new调用时返回实例对象的构造函数。 例如：
-- -------------------- ---- ------- -------- ------------ - -- ----------- --- ---------- - ----- --------- ---- -- ------ ---- --- ---------- - --------- - ----- - ----- ------- - --- ----------- ------ -------------------------- -- ---- ---- ----- ------- - -------------------- -------- --- ------展开代码
在这个例子中，如果直接调用Person()函数，它将抛出错误。 另外，person2 的值为undefined，因为Person.call(person1, 'Another Jon Doe')没有使用 new调用Person()。
- 逻辑赋值操作符 &&=、||=
ES11 引入了 &&= 和 ||= 这两个逻辑赋值运算符。 这些运算符是经典的逻辑运算符（&&和||）和赋值运算符（=）的组合。 这些操作符对于简化代码特别有用。例如：
let x = 0; const y = 1; x ||= y; // x is now 1 x &&= y; // x is still 1
在这个例子中，使用或运算符将y的值分配给x变量。
- for-in遍历的隐式屏蔽
ES11 修改了 for-in 遍历隐式屏蔽特性。在以前的版本中，如果遍历对象的属性时，内部声明的变量与外部变量同名，就会覆盖外部变量。ES11修改了这个问题，现在同时存在内部和外部变量，for-in遍历默认使用内部变量。例如：
const obj1 = { name: "John", age: 30 }; const obj2 = { name: "Sam", age: 25 }; for (const { name, age } of [obj1, obj2]) { console.log(`Name: ${name}, Age: ${age}`); }
在这个例子中，遍历的变量使用的是解构内部变量，而不是外部变量。
本文介绍了ES11（2020年版 ECMAScript）中最有用的21个新特性。许多这些特性都可以减少代码量、提高代码效率以及帮助开发人员更好地处理错误和异常情况。深入掌握这些功能可以使你的编程工作更加得心应手，节省大量时间和努力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c242a1314edc2684b5e3c7
