Skip to content

Latest commit

 

History

History
285 lines (198 loc) · 8.54 KB

ES2018（ES9）.md

File metadata and controls

285 lines (198 loc) · 8.54 KB
Raw

ES2018（ES9）

ES2018 主要新特性：

  • 异步迭代
  • Rest/Spread 运算符

新的正则表达式功能：

  • RegExp 命名捕获组
  • RegExp Unicode 属性转义
  • RegExp 后行断言（lookbehind）
  • RegExp dotAll（s 标志）模式

其他新功能：

  • Promise.prototype.finally()
  • 模板字符串修订

异步迭代

for-await-of 是 for-of 迭代语句的变体，可用于异步可迭代对象。

在 async/await 的某些时刻，你可能尝试在同步循环中调用异步函数。例如：

async function process(array) {
  for (let i of array) {
    await doSomething(i)
  }
}

这段代码不会正常运行，下面这段同样也不会：

async function process(array) {
  array.forEach(async (i) => {
    await doSomething(i)
  })
}

这段代码中，循环本身依旧保持同步，并在内部异步函数之前全部调用完成。

ES2018 引入异步迭代器（asynchronous iterators），这就像常规迭代器，除了 next() 方法返回一个 Promise。因此 await 可以和 for...of 循环一起使用，以串行的方式运行异步操作。例如：

async function process(array) {
  for await (let i of array) {
    doSomething(i)
  }
}

Rest/Spread 运算符

Rest（剩余）运算符收集数组中的值。Spread（扩展）运算符在迭代器中展开值。

ES6 引入了 Rest 参数和 Spread 运算符。三个点（...）仅用于数组。Rest 参数语法允许我们将一个不定数量的参数表示为一个数组。

function restParam(p1, p2, ...p3) {
  // p1 = 1
  // p2 = 2
  // p3 = [3, 4, 5]
}

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

扩展运算符以相反的方式工作，将数组转换成可传递给函数的单独参数。例如 Math.max() 返回给定数字中的最大值：

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

ES2018 为对象解构提供了和数组一样的 Rest 参数和 Spread 运算符，一个简单的例子：

const myObject = {
  a: 1,
  b: 2,
  c: 3
}

const { a, ...x } = myObject
// a = 1
// x = { b: 2, c: 3 }

或者你可以使用它给函数传递参数：

restParam({
  a: 1,
  b: 2,
  c: 3
})

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

跟数组一样，Rest 参数只能在声明的结尾处使用。此外，它只适用于每个对象的顶层，如果对象中嵌套对象则无法适用。

扩展运算符可以在其他对象内使用，例如：

const obj1 = { a: 1, b: 2, c: 3 }
const obj2 = { ...obj1, z: 26 }

obj2 // { a: 1, b: 2, c: 3, z: 26 }

可以使用扩展运算符拷贝一个对象，像是这样 obj2 = { ...obj1 }，但是这只是一个对象的浅拷贝。这意味着，如果一个对象 A 的某个属性（假如为 cloneB）是对象 B，那么在克隆后 cloneB 属性将指向对象 B。这时，如果对象 B 有深层的嵌套对象，任何对 cloneB 的修改将同样影响对象 B。

另外，它们还可以用于字符串。

关于对象的深浅拷贝，可以查阅：浅拷贝和深拷贝。

正则表达式的改进

RegExp 命名捕获组

JavaScript 正则表达式可以返回一个匹配的对象，一个包含匹配字符串的类数组。例如：以 YYYY-MM-DD 的格式解析日期：

const reDate = /(\d{4})-(\d{2})-(\d{2})/
const [match, year, month, day] = reDate.exec('2022-12-02')

match // '2022-12-02'
year // '2022'
month // '12'
day // '02'

这样的代码很难读懂，并且改变正则表达式的结构有可能改变匹配对象的索引。

ES9 允许命名捕获组使用符号 ?<name>，在打开捕获括号 ( 后立即命名，示例如下：

const reDate = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
const [match, year, month, day] = reDate.exec('2022-12-02')

match // '2022-12-02'
year // '2022'
month // '12'
day // '02'

任何匹配失败的命名组都将返回 undefined。

命名捕获也可以使用在 replace() 方法中。例如将日期转换为美国的 MM-DD-YYYY 格式：

const reDate = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
const today = '2022-12-02'
const usDate = today.replace(reDate, '$<month>-$<day>-$<year>')

usDate // '12-02-2022'

RegExp Unicode 属性转义

在 ES9 之前，在正则表达式中访问 Unicode 字符属性是不被允许的。

ES9 添加了 Unicode 属性转义，形式为 \p{...} 和 \P{...}，在正则表达式中使用标记 u（unicode）设置，在 \p 块内，可以以键值对的方式设置需要匹配的属性而非具体内容。例如：

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

此特性可以避免使用特定 Unicode 区间来进行内容类型判断，提升可读性和可维护性。

RegExp 后行断言

在 ES9 之前，JavaScript 在正则表达式中仅支持先行断言（lookahead）。这意味着匹配会发生，但不会有任何捕获，并且断言没有包含在整个匹配字段中。

例如从价格中捕获货币符号：

const reLookahead = /\D(?=\d+)/
const match = reLookahead.exec('$123.89')

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

/\D(?=\d+)/ 表示仅在后面是 \d+ 的情况下匹配 \D。

ES9 引入以相同方式工作但是匹配前面的后行断言（lookbehind），这样我们就可以忽略货币符号，单纯的捕获价格的数字：

const reLookbehind = /(?<=\D)\d+/
const match = reLookbehind.exec('$123.89')

console.log(match[0]) // 123.89

以上是肯定后行断言，表示匹配 \d+，但仅在前面是 \D 的情况下。

同样的，还存在否定后行断言，表示一个值必须不存在。

例如：

const reLookbehindNeg = /(?<!\D)\d+/
const match = reLookbehind.exec('$123.89')

console.log(match[0]) // null

表示匹配 \d+，但仅在前面不是 \D 的情况下。

四种断言语法如下：

  • 先行断言
    • 肯定先行断言 — X(?=Y)
    • 否定先行断言 — X(?!Y)
  • 后行断言
    • 肯定先行断言 — (?<=Y)X
    • 否定先行断言 — (?<!Y)X

推荐：详细内容可以查阅前瞻断言与后瞻断言。

正则表达式 dotAll 模式

dotAll 模式，即点（dot）代表一切字符。所以，正则表达式中点（.）匹配除行终止符外的任何单字符，ES9 引入 s 修饰符可以改变这种行为，允许**行终止符（line terminator character）**的出现。

所谓行终止符，就是该字符表示一行的终结。以下四个字符属于“行终止符”。

  • U+000A 换行符（\n）
  • U+000D 回车符（\r）
  • U+2028 行分隔符（line separator）
  • U+2029 段分隔符（paragraph separator）
;/hello.world/.test('hello\nworld') // false
;/hello.world/s.test('hello\nworld') // true

正则表达式还引入了一个 dotAll 属性，返回一个布尔值，表示该正则表达式是否处在 dotAll 模式。

const reg = /foo.bar/s

reg.test('foo\nbar') // true
reg.dotAll // true
reg.flags // 's'

/s 修饰符和多行修饰符 /m 不冲突，两者一起使用的情况下，. 匹配所有字符，而 ^ 和 $ 匹配每一行的行首和行尾。

Promise.prototype.finally()

finally 被引入来注册一个回调函数，该函数在一个 Promise 被解决（resolve 或 reject）时运行。

一个 Promise 调用链要么成功到达最后一个 then()，要么失败触发 catch()。在某些情况下，你想要在无论 Promise 运行成功还是失败，运行相同的代码，例如清除 loading、关闭数据库连接等。

finally() 允许你指定最终的逻辑：

function doSomething() {
  doSomething1()
    .then(doSomething2)
    .then(doSomething3)
    .catch((err) => {
      console.log(err)
    })
    .finally(() => {
      // finish here!
    })
}

更多资料