随着前端技术的不断发展，JavaScript 也在不断更新迭代。ES11（也称为 ECMAScript 2020）是 JavaScript 的最新版本，它带来了很多新的语法和功能，使得我们能够更加高效地编写代码。
在本篇文章中，我们将详细介绍 ES11 的实用语法和实战经验，帮助读者更好地掌握现代 JavaScript 的技术。
可选链操作符（Optional chaining）
在以前的 JavaScript 版本中，当我们需要访问一个对象的属性或方法时，通常需要使用多个点符号（.）来进行链式调用，例如：
const street = user.address.street;
但是，如果其中某个属性不存在，就会抛出一个错误。为了避免这种情况，我们通常需要使用短路运算符 && 来进行判断，例如：
const street = user && user.address && user.address.street;
这样虽然可以避免错误，但代码看起来比较冗长。ES11 引入了可选链操作符 ?.，可以更加简洁地实现上述代码，例如：
const street = user?.address?.street;
如果 user 或 address 中的任意一个属性不存在，street 变量将会被赋值为 undefined。
空值合并操作符（Nullish coalescing）
在 JavaScript 中，|| 运算符通常用于给变量赋默认值。例如：
const name = username || 'Unknown';
但是，如果 username 的值为 0、''、false 或者 null，上述代码将会出现问题，因为它们都被视为 falsy 值。ES11 引入了空值合并操作符 ??，可以更加精确地进行判断，例如：
const name = username ?? 'Unknown';
只有当 username 的值为 null 或 undefined 时，name 才会被赋值为 'Unknown'。
Promise.allSettled()
在以前的 JavaScript 版本中，Promise.all() 方法可以将多个 Promise 对象封装成一个新的 Promise 对象，并在所有 Promise 对象都成功时返回一个包含所有结果的数组。但是，如果其中一个 Promise 对象失败了，整个 Promise 对象将会被拒绝。
ES11 引入了 Promise.allSettled() 方法，可以在所有 Promise 对象都完成时返回一个包含所有结果的数组，不管它们成功还是失败。例如：
// www.javascriptcn.com code example
const promises = [
Promise.resolve(1),
Promise.reject('error'),
Promise.resolve(3),
];
Promise.allSettled(promises).then((results) => {
console.log(results);
});
// 输出：
// [
// { status: 'fulfilled', value: 1 },
// { status: 'rejected', reason: 'error' },
// { status: 'fulfilled', value: 3 }
// ]String.prototype.matchAll()
在以前的 JavaScript 版本中，String.prototype.match() 方法可以在字符串中搜索匹配某个正则表达式的子字符串，并返回一个包含所有匹配结果的数组。但是，它只能返回第一个匹配结果，如果需要获取所有匹配结果，就需要使用循环来重复调用。
ES11 引入了 String.prototype.matchAll() 方法，可以一次性获取所有匹配结果。例如：
// www.javascriptcn.com code example
const str = 'hello world';
const regex = /l/g;
const matches = str.matchAll(regex);
for (const match of matches) {
console.log(match);
}
// 输出：
// { 0: 'l', index: 2, input: 'hello world' }
// { 0: 'l', index: 3, input: 'hello world' }其他实用语法和实战经验
除了上述语法外，ES11 还引入了很多其他实用的语法和功能，例如：
- 可以使用
BigInt类型来处理超出Number类型范围的整数； - 可以使用
globalThis全局对象来访问全局作用域中的变量和函数，不再需要使用window或self； - 可以使用
import()函数动态导入模块，可以更加灵活地进行模块化开发； - 可以使用
for-in和for-of循环遍历对象和数组，比传统的for循环更加简洁。
总之，ES11 带来了很多实用的语法和功能，可以让我们更加高效地编写 JavaScript 代码。在实际开发中，我们应该根据具体需求选择合适的语法和功能，以提高代码质量和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d0f43ea941bf713420f0d9