ES11（也称为 ECMAScript 2020）是 JavaScript 的最新版本，它在 2020 年 6 月正式发布。本文将介绍 ES11 的新特性，并列出各大浏览器对这些特性的支持情况。
新特性概览
ES11 新增了以下特性：
1. 可选链操作符（Optional Chaining）
可选链操作符 ?. 可以简化代码中的条件判断，避免出现繁琐的判断语句。它的作用是判断变量是否为空或者未定义，如果是，则返回 undefined，否则返回该变量的值。
示例代码：
-- -------------------- ---- ------- ----- ------ - - ----- -------- -------- - ----- ----------- ------- ---- ---- ---- -------- ------- - -- ---------------------------------- -- ---------- ------------------------------------------- -- ---------展开代码
2. 空值合并操作符（Nullish Coalescing）
空值合并操作符 ?? 可以用于判断变量是否为空或者未定义，如果是，则返回默认值。它与逻辑或操作符 || 的区别在于，?? 只有在变量为 null 或 undefined 时才返回默认值，而 || 还会在变量为 false、空字符串、0、NaN 时返回默认值。
示例代码：
-- -------------------- ---- ------- ----- ---- - ----- ----- ----------- - -------- ---------------- -- ------------- -- ------- ---------------- -- ------------- -- ------- ----- --- - -- ----- ---------- - --- --------------- -- ------------ -- - --------------- -- ------------ -- --展开代码
3. 动态 import()
动态 import() 可以在运行时动态加载模块，而不需要在代码中显式地引入。这个特性可以用于按需加载模块，提高应用的性能。
示例代码：
async function loadModule(moduleName) { const module = await import(`./modules/${moduleName}.js`); return module; } loadModule('module1').then(module => { // do something with module });
4. BigInt
BigInt 是一种新的数据类型，用于表示任意精度的整数。它可以表示比 Number 类型更大的整数，甚至可以表示无限大的整数。BigInt 类型的数值必须以 n 结尾。
示例代码：
const num1 = 9007199254740991n; const num2 = BigInt('9007199254740991'); console.log(num1 === num2); // true console.log(typeof num1); // 'bigint'
5. Promise.allSettled()
Promise.allSettled() 可以等待所有 Promise 对象都被 fulfilled 或 rejected 后返回一个数组，其中包含每个 Promise 对象的状态和结果或原因。
示例代码：
-- -------------------- ---- ------- ----- -------- - - --------------------------- ----------------------- -- ----------------------------------------- -- - ------------------------ -- - ------- ------------ ------ --------- - ------------------------ -- - ------- ----------- ------- ------- - ---展开代码
浏览器支持情况
下表列出了各大浏览器对 ES11 新特性的支持情况。其中，绿色表示支持，黄色表示部分支持，红色表示不支持。
| 浏览器 | 可选链操作符 | 空值合并操作符 | 动态 import() | BigInt | Promise.allSettled() |
|---|---|---|---|---|---|
| Chrome | ✓ | ✓ | ✓ | ✓ | ✓ |
| Edge | ✓ | ✓ | ✓ | ✓ | ✓ |
| Firefox | ✓ | ✓ | ✓ | ✓ | ✓ |
| Safari | ✓ | ✓ | ✓ | ✓ | ✓ |
| Opera | ✓ | ✓ | ✓ | ✓ | ✓ |
| IE | ✗ | ✗ | ✗ | ✗ | ✗ |
从表格可以看出，各大浏览器对 ES11 新特性的支持度都比较高，只有 IE 完全不支持。因此，我们可以放心地使用 ES11 的新特性来编写前端代码。
总结
ES11 新特性为我们提供了更加便捷、高效的编写 JavaScript 代码的方式。在实际开发中，我们应该充分利用这些新特性，提高代码的可读性和可维护性。同时，我们也应该注意浏览器对这些新特性的支持情况，避免出现兼容性问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6609ba09d10417a2228693ce
