【建议点赞收藏】ES系列总结（三）Async Iteration 异步迭代器 1.1 简介在 async/await

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

1. Async Iteration

异步迭代器

1.1 简介

在 async/await 的某些使用场景，我们可能希望在同步循环中执行异步代码：

async function fn(arr) {
  for (let s of arr) {
    await doSomeThing(i)
  }
}

ES2018后，引入异步迭代器，让 async/await 可以结合 for-of 使用, 以串行的方式继发地运行异步代码

async function fn(arr) {
  for await (let s of arr) {
    await doSomeThing(s)
  }
}

但在实际开发中，我们可能希望 async/await 遍历一个 Promise 数组时，能够并发执行，提高效率, 并发改造如下：

function fn(arr) {
  arr.map(async(s) => {
    await doSomeThing(s)
  })
}

2. Object Rest Spread

对象的结构赋值和扩展运算符

2.1 简介

ES6引入了Rest参数和扩展运算符(…), 但ES6的作用对象仅限于数组，ES2018后为对象结构提供了和数组一样的Rest参数和展开运算符

const obj = {
  a:1, b:2, c:3
}
const {a, ...x} = obj
// a = 1
// x = { b: 2, c: 3 }
// 解构赋值要求右边是一个对象，若等号右边是 undefined 或 null, 则运行时会报错

const {...x1} = null // Cannot destructure 'null' as it is null.
const {...x2} = undefined // Cannot destructure 'undefined' as it is null.
// 解构赋值的参数必须是最后一个参数，否则运行报错

let {...x3, name} = { name: 'alice', age: 19 } // SyntaxError: Rest element must be last element
// 解构赋值的拷贝是浅拷贝，若一个键的值是复合类型的值如数组、对象和函数，则这里只会拷贝其引用，即解构前后的值占了相同的一片堆区内存

let obj = { a: { b:1 } }
let { ...copy } = obj
copy.a === obj.a // true
// 与数组一致，对象的扩展运算符可以跟表达式

const obj = {
  ...( 2 > 1 ? { a : 1 } : { a : 2 }), 
  b: 2
}
// obj = { a: 1, b: 2 }
// 扩展运算符的计算，默认会执行参数对象内部的 get 取值函数

let obj = {
  get fn() {
    console.log('fn')
  }
}
let test = {...obj}

3. Promise Finally

3.1 简介

finally 方法返回一个 promise，在 promise 结束的时候，无论是 fulfilled 或是 reject，都会执行指定的回调函数。

promise
.then(res => {})
.catch(err => {})
.finally(() => {})
//例如，服务器端使用Promise处理，则可以在 finally 回调中关闭服务器
server
 .listen(port)
 .then(() => {})
 .finally(() => {
   server.stop
 })
//前端也可以在 finally 中处理loading
let isLoading = true
fetch(param)
  .then((res) => { ... })
  .catch((err) => { ... })
  .finally((err) => {
    isLoading = false
  })