ES2018 (ES9) 新特性整理

阅读时长 5 分钟读完

前言

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 转义、命名捕获组、正向先行断言和反向先行断言。接下来我们来看一个例子。

现在我们要做一个功能,就是要校验手机号码:

在上面的代码中,我们使用正则表达式来校验手机号码。然而,这段代码仅适用于中国境内的手机号码,如果需要扩展到全球,就像下面这样扩展。

其中,u 修饰符表示开启 Unicode 模式,使 . 匹配所有字符,甚至是代理码点(只有使用 u 修饰符才能匹配);使用 ?: 来代替普通捕获组,即不占用匹配结果,因为 +86 不是必须的,也就是说,手机号码是 11 位的一串数字和 +86 可能出现在它的前面。

另外,在 ES2018 中,还支持了一些 JavaScript 引擎规范中不存在的正则扩展:

  1. (?<=pattern):匹配后面跟着 pattern 的文本。
  2. (?<!pattern):匹配后面不跟着 pattern 的文本。
  3. (?(condition)yes|no):模式匹配,当不存在一个组 ID,则采用对应的 yes 分支,存在对应 no 分支。

Rest/Spread 属性

在 ES2015 中,我们就已经引入了 Rest/Spread 运算符,用于类似解构数组、对象等需要拆分的操作。在 ES2018 中,我们增加了对于对象中的 Rest/Spread 属性做了改进。

以往,我们见过的都是数组的例子:

但如何应用到对象上呢?

在上面的例子中,我们使用了对象的 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

纠错
反馈