ES11 中新出现的技术栈

随着前端技术的不断发展，ES11（也称为 ECMAScript 2020）在 2020 年 6 月正式发布，引入了许多新的特性和语法，为前端开发带来了更多的便利和可能性。本文将介绍 ES11 中新出现的技术栈，并为读者提供深入学习和实践的指导。

1. 可选链运算符

在 ES11 之前，我们通常使用 && 运算符来判断对象中是否存在某个属性，例如：

if (obj && obj.prop) {
  // do something
}

但是这种写法比较繁琐，如果嵌套的属性比较多，代码会变得非常冗长。ES11 引入了可选链运算符 ?.，可以更方便地处理这种情况：

if (obj?.prop) {
  // do something
}

如果 obj 存在且 prop 存在，则条件成立；否则条件不成立。

可选链运算符还可以用于函数调用：

obj?.func();

如果 obj 存在，则调用 func() 函数；否则不执行。

2. 空值合并运算符

在 JavaScript 中，如果我们想要给变量设置一个默认值，通常使用 || 运算符：

const x = a || b;

如果 a 为真，则 x 的值为 a；否则 x 的值为 b。但是如果 a 的值为假值（例如 0 或 ''），则 x 的值也会被设置为 b，这可能会导致一些难以察觉的问题。

ES11 引入了空值合并运算符 ??，可以更安全地设置默认值：

const x = a ?? b;

如果 a 的值为 null 或 undefined，则 x 的值为 b；否则 x 的值为 a。

3. Promise.allSettled()

在 ES6 中，我们引入了 Promise 对象来处理异步操作，但是 Promise 的错误处理比较麻烦，需要使用 .catch() 方法来捕获错误。ES11 引入了 Promise.allSettled() 方法，可以更方便地处理多个 Promise 对象的状态：

Promise.allSettled([promise1, promise2, ...])
  .then(results => {
    // results 包含所有 Promise 对象的状态
  })

Promise.allSettled() 方法返回一个 Promise 对象，该对象在所有 Promise 对象都执行完毕后才会 resolve，resolve 的值是一个数组，包含所有 Promise 对象的状态。每个状态对象都包含以下属性：

• status：Promise 对象的状态，可能的值为 fulfilled（已完成）或 rejected（已拒绝）。
• value（可选）：如果 Promise 对象的状态为 fulfilled，则为 Promise 对象的返回值。
• reason（可选）：如果 Promise 对象的状态为 rejected，则为 Promise 对象的错误信息。

4. String.prototype.matchAll()

在 ES6 中，我们使用正则表达式的 g 标志来匹配字符串中的所有符合条件的子串，例如：

const str = 'hello world';
const regex = /l/g;
const matches = str.match(regex); // ['l', 'l', 'l']

但是 match() 方法只返回第一个匹配的子串，如果我们想要获取所有匹配的子串，就需要使用循环来实现。ES11 引入了 String.prototype.matchAll() 方法，可以更方便地获取所有匹配的子串：

const str = 'hello world';
const regex = /l/g;
const matches = [...str.matchAll(regex)]; // [['l', index: 2, input: 'hello world'], ['l', index: 3, input: 'hello world'], ['l', index: 9, input: 'hello world']]

matchAll() 方法返回一个迭代器对象，可以使用 for...of 循环来遍历所有匹配的子串。每个子串都是一个数组，包含以下属性：

• 匹配的子串
• index：匹配的子串在原字符串中的起始位置
• input：原字符串

5. BigInt

在 JavaScript 中，数字类型只能表示 2⁵³-1 以内的整数，如果超出这个范围，就会失去精度。ES11 引入了 BigInt 类型，可以表示任意大的整数：

const x = 123n;
const y = BigInt('123456789012345678901234567890');

BigInt 类型的值必须以 n 结尾，或者使用 BigInt() 函数来创建。

BigInt 类型的值可以和普通数字类型进行运算，但是需要注意类型转换的问题：

const x = 123n;
const y = 456;
const z = x + BigInt(y); // 579n

总结

ES11 引入了许多新的特性和语法，包括可选链运算符、空值合并运算符、Promise.allSettled() 方法、String.prototype.matchAll() 方法和 BigInt 类型。这些新特性可以让我们更方便地处理各种问题，提高开发效率和代码质量。读者可以通过学习和实践这些新特性，提高自己的前端技能，更好地应对未来的开发挑战。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662c73a5d3423812e49f92ad