前言
2018 年 6 月,ECMA 官方发布了 ECMAScript 2018(ES9)的正式草案,该版本是 ECMAScript 2017(ES8)的后继版本。本文将介绍 ES2018 新特性,包括异步迭代器、正则表达式的扩展、Rest/Spread 属性和 Promise finally 等。
异步迭代器
在以前的版本中,我们强调过 "迭代方式",在 ES2015 版本中,添加了 for...of 循环结构,支持按照一定的规则遍历 Array、Set 等集合类型,现在在 ES2018 版本中,我们又新增了异步迭代器,用于异步迭代各种异步结构。
首先,异步的意思就是说,不是每个数据都可以立即获取,需要耗费一定的时间,比如网络请求等。而异步迭代器则可以将这些异步操作进行计划化和组织化,一步步获取,并且让它们在一个序列中被消费,减少了回调嵌套的问题。我们来看看一个具体的例子。
-- -------------------- ---- ------- ----- -------- ------------- - ----- ---- - - --------------------------------------------- --------------------------------------------- --------------------------------------------- -- --- ----- ---- --- -- ----- - ----- -------- - ----- ----------- ----- ------ - ----- ---------------- --------------------------- - -
在上面的例子中,我们可以看到 for await...of 语法,以及 await 的用法,当我们 await fetch(url) 的时候,它会等待 fetch 函数成功返回 Promise 才会继续执行接下来的逻辑,这样代码的可读性增加了很多。
正则表达式的扩展
ES2018 中也新增了一些正则的操作,为了更方便地创建和扩展正则表达式,包括 dotAll、Unicode 转义、命名捕获组、正向先行断言和反向先行断言。接下来我们来看一个例子。
现在我们要做一个功能,就是要校验手机号码:
const mobile = '13209093456'; const regExp = /1([38]\d|5[0-35-9]|7[3678])\d{8}/; console.log(regExp.test(mobile));
在上面的代码中,我们使用正则表达式来校验手机号码。然而,这段代码仅适用于中国境内的手机号码,如果需要扩展到全球,就像下面这样扩展。
const mobile = '+8613209093456'; const regExp = /(?:\+86)?1([38]\d|5[0-35-9]|7[3678])\d{8}/u; console.log(regExp.test(mobile));
其中,u 修饰符表示开启 Unicode 模式,使 . 匹配所有字符,甚至是代理码点(只有使用 u 修饰符才能匹配);使用 ?: 来代替普通捕获组,即不占用匹配结果,因为 +86 不是必须的,也就是说,手机号码是 11 位的一串数字和 +86 可能出现在它的前面。
另外,在 ES2018 中,还支持了一些 JavaScript 引擎规范中不存在的正则扩展:
- (?<=pattern):匹配后面跟着 pattern 的文本。
- (?<!pattern):匹配后面不跟着 pattern 的文本。
- (?(condition)yes|no):模式匹配,当不存在一个组 ID,则采用对应的 yes 分支,存在对应 no 分支。
Rest/Spread 属性
在 ES2015 中,我们就已经引入了 Rest/Spread 运算符,用于类似解构数组、对象等需要拆分的操作。在 ES2018 中,我们增加了对于对象中的 Rest/Spread 属性做了改进。
以往,我们见过的都是数组的例子:
console.log([...[1, 2, 3], ...[4, 5, 6]]); // [1, 2, 3, 4, 5, 6]
但如何应用到对象上呢?
const obj1 = { a: 1, b: 2, c: 3 }; const obj2 = { ...obj1, d: 4 }; console.log(obj2); // { a: 1, b: 2, c: 3, d: 4 }
在上面的例子中,我们使用了对象的 Rest/Spread 属性,通过 { ...obj1 } 可以将对象展开到最外层的对象里面,实现对象的复制,而 { ...obj1, d: 4 } 又可以在最外层的对象里面新增一个 d 属性。
Promise finally
在 ES2016 中,我们就已经引入了 Promise、Async/Await 异步编程模型,可以避免 Callback Hell,简化了异步操作的流程。而在 ES2018 中,我们又增加了 Promise 最后执行的回调函数 finally。
示例如下:
-- -------------------- ---- ------- --------------------------------------------------- -------------- -- - -- -------------- - ----- --- -------------- -------- --- --- ----- - ------ ---------------- -- ------------ -- --------------------- -- ------- ----------- -- --------------------------
在代码中,如果请求错误,我们通过 then() 方法中的 catch() 回调函数来抛出错误,而无论请求成功或失败,最后都会执行 finally() 回调函数中的逻辑,清除页面或者取消请求等等。
结论
以上就是 ES2018 新特性的几个方面的介绍,包括了异步迭代器、正则表达式的扩展、Rest/Spread 属性和 Promise finally 等。这些特性都带来了很多方便的操作,让开发者可以更加轻松地使用现代的 JavaScript。未来,在 JavaScript 的进化过程中,我们相信还会涌现出越来越多的新特性,让前端开发更简便、高效。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6738190e317fbffedf0e3533