ES2018 里包括哪些新特性？

zhangbao90s
2,261 阅读8分钟

我们一路奋战，不是为了改变世界，而是为了不让世界改变我们。

——《熔炉》

JavaScript 标准 ECMAScript 的推进是非常活跃的了，自 ES2015 开始，标准制定委员会 TC39 决定每年为一个周期，推出新版本标准，这无疑为 JavaScript 语言本身注入了强大的活力。

一个新特性在写入标准前，一般需要经过 5 个阶段：

  • Stage 0 - Strawman（展示阶段）：最初提交的想法。
  • Stage 1 - Proposal（征求意见阶段）：一个正式提案文档，且至少有一位 TC39 的成员支持，其中包括 API 示例。
  • Stage 2 - Draft（草案阶段）：特性规范的初始版本，具有两个实验性实现。
  • Stage 3 - Candidate（候选人阶段）：对提案规范进行评审，并从第三方厂商收集反馈。
  • Stage 4 - Finished（定案阶段）：提案已经准备好包含在 ECMAScript 中，但是在浏览器和 Node.js 中可能需要一些时间实现。

一个提案只要能进入 Stage 2，就差不多肯定会包括在以后的正式标准里面。ECMAScript 当前的所有提案，可以在 TC39 的官方网站 GitHub.com/tc39/ecma26… 查看。

在正式讲解 ES2018 前，先回顾一下 ES2016 和 ES2017 中引入的新特性。

ES2016

  1. 数组的 includes 方法
  2. 指数运算符 **，比如 a ** b 和 Math.pow(a, b) 的效果一样

ES2017

  1. 异步函数
  2. Object.values，返回由对象属性值组成的数组
  3. Object.entries，返回由一个个由 [key, vlaue] 组成的数组
  4. Object.getOwnPropertyDescriptors，返回一个对象，包含目标对象身上所有的属性描述符（.value、.writable、.get、.set、.configurable、.enumerable）
  5. 字符串的 padStart 和 padEnd 方法
  6. 定义对象、声明数组以及在函数的参数列表中，可使用尾逗号。
  7. 用来读取和写入到共享内存的 SharedArrayBuffer 和 Atomics。

好了，现在来看下 ES2018 增加的新特性吧 😍。

ES2018

异步迭代

如果一个异步函数中包含一个循环，循环里的每一次迭代是发起一个异步请求。那么怎么保证在本次迭代的请求结束后，再进入下一次迭代呢？🤔

你可能想过像下面这样做：

function process(array) {
    array.forEach(async i => {
        console.log(`#${i} request start`)
        const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${i}`)
        const json = await res.json()
        console.log(`#${i} request end`, json)
    })
}

执行后，发现结果并不对：

原因是，数组的 forEach 方法每遍历一次，都是以回调的方式处理当前成员的，每个迭代之间没有关联，都是各自执行的。因此，请求是按照遍历顺序发出的，然而各个请求有不同的响应时间，打印顺序跟请求顺序可能是不一样的。

这与我们的预期效果——保证在本次迭代的请求结束后，再进入下一次迭代并不符合。

那么换个方式：

async function process(array) {
    for (let i of array) {
    	console.log(`#${i} request start`)
        const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${i}`)
        const json = await res.json()
        console.log(`#${i} request end`, json)
    }
}

Wow, 这样是可以的~

原因是，在异步函数中我们可以使用 await 关键字，像书写同步代码一样，书写异步代码。也就是说，等待当前异步代码返回后，再进行后续的逻辑操作。

ES2018 对迭代异步函数进行了增强，引入了异步迭代器。与普通迭代器不同的是，异步迭代器的 next 方法返回的是一个 Promise。语法是 for..await..of，我们将上面的例子换个写法：

async function process(array) {
    const reqs = array.map(async id => {
        console.log(`#${id} request start`)
        const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
        return res.json()
    })
    for await (let json of reqs) {
        console.log(json)
    }
}

这种写法总是能保证输出结果和遍历顺序是一致的。

在此特别感谢 @sea_ljf 同学的指正！

Promise.finally()

.finally() 方法总是会被执行，无论 Promise 最终状态是 resolve 了，还是 reject 了。类似于 try...catch...finally 里的 finally 块的作用。

async function process(array) {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
        .then(response => response.json())
        .then(json => console.log(json))
        .catch(error => {
            console.log(error)
        })
        .finally(() => {
            // 这里的代码总是会被执行
            // 无论 Promise 最终状态是 resolve 了，还是 reject 了
        })
}

剩余/扩展属性

ES2015 引入了三个点（...）运算符，这个运算符既能用来收集函数的剩余参数，也可以用来扩展数组。

首先来看作为剩余参数运算符的例子：

doSomething(1, 2, 3, 4, 5)

function doSomething(p1, p2, ...p3) {
    // p1 的值为 1
    // p2 的值为 2
    // p3 是一个数组，值为 [3, 4, 5]
}

再来看用做扩展运算符的例子：

const values = [99, 100, -1, 48, 16];
console.log( Math.max(...values) ); // 100

我们可以看到，扩展运算符与剩余参数运算符的用法是互为反向的。

ES2015 引入的 ... 运算符，实际上仅适应在对数组的操作上，ES2018 对其进行了增强，将扩展和收集参数的能力扩大到了对象。使得 ... 运算符也可以用来收集对象的“剩余属性”。

一个基础的例子：

const obj = { a: 1, b: 2, c: 3 }
const { a, ...x } = obj
// a 等于 1
// x 的值为 { b: 2, c: 3 }

这里的 a 对应的是 obj 的属性 a；x 则是由 obj 中除 a 属性以外的其他属性组成的对象。

我们借用这个例子里的 obj，再来看一个例子：

doSomething(obj)

function doSomething({ a, ...x }) {
    // a = 1
    // x = { b: 2, c: 3 }
}

doSomething 函数接收一个对象参数，调用后，将这个对象拆分成变量 a 和 x。

我们也可以使用 ... 运算符的扩展功能，将一个对象“扩展”进另一个对象。

const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { ...obj1, z: 26 };
// obj2 值变成了 { a: 1, b: 2, c: 3, z: 26 }

使用这个特性，我们还可以实现对象的浅克隆：obj2 = { ...obj1 }。

正则表达式的命名捕获组

在 ES2018 之前，我们如果要匹配类似 '2018-04-30' 这样的字符串格式，可能会这样做。

const
    reDate = /([0-9]{4})-([0-9]{2})-([0-9]{2})/,
    match  = reDate.exec('2018-04-30'),
    year   = match[1], // 2018
    month  = match[2], // 04
    day    = match[3]; // 30

我们从最终的匹配结果 match 身上，使用索引值，找到对应捕获组匹配的内容。但带来的一个问题是，之后如果匹配格式发生改变，那么 match 对应索引值下内容的含义就不一样了。这样我们势必会修改代码，来提供正确的逻辑。

而 ES2018 允许我们为捕获组命名，命名方式是在 ( 前面使用符号 ?<name> 标识。

const
  reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
  match  = reDate.exec('2018-04-30'),
  year   = match.groups.year,  // 2018
  month  = match.groups.month, // 04
  day    = match.groups.day;   // 30

所有的命名组的匹配结果，可以在结果对象的 groups 属性中获得。没有命中的捕获组，取值时得到 undefined。

除此之外，命名捕获组还可以在字符串的 replace 方法中使用：

const
  reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
  d      = '2018-04-30',
  usDate = d.replace(reDate, '$<month>-$<day>-$<year>');

这里我们将 '2019-05-18' 格式化为 '05-18-2019'。在替换字符串中，使用 $<name> 的形式加入该命名捕获组匹配到的内容。

正则表达式的后行断言

JavaScript 正则表达式天然支持前行断言。

所谓前言断行，是指 x 只有在 y 前面时才匹配，书写形式如 /x(?=y)/。比如，下面的例子里，我们只匹配数字之前的美元符号：

const
  reLookahead = /\$(?=\d+)/,
  match       = reLookahead.exec('$123');

console.log( match[0] ); // $

对应地，所谓后行断断言，是指 x 只有在 y 后面时才匹配，书写形式如 /(?<=y)x/。同样上面的例子，我们只匹配美元符号之后的数字：

const
  reLookahead = /(?<=\$)\d+/,
  match       = reLookahead.exec('$123');

console.log( match[0] ); // 123

正则表达式的 s 修饰符：dotAll 模式

正则表达式的 . 匹配任意字符，但有两个例外：

  1. 不能识别码点大于 0xFFFF 的 Unicode 字符，这些字符每个占用 4 个字节。
  2. 终止符：包括换行符（\n）、回车符（\r）在内的字符。

针对第一条限制，我们可以使用 u 修饰符解决；针对第二条限制，我们则可以使用 s 修饰符。

// . 不匹配 \n，所以正则表达式返回 false
/hello.world/.test('hello\nworld') // false

// 这样就可以了
/hello.world/s.test('hello\nworld') // true

正则表达式的 Unicode 属性类

ES2018 引入了一种新的类的写法 \p{...} 和 \P{...}，允许正则表达式匹配符合 Unicode 某种属性的所有字符。

const regexGreekSymbol = /\p{Script=Greek}/u;
regexGreekSymbol.test('π') // true

上面代码中，\p{Script=Greek} 指定匹配一个希腊文字母，所以匹配 π 成功。

\P{…} 是 \p{…} 的反向匹配，即匹配不满足条件的字符。

注意，这两种类只对 Unicode 有效，所以使用的时候一定要加上 u 修饰符。如果不加 u 修饰符，就会报错。

模板字符串微调

在 JavaScipt 中，字符串中的 \ 表示一个转义字符，它提供了 5 种表达字符的方式：

'\z' === 'z'  // true（z 无特殊含义，直接输出）
'\172' === 'z' // true（字符的八进制表示）
'\x7A' === 'z' // true（字符的十六进制表示）
'\u007A' === 'z' // true（字符的十六进制表示）
'\u{7A}' === 'z' // true（字符的十六进制表示，支持任意 Unicode 字符码点）

这就带来了一个问题，如果字符串中包含 \unicode 或 \xerxes 的话，就会报错，因为会被认为是无效的字符转义。

为了解决这个问题，ES2018 放松了对标签模板里面的字符串转义的限制。如果遇到不合法的字符转义，就返回 undefined，而不是报错，并且可以从 raw 属性上面可以得到原始字符串。

function tag(strs) {
  // strs[0] 等于 undefined
  // strs.raw[0] 等于 "\\unicode and \\u{55}";
}
tag`\unicode and \u{55}`

参考链接

  1. What’s New in ES2018, by Craig Buckler
  2. ECMAScript 6 入门, by 阮一峰

贡献指北

感谢你花费宝贵的时间阅读这篇文章。

欢乐的时光总是短暂的，文章到此结束了 🎉。如果你觉得我的这篇让你的生活美好了一点点，欢迎鼓（diǎn）励（zàn）😀。如果能在文章下面留下你宝贵的评论或意见是再合适不过的了，因为研究证明，参与讨论比单纯阅读更能让人对知识印象深刻😉。

（完）

avatar
文章
阅读
粉丝