前端技术日新月异，最新的 ES10 标准增加了一些非常有用的功能。在本文中，我们将详细介绍这些新功能，并提供示例代码来帮助您理解它们。我们将探讨以下几个主题：
Array.prototype.flat()和Array.prototype.flatMap()- 改进的正则表达式功能
String.prototype.trimStart()和String.prototype.trimEnd()Object.fromEntries()Symbol.prototype.description- Promise.allSettled()
globalThiscatch绑定- 改进的
JSON.stringify() BigIntWebAssembly- 离线存储
1. Array.prototype.flat() 和 Array.prototype.flatMap()
新的 Array.prototype.flat() 方法可以将嵌套数组“平展”，即将嵌套的数组拍平成一个新数组。
const arr = [1, 2, [3, 4]]; const flattened = arr.flat(); console.log(flattened); // [1, 2, 3, 4]
Array.prototype.flatMap() 方法与之类似，不同之处在于它可以在拍平嵌套数组之后，对每个元素应用一个映射函数（即可对拍平后的数组进行一些操作）。
const arr = [1, 2, 3]; const mappedAndFlattened = arr.flatMap(x => [x * 2]); console.log(mappedAndFlattened); // [2, 4, 6]
2. 改进的正则表达式功能
ES10 引入了一些新的正则表达式功能，包括“非捕获组”和“后行断言”。
“非捕获组”允许您对正则表达式的某个部分进行分组，但不会在匹配结果中显示该组：
const regex = /(?:foo){2}/;
console.log(regex.test('foofoo')); // true
console.log(regex.test('foo')); // false“后行断言”允许您在匹配某个字符串的后面添加一些限制条件：
const regex = /(?<=foo)bar/;
console.log(regex.test('foobar')); // true
console.log(regex.test('bazbar')); // false3. String.prototype.trimStart() 和 String.prototype.trimEnd()
String.prototype.trimStart() 和 String.prototype.trimEnd() 方法可以分别用于删除字符串开头和结尾的空格字符。
const str = ' hello world '; console.log(str.trimStart()); // 'hello world ' console.log(str.trimEnd()); // ' hello world'
4. Object.fromEntries()
Object.fromEntries() 方法允许您将一个由键值对数组组成的数组转换为对象。
const entries = [['foo', 1], ['bar', 2]];
const obj = Object.fromEntries(entries);
console.log(obj); // { foo: 1, bar: 2 }5. Symbol.prototype.description
Symbol.prototype.description 允许您获取符号的描述字符串。
const sym = Symbol('foo');
console.log(sym.description); // 'foo'6. Promise.allSettled()
Promise.allSettled() 方法可以等待所有传递的 promise 完成，并返回结果数组。与 Promise.all() 不同，Promise.allSettled() 会等待所有 promise 解决（不管是解决还是拒绝），返回一个由对象组成的数组，每个对象都有一个 status 字段和一个 value 或 reason 字段。
-- -------------------- ---- ------- ----- -------- - - ----------------------- ---------------------- ----------------------- -- ---------------------------------------- -- --------------------- -- - - - ------- ------------ ------ ----- -- - - ------- ----------- ------- ----- -- - - ------- ------------ ------ ----- -- - - --
7. globalThis
globalThis 始终指向全局对象，在浏览器环境中为 window，在 Node.js 环境中为 global。这个新特性可以使您编写跨平台代码更加简单。
console.log(globalThis.setTimeout === setTimeout); // true
8. catch 绑定
ES10 允许您在 catch 块中直接绑定错误对象，而不使用一个单独的 catch 语句来定义变量。
try {
throw new Error('foo');
} catch ({ message }) {
console.log(message); // 'foo'
}9. 改进的 JSON.stringify()
ES10 引入了一些新的选项和功能，可以更好地处理 BigInt、循环引用和日期对象。
-- -------------------- ---- ------- ----- --- - - ---- ----------- ---- --- ------- -- ------------------------------- ----- -- - --------------- ---- ---- -- - - - ------ ----- - ------ -------------------------- - - --
10. BigInt
ES10 引入了一个新的原始类型 BigInt，用于表示任意精度的整数。可以使用字面值或 BigInt() 构造函数来创建 BigInt。
const num = BigInt(99999999999999999999999999999999999); console.log(num); // 99999999999999999999999999999999999n
11. WebAssembly
WebAssembly 是一种高性能的低级字节码格式，可以在 Web 上运行。ES10 引入了对 WebAssembly 的原生支持，允许您在 JavaScript 中使用 WebAssembly 模块。
(async () => {
const wasmModule = await WebAssembly.instantiateStreaming(fetch('module.wasm'));
const { exports: { add } } = wasmModule.instance;
console.log(add(1, 2)); // 3
})();12. 离线存储
Service Worker 是一种 Web Workers，它可以通过拦截网络请求并缓存响应来为 Web 应用程序提供离线存储和更好的性能。ES10 引入了对 Service Worker 的原生支持。
if (navigator.serviceWorker) {
navigator.serviceWorker.register('/sw.js');
}总结
ES10 引入了许多新功能，包括嵌套数组的拍平、正则表达式功能的改进、字符串的 trim 方法、对象键值对数组的转换、Promise.allSettled()、跨平台代码的 globalThis、错误绑定的 catch、JSON 序列化的改进、BigInt、WebAssembly 和离线存储。这些新特性使得 JavaScript 变得更加强大和灵活，为开发人员提供了更多的选择和可能性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645e2f80968c7c53b00948a6