这篇文章主要介绍了ES2018中有什么功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
ES2018 规范引入了四个新功能。这些功能包括异步迭代，rest/spread 属性，Promise.prototype.finally() 和正则表达式改进。
异步迭代
异步迭代是讨论的比较少 ES2018 功能之一。虽然还有很多关于 ES2018 其他功能的讨论，但几乎没有关于异步迭代这方面的内容。通过异步迭代，我们可以得到异步的可迭代对象和迭代器。
这意味着你可以把 await 关键字与 for…of 循环放在一起使用。你可以用这些循环对可迭代对象进行迭代。可迭代对象的包括数组、map、set，NodeList，函数的 arguments 参数，TypedArray 等。
在 ES2018 之前，for...of 循环是同步的。如果你试着迭代涉及异步操作的可迭代对象并 await，则无法正常工作。循环本身会保持同步，基本上忽略 await ，并在其内部的异步操作可以完成之前完成迭代。
// 下面的代码在 ES2018 之前不起作用，因为循环保持同步。 // 创建一个异步函数： async function processResponses(someIterable) { // 对可迭代对象进行迭代 for (let item of someIterable) { // 通过异步操作处理项目，例如promise： await processItem(item) } }同时 for...of 循环也可以与异步代码一起使用。也就是说可以在遍历可迭代对象时执行一些异步操作。for...of 循环将会是异步的，让你能够等待异步操作完成。
需要记住的是在哪里使用 await 关键字。不需要把它放进循环体中，应该将其放在for...of关键字中 for 的后面。现在当你用 next() 方法获取异步迭代器的下个值时，将会得到一个 Promise。如果你想了解更多信息，可以在 GitHub 上去看看(https://github.com/tc39/proposal-async-iteration)。
// 创建一个异步函数: async function processResponses(someIterable) { //遍历可迭代对象并等待异步操作的结果 for await (let item of someIterable) { processItem(item) } }Rest/Spread 属性
rest 和 spread 并不是真正的新功能。两者都是在 ES6 中作为新的运算符引入的，它们很快就开始流行起来。可以说 JavaScript 程序员喜欢它们。唯一的问题是它们只能用在数组和参数上，不过 ES2018 把这两个功能引入了对象中。
rest 和 spread 运算符的语法都非常简单，由三个点(...)组成。这些点后面是要在其上使用 rest 或 spread 运算符的对象。接下来简单的讨论一下两者的工作原理。
对象的 rest 运算符
rest 运算符使你可以将对象的所有剩余对象属性属性提取到新对象上。要注意这些属性必须是可枚举的。如果你已经对某些属性使用了分解，那么 rest 运算符会只提取剩余的属性。
// Rest example: const daysObj = { one: 'Monday', two: 'Tuesday', three: 'Wednesday', four: 'Thursday', five: 'Friday' } //使用解构将变量的前两个属性分配给变量。 //然后，使用rest将其余属性分配给第三个变量。 const { one, two, ...restOfDays } = daysObj // rest 仅提取 "three", "four" 和 "five" // 因为我们已经提取了 "one" 和 "two" console.log(one) // Output: // 'Monday' console.log(two) // Output: // 'Tuesday' console.log(restOfDays) // Output: // { three: 'Wednesday', four: 'Thursday', five: 'Friday' }如果要对对象使用 rest 运算符，需要记住两点：首先，只能用一次，除非把它用在嵌套对象上。其次，必须在最后使用。这就是为什么在上面的例子中，在解构前两个属性之后而不是之前看到它的原因。
// 这行代码不起作用，因为把 rest 运算符用在了最前面： const { ...all, one, two } = { one: 1, two: 2, three: 3 } //这行能起作用： const { one, two, ...all } = { one: 1, two: 2, three: 3 } // 这行不起作用，因为同一级别上有多个 rest 运算符： const { one, ...some, ...end } = { } // 这行能起作用，在多个级别上的多个 rest 运算符： const { one, {...secondLevel }, ...firstLevel } = { }对象的 spread 运算符
spread 运算符的作用是可以通过插入另一个对象的所有属性来创建新对象。Spread 运算符还允许你从多个对象插入属性。也可以把这个运算符与添加新属性结合使用。
// Spread example: const myOriginalObj = { name: 'Joe Doe', age: 33 } // 用 spread 运算符创建新对象： const myNewObj = { ...myOriginalObj } console.log(myNewObj) // Output: // { name: 'Joe Doe', age: 33 } // 添加属性的例子： const myOriginalObj = { name: 'Caesar' } // 用 spread 运算符创建新对象 // 并添加新的属性“genre”： const myNewObj = { ...myOriginalObj, genre: 'Strategy' } console.log(myNewObj) // Output: // { // name: 'Caesar', // genre: 'Strategy' // } // Spread 运算符并合并两个对象： const myObjOne = { title: 'Eloquent JavaScript' } const myObjTwo = { author: 'Marijn Haverbeke' } const myNewObj = { ...myObjOne, ...myObjTwo } console.log(myNewObj) // Output: // { // title: 'Eloquent JavaScript', // author: 'Marijn Haverbeke' // }当从多个对象插入属性并添加新属性时，顺序很重要。
我来解释一下，假设你要用 spread 运算符基于两个现有对象创建一个新对象。第一个已有对象中包含具有某些值的属性 title。第二个对象也包含属性 title，但是值不一样。最终到底取哪个 title?
答案是最后一个。如果对第一个对象使用 spread 运算符，然后再对第二个对象使用，则第二个 title 会生效。如果你将 spread 运算符永在第二个对象上，则第一个 title会生效。
// Spread 运算符并合并两个对象： const myObjOne = { title: 'Eloquent JavaScript', author: 'Marijn Haverbeke', } const myObjTwo = { title: 'You Don\'t Know JS Yet', language: 'English' } // 用 spread 运算符通过组合 “myObjOne” 和 “myObjTwo” 创建新对象 // 注意：“myObjTwo” 中的 “title” 会将覆盖 “myObjTwo” 的 “title” // 因为“ myObjTwo”排在最后。 const myNewObj = { ...myObjOne, ...myObjTwo } console.log(myNewObj) // Output: // { // title: "You Don't Know JS Yet", // author: 'Marijn Haverbeke', // language: 'English' // } // 注意：“myObjOne” 中的 “title” 将覆盖 “myObjTwo” 的 “title” const myNewObj = { ...myObjTwo, ...myObjOne } console.log(myNewObj) // Output: // { // title: 'Eloquent JavaScript', // language: 'English', // author: 'Marijn Haverbeke' // }Promise.prototype.finally()
一开始有两个用于 Promise 的回调函数。其中一个是 then()，在实现诺 Promise 执行。第二个是catch()，在 promise 被拒绝或 then() 抛出异常时执行。ES2018 增加了用于 Promise 的第三个回调函数 finally()。
每次完成 promise 时，都会执行 finally() 回调，不管 promise 是否完成。这个回调的一般用于执行应始终发生的操作。例如关闭模态对话框、关闭数据库连接或进行某些清理。
// finally() example: fetch() .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.log(error)) //最后做点什么： .finally(() => console.log('Operation done.'))对正则表达式的改进
ES2018 还对正则表达式功能进行了的一些改进。这些改进包括 s(dotAll) 标志，后行断言，命名捕获组和 unicode 属性转义。
s(dotAll)
首先是 s(dotAll) 。与点(.)不同，s(dotAll) 允许对换行符及表情符号进行匹配。
// s(dotAll) example: /hello.world/.test('hello\nworld') // Output: // false /hello.world/s.test('hello\nworld') // Output: // true后行断言
在ES2018之前，JavaScript仅支持先行断言。先行断言用于基于其后的文本来匹配模式。在 ES2018 中增加了对后行断言的支持。通过它可以基于模式之前的文本模式来进行匹配。后行断言的语法为 ?<=。
// 后行断言例子: /(?<=green) apple/.test('One red apple is on the table.') // Output: // false /(?<=green) apple/.test('One green apple is on the table.') // Output: // true断言后面也有一个反向的回溯。仅当子字符串之前没有断言时，此断言才与模式匹配。对后行断言取反操作的语法是 ?<!。
/(?<!green) apple/.test('One red apple is on the table.') // Output: // true /(?<!green) apple/.test('One green apple is on the table.') // Output: // false命名捕获组
另一个被 ES2018 引入到正则表达式的好功能是命名捕获组。命名捕获组的语法为 ?<some_name>。
const date_pattern = /(?<day>\d{2})\/(?<month>\d{2})\/(?<year>\d{4})/ const result = date_pattern.exec('11/12/2021') console.log(result) // Output: // [ // '11/12/2021', // '11', // '12', // '2021', // index: 0, // input: '11/12/2021', // groups: [Object: null prototype] { day: '11', month: '12', year: '2021' } // ] console.log(result.groups.day) // Output: // '11' console.log(result.groups.month) // Output: // '12' console.log(result.groups.year) // Output: // '2021'Unicode 属性转义
每个 unicode 字符都有许多属性。例如：空白字符，大小写，字母，ASCII，表情符号等。现在你可以在正则表达式中访问这些属性了。
要使用这个功能需要做两件事。首先必须使用 /u 标志。这个标志告诉 JavaScript 你的字符串是一系列 Unicode 代码点。第二是使用 \p{}。你要检查的属性位于大括号之间，反之则用 \P{}。
// 用俄语创建一个字符串（西里尔字母）： const myStrCyr = 'Доброе утро' //创建英文字符串（拉丁字母）： const myStrLat = 'Good morning' //测试“ myStrCyr”是否包含西里尔字符： /\p{Script=Cyrillic}/u.test(myStrCyr) // true //测试“ myStrLat”是否包含西里尔字符： /\p{Script=Cyrillic}/u.test(myStrLat) // false // 测试“myStrLat” 是否包含西里尔字符： /\p{Script=Latin}/u.test(myStrCyr) // false // 测试“myStrLat” 是否包含拉丁语字符： /\p{Script=Latin}/u.test(myStrLat) // true感谢你能够认真阅读完这篇文章，希望小编分享的“ES2018中有什么功能”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
