随着前端技术的不断发展，我们迎来了一个新时代的 JavaScript，即 ES11。ES11 新增了许多新的功能和语法，让我们的前端开发更加快捷和高效。在本文中，我们将介绍 ES11 的 10 个新功能，并提供详细的示例代码和指导意义，帮助开发者更好地掌握这些新特性。
1. 空值合并操作符（Nullish Coalescing Operator）
在 ES11 中，新增了一个空值合并操作符（??），用于简化空值检查的代码。例如，我们经常会这样写代码：
let x = y !== undefined ? y : 'default';
使用空值合并操作符，可以将上述代码简化为：
let x = y ?? 'default';
空值合并操作符的意思是，如果左侧的值是 null 或 undefined，则使用右侧的值作为默认值。
2. 动态导入（Dynamic Import）
ES11 引入了动态导入功能，可以在运行时动态地加载模块，而不需要预先导入。例如，我们可以这样写代码：
const module = await import('./module.js');上述代码将在运行时动态加载 module.js 模块，并等待该模块加载完成后，将模块导入变量 module 中。这种方式可以提高应用程序的性能，只有当需要使用某个模块时才会加载。
3. BigInt
在 ES11 中，引入了 BigInt 类型，用于表示更大范围的整数。BigInt 可以表示任意位数的整数，而不会出现精度丢失问题。例如：
const x = 9007199254740991n; const y = BigInt(9007199254740991); console.log(x === y); // true
4. Promise.allSettled()
在 ES11 中，Promise.allSettled() 方法可以同时处理多个 Promise 对象，并返回一个数组，该数组包含每个 Promise 对象的结果或错误信息。例如：
-- -------------------- ---- ------- ----- -------- - - ----------------------- ---------------------- ---------------------- -- ----------------------------------------- -- - --------------------- --- -- ------- --------- ------------ ------ ------- -------- ----------- ------- ------- -------- ------------ ------ -------
5. 可选链操作符（Optional Chaining）
在 ES11 中，新增了可选链操作符（?.），用于简化访问深层嵌套的属性或方法时的代码。例如：
const name = user?.address?.city;
上述代码将尝试访问 user 对象的 address 属性，如果该属性存在，则访问其 city 属性。如果 user、address 或 city 中的任意一个不存在，则返回 undefined，而不会引发 TypeError 错误。
6. 自适应字体大小（font-display）
在 ES11 中，新增了 font-display 属性，用于控制浏览器如何加载和渲染字体。该属性可以包含以下取值：
- auto：默认值，浏览器自动选择最佳方式来加载和渲染字体。
- block：让浏览器等待字体文件的加载和解压缩，直到字体文件可用为止。
- fallback：使用系统默认字体代替尚未加载的自定义字体。
- optional：仅在字体文件已加载且解压缩后才使用该字体。
例如，我们可以这样使用该属性：
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
font-display: optional;
}7. String.prototype.matchAll()
在 ES11 中，新增了 String.prototype.matchAll() 方法，用于在字符串中查找所有匹配某个正则表达式的子串。例如：
const str = 'Hello world!';
const regex = /[aeiou]/g;
for (const match of str.matchAll(regex)) {
console.log(match);
}
// Output: ["e", index: 1, input: "Hello world!", groups: undefined], ["o", index: 4, input: "Hello world!", groups: undefined]8. 私有字段和方法
在 ES11 中，新增了私有字段和方法的语法，可用于封装类的内部实现，禁止外部访问。例如：
class Person {
#name = 'Anonymous';
sayHello() {
console.log(`Hello, my name is ${this.#name}.`);
}
}上述代码中，#name 是一个私有字段，只能在类的内部使用，而不能在外部访问。
9. 全局对象的可选链语法补充
在 ES11 中，全局对象 window 和 globalThis 的可选链语法补充，可以更方便地访问全局对象的属性和方法。例如：
console?.log?.('Hello world!');上述代码等价于：
if (console && console.log) {
console.log('Hello world!');
}10. WeakRef 和 FinalizationRegistry
在 ES11 中，新增了 WeakRef 和 FinalizationRegistry 类，用于改善 JavaScript 对象的垃圾回收机制。WeakRef 可以将对象存储在弱引用中，从而不影响垃圾回收，而 FinalizationRegistry 可以在对象销毁时执行一些清理操作。例如：
-- -------------------- ---- ------- ----- ------- - --- -------------- ---------- ----------------------------- -- ------ -------- ----- -------- - --- -------------------------- -- - --------------------- -- ---------------- --- ---------------------------------- ------ ---------- --------------- - ----- -- ------- -------- -- -----
上述代码中，我们使用 WeakRef 存储一个包含 name 属性的对象，并注册到 FinalizationRegistry 中。当对象销毁时，会执行 FinalizationRegistry 的清理操作，输出“Cleaning up Alice”。
结语
本文介绍了 ES11 中的 10 个新功能，包括空值合并操作符、动态导入、BigInt、Promise.allSettled()、可选链操作符、自适应字体大小、String.prototype.matchAll()、私有字段和方法、全局对象的可选链语法补充以及 WeakRef 和 FinalizationRegistry。这些新特性可以使我们的前端开发更加快捷和高效，希望本文能对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6782bb46935627c90019d0b8
