JS new 特性摘要（ES2018 - ES2020）
前言
随着前端技术的持续发展，JavaScript 也在不断地推陈出新，ES2018 - ES2020 带来了许多令人兴奋的新特性。今天我们将深入探讨这些新功能，并了解它们如何改进前端开发体验。
目录
ES2018
- 异步迭代器(Async Iterators)
- 正则表达式命名捕获组（RegExp Named Capture Groups）
- Rest/Spread 属性（Rest/Spread Properties）
ES2019
- Array.prototype.{ flat, flatMap }
- Object.fromEntries()
- String.prototype.trimStart()/trimEnd()
- Symbol.prototype.description
ES2020
- optional chaining (?.)
- nullish coalescing (??)
- BigInt
- Promise.allSettled()
- String.prototype.matchAll()
- globalThis
- import()
- Dynamic Import
ES2018
异步迭代器(Async Iterators)
异步迭代器为异步序列提供了内置的、可迭代接口，从而使开发者能够更加方便地操作异步数据流。
以下是一个具体的例子，向页面中添加几个图片，并且对每一个图片的加载状态进行追踪：
async function loadImages(urls) {
for await (const img of asyncIterableObject(urls)) {
console.log(Image ${img.url} loaded!);
}
}
async function asyncIterableObject(urls) { for (const url of urls) { const img = new Image(); img.src = url;
await new Promise((resolve) => {
img.addEventListener("load", resolve);
});
yield { url, img };} }
正则表达式命名捕获组（RegExp Named Capture Groups）
命名捕获组允许在正则表达式中指定要捕获的部分，并将其分配给一个声明的变量。这比使用索引更直观，让代码更容易维护。
以下是一个具体的例子，将电话号码格式化为统一的形式：
const numberOfPhone = "(123) 456-7890"; const regExpToRenderPhone = /^((\d{3}))\s(\d{3})-(\d{4})$/; const { groups } = numberOfPhone.match(regExpToRenderPhone);
console.log(${groups["1"]}.${groups["2"]}.${groups["3"]});
Rest/Spread 属性（Rest/Spread Properties）
Rest/Spread 属性通过三个点(...)语法允许在 JavaScript 对象和数组上轻松地进行操作。Rest 操作允许将剩余的键值对包含在一个新对象中，而 Spread 操作则允许将对象打散为一系列补充操作参数以及组成新的数组/对象。
以下是一个具体的例子，对于数组中包含的一组数字，将其加倍：
function doubleNumbers(...numbers) { return numbers.map((num) => num * 2); } console.log(doubleNumbers(1, 2, 3, 4));
ES2019
Array.prototype.{ flat, flatMap }
Array.prototype.flat 和 Array.prototype.flatMap 提供了在多维数组上进行平坦化操作的快捷方式。
以下是一个具体的例子：
const nestedArr = [1, [2, 3], [4, [5, 6]]]; console.log(nestedArr.flat()); // [1, 2, 3, 4, [5, 6]] console.log(nestedArr.flat(2)); // [1, 2, 3, 4, 5, 6]
Object.fromEntries()
Object.fromEntries() 使用一个包含键值对的数组来创建一个新的对象。这在将处理后的数据对象还原到原始的键值对对象时非常有用。
以下是一个具体的例子：
const data = [ ["apple", 1], ["banana", 2], ["orange", 3], ]; const obj = Object.fromEntries(data); console.log(obj); // { apple: 1, banana: 2, orange: 3 }
String.prototype.trimStart()/trimEnd()
trimStart() 和 trimEnd() 允许您轻松地删除字符串开头或结尾的空白。
以下是一个具体的例子：
const hello = " hello "; console.log(hello.trimStart()); // "hello " console.log(hello.trimEnd()); // " hello"
Symbol.prototype.description
Symbol.prototype.description 允许您检索创建 Symbol 时传递的字符串描述。
以下是一个具体的例子：
const sym = Symbol("foo"); console.log(sym.description); // "foo"
ES2020
optional chaining (?.)
可选链允许您访问对象树中可能不存在的值而不会引发错误。
以下是一个具体的例子：
const obj = { a: { b: { c: 1 } } }; console.log(obj?.a?.b?.c); // 1 console.log(obj?.a?.x?.y); // undefined
nullish coalescing (??)
Nullish 合并允许在访问可能为 null 或 undefined 的变量时提供一些默认值。
以下是一个具体的例子：
const foo = null ?? "default value"; console.log(foo); // "default value"
const bar = 123 ?? "default value"; console.log(bar); // 123
BigInt
BigInt 允许 JavaScript 代码处理大于 2^53 的整数，因为在默认情况下 JavaScript 中的数字始终是 64 位双精度浮点数。
以下是一个具体的例子：
const bigInt = 9007199254740991n + 1n; console.log(bigInt); // 9007199254740992n
Promise.allSettled()
Promise.allSettled() 允许您在计算完 Promise 数组的所有值之后，同时处理成功或失败的 Promise。
以下是一个具体的例子：
const p1 = Promise.resolve(1); const p2 = Promise.reject(2); const p3 = Promise.resolve(3);
Promise.allSettled([p1, p2, p3]).then((results) => console.log(results) );
// [{status: "fulfilled", value: 1}, {status: "rejected", reason: 2}, {status: "fulfilled", value: 3}]
String.prototype.matchAll()
matchAll() 允许你在字符串中搜索正则表达式的所有匹配项，并返回一个迭代器，以便逐一检查每一项。
以下是一个具体的例子：
const str = "text $= foo = bar"; const regExp = /(?<operator>\W{1,2})\s(?<operand>\w+)/g;
for (const match of str.matchAll(regExp)) { console.log(match.groups); }
globalThis
globalThis 允许您访问全局对象无论您是在什么环境中：Web、Node.js，甚至是工作线程中。
以下是一个具体的例子：
console.log(globalThis);
import()
import() 允许您动态地导入模块。这可以让您按需加载代码，从而提高性能。
以下是一个具体的例子：
const myModule = import("./myModule.js"); myModule.then((module) => console.log(module));
Dynamic Import
动态导入是 import() 的简化语法。
以下是一个具体的例子：
const myModule = await import("./myModule.js"); console.log(myModule);
结论
随着 ES2018 - ES2020 的推出，JavaScript 开发人员有了更快、更易用和更强大的工具。这些新的特性有助于提高代码的可读性和可维护性、减少错误和增加性能。了解这些特性可以帮助您更好地处理 JavaScript 代码，从而创建出更好的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ef6c5e6fbf9601972f3699