随着 JavaScript 的不断发展，新版本的 ECMAScript 也在不断更新。ES11 和 ES12 是最新的两个版本，它们引入了许多新特性，包括一些非常实用的功能，可以让前端开发更加简单、高效和强大。在本文中，我们将详细介绍 ES11 和 ES12 的新特性，以及如何在你的 JavaScript 代码中使用它们。
ES11 新特性
可选链操作符
可选链操作符是一个非常实用的功能，它可以在访问对象属性时避免出现错误。在以前的版本中，如果你要访问一个对象的属性，但是这个对象可能不存在，你就需要使用一些条件语句来避免出现错误。但是现在，你可以使用可选链操作符来简化这个过程。
可选链操作符的语法如下：
object?.property
例如，如果你要访问一个嵌套对象的属性，但是这个嵌套对象可能不存在，你可以这样写：
const name = person?.address?.city?.name;
如果 person、address、city 或者 name 中的任何一个属性不存在，name 就会被赋值为 undefined，而不会出现错误。
空值合并运算符
空值合并运算符是另一个非常实用的功能，它可以在值为 null 或 undefined 时提供一个默认值。在以前的版本中，你需要使用条件语句来检查一个值是否为 null 或 undefined，然后提供一个默认值。但是现在，你可以使用空值合并运算符来简化这个过程。
空值合并运算符的语法如下：
valueA ?? valueB
例如，如果你要获取一个变量的值，但是这个变量可能为 null 或 undefined，你可以这样写：
const value = valueA ?? valueB;
如果 valueA 的值为 null 或 undefined，value 就会被赋值为 valueB。
Promise.allSettled
Promise.allSettled 是一个新的 Promise 方法，它可以在所有 Promise 对象都完成后返回一个数组，数组中包含每个 Promise 对象的状态和结果。在以前的版本中，Promise.all 只有在所有 Promise 对象都成功时才返回一个结果，如果有任何一个 Promise 对象失败，它就会抛出一个错误。但是现在，Promise.allSettled 可以返回所有 Promise 对象的状态和结果，无论它们是否成功。
Promise.allSettled 的语法如下：
Promise.allSettled([promise1, promise2, ...])
例如，如果你有两个 Promise 对象，你可以这样使用 Promise.allSettled：
const promises = [promise1, promise2];
Promise.allSettled(promises).then(results => {
results.forEach(result => console.log(result.status, result.value));
});String.prototype.matchAll
String.prototype.matchAll 是一个新的 String 方法，它可以返回一个迭代器，该迭代器包含所有与正则表达式匹配的子字符串及其捕获组。在以前的版本中，String.prototype.match 只能返回第一个匹配项。但是现在，你可以使用 String.prototype.matchAll 来获取所有匹配项。
String.prototype.matchAll 的语法如下：
string.matchAll(regexp)
例如，如果你要匹配一个字符串中的所有 email 地址，你可以这样写：
const emailRegex = /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/g;
const emails = "john@example.com, jane@example.com".matchAll(emailRegex);
for (const email of emails) {
console.log(email[0]);
}ES12 新特性
Promise.any
Promise.any 是一个新的 Promise 方法，它可以在所有 Promise 对象中任意一个成功时返回一个结果。在以前的版本中，Promise.all 只有在所有 Promise 对象都成功时才返回一个结果，如果有任何一个 Promise 对象失败，它就会抛出一个错误。但是现在，Promise.any 可以在任意一个 Promise 对象成功时返回一个结果。
Promise.any 的语法如下：
Promise.any([promise1, promise2, ...])
例如，如果你有两个 Promise 对象，你可以这样使用 Promise.any：
const promises = [promise1, promise2]; Promise.any(promises).then(result => console.log(result));
数字分隔符
数字分隔符是一个非常实用的功能，它可以在数字中使用下划线来提高可读性。在以前的版本中，你需要手动计算数字中的位数来提高可读性。但是现在，你可以使用数字分隔符来简化这个过程。
数字分隔符的语法如下：
const number = 10_000_000;
String.prototype.replaceAll
String.prototype.replaceAll 是一个新的 String 方法，它可以替换所有匹配的子字符串。在以前的版本中，String.prototype.replace 只能替换第一个匹配项。但是现在，你可以使用 String.prototype.replaceAll 来替换所有匹配项。
String.prototype.replaceAll 的语法如下：
string.replaceAll(searchValue, replaceValue)
例如，如果你要将一个字符串中的所有空格替换为下划线，你可以这样写：
const str = "hello world";
const result = str.replaceAll(" ", "_");
console.log(result); // "hello_world"总结
ES11 和 ES12 引入了许多实用的新特性，可以让你的 JavaScript 代码更加强大和高效。在本文中，我们详细介绍了可选链操作符、空值合并运算符、Promise.allSettled、String.prototype.matchAll、Promise.any、数字分隔符和String.prototype.replaceAll，希望这些新特性可以帮助你更好地编写前端代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d1aa96add4f0e0ffa4c2be