掌握JavaScript中的迭代器和生成器，順便了解一下async、await的原理

掌握JavaScript中的迭代器和生成器，順便了解一下async、await的原理

前言

相信很多人對迭代器和生成器都不陌生，當提到async和await的原理時，大部分人可能都知道async、await是Promise+生成器的語法糖，其原理具體是怎么做的呢？下面通過這篇文章帶你詳細了解一下迭代器和生成器，以及帶你從生成器一步步推導到async和await。

1.迭代器（Iterator）

1.1.什么是迭代器？

迭代器是確使用戶在容器對象（鏈表或數組）上遍訪的對象，使用該接口無需關心對象的內部實現細節。

• 迭代器的定義可能比較抽象，簡單來說迭代器就是一個對象，可用於幫助我們對某個數據結構（鏈表、數組）進行遍歷；

• 在JavaScript中，迭代器也是一個具體的對象，並且這個對象必須符合迭代器協議（iterator protocol）；

• 什么是迭代器協議？

  • 在JavaScript中就是指這個對象必須實現一個特定的next方法，並且next方法有如下要求；
  • next方法可接收0個或者1個參數（在生成器中next可以接收1個參數），並且需返回一個對象，對象包含以下兩個屬性：
    • done：值為Boolean，如果迭代器可以迭代產生下一個值，就為false，如果已經迭代完畢，就為true；
    • value：迭代器返回的值，如果done為true，value一般為undefined；

• 編寫一個最簡單的迭代器：

  const iterator = {
    next: function() {
      return { done: false, value: 123 }
    }
  }
  

1.2.迭代器的基本使用

明白了迭代器的基本定義，下面就來實現一下符合迭代器協議的對象吧，並且看看其它的一些基本用法。比如，需要通過迭代器訪問一個數組：

（1）創建一個迭代器對象

const names = ['curry', 'kobe', 'klay']

let index = 0 // 通過一個index來記錄當前訪問的位置
const iterator = {
  next() {
    if (index < names.length) {
      return { done: false, value: names[index++] }
    } else {
      return { done: true, value: undefined }
    }
  }
}

console.log(iterator.next()) // { done: false, value: 'curry' }
console.log(iterator.next()) // { done: false, value: 'kobe' }
console.log(iterator.next()) // { done: false, value: 'klay' }
console.log(iterator.next()) // { done: true, value: undefined }

（2）實現生成迭代器的函數

• 如果每次需要去訪問一個數組就去編寫一個對應的迭代器對象肯定是很麻煩的；
• 可以封裝一個函數，用於生成一個訪問數組的迭代器；

function createIterator(arr) {
  let index = 0
  return {
    next() {
      if (index < arr.length) {
        return { done: false, value: arr[index++] }
      } else {
        return { done: true, value: undefined }
      }
    }
  }
}

const names = ['curry', 'kobe', 'klay']
// 調用createIterator函數，生成一個訪問names數組的迭代器
const namesIterator = createIterator(names)

console.log(namesIterator.next()) // { done: false, value: 'curry' }
console.log(namesIterator.next()) // { done: false, value: 'kobe' }
console.log(namesIterator.next()) // { done: false, value: 'klay' }
console.log(namesIterator.next()) // { done: true, value: undefined }

1.3.可迭代對象

1.3.1.什么是可迭代對象？

上面提到了迭代器是一個對象，並且符合迭代器協議，那么什么是可迭代對象呢？它與迭代器又有什么區別？

• 迭代器是一個符合迭代器協議（iterator protocol）的對象，對象內實現了一個特定的next方法；
• 而可迭代對象是一個符合可迭代協議（iterable protocol）的對象，對象內實現了一個Symbol.iterator方法，並且該方法返回一個迭代器對象；
• 所以，可以說可迭代對象包含了迭代器對象，可迭代對象中實現了一個特定方法用於返回迭代器對象；

如下，iteratorObj就是一個可迭代對象：

const iteratorObj = {
  names: ['curry', 'kobe', 'klay'],
  [Symbol.iterator]: function() {
    let index = 0
    return {
      // 注意：這里的next需要使用箭頭函數，否則this訪問不到iteratorObj
      next: () => {
        if (index < this.names.length) {
          return { done: false, value: this.names[index++] }
        } else {
          return { done: true, value: undefined }
        }
      }
    }
  }
}

// 調用iteratorObj中的Symbol.iterator得到一個迭代器
const iterator = iteratorObj[Symbol.iterator]()

console.log(iterator.next()) // { done: false, value: 'curry' }
console.log(iterator.next()) // { done: false, value: 'kobe' }
console.log(iterator.next()) // { done: false, value: 'klay' }
console.log(iterator.next()) // { done: true, value: undefined }

1.3.2.JS內置的可迭代對象

上面的可迭代對象都是由自己實現的，其實在JavaScript中為我們提供了很多可迭代對象，如：String、Array、Map、Set、arguments對象、NodeList（DOM集合）等。

// 1.String
const str = 'abc'

const strIterator = str[Symbol.iterator]()
console.log(strIterator.next()) // { value: 'a', done: false }
console.log(strIterator.next()) // { value: 'b', done: false }
console.log(strIterator.next()) // { value: 'c', done: false }
console.log(strIterator.next()) // { value: undefined, done: true }

// 2.Array
const names = ['curry', 'kobe', 'klay']
console.log(names[Symbol.iterator])

const namesIterator = names[Symbol.iterator]()
console.log(namesIterator.next()) // { value: 'curry', done: false }
console.log(namesIterator.next()) // { value: 'kobe', done: false }
console.log(namesIterator.next()) // { value: 'klay', done: false }
console.log(namesIterator.next()) // { value: undefined, done: true }

// 3.Map/Set
const set = new Set
set.add(10)
set.add(20)
set.add(30)

const setIterator = set[Symbol.iterator]()
console.log(setIterator.next()) // { value: 10, done: false }
console.log(setIterator.next()) // { value: 20, done: false }
console.log(setIterator.next()) // { value: 30, done: false }
console.log(setIterator.next()) // { value: undefined, done: true }

1.3.3.可迭代對象應用場景

可迭代對象在實際應用中特別常見，像一些語法的使用、創建一些對象和方法調用都用到了可迭代對象。

• JS中的語法：for...of、展開語法、解構等。

  • for...of可用於遍歷一個可迭代對象，其原理就是利用迭代器的next函數，如果done為false，就從返回的對象中拿到value返回給我們，而對象不是一個可迭代對象，所以對象不能使用for...of遍歷；

    const num = [1, 2, 3]
    for (const item of num) {
      console.log(item) // 1 2 3
    }
    // 遍歷上面自己定義的可迭代對象iteratorObj也是可以的
    for (const item of iteratorObj) {
      console.log(item) // curry kobe klay
    }
    

    const obj = { name: 'curry', name: 30 }
    for (const key of obj) {
      console.log(key)
    }
    

    

  • 為什么數組能使用展開語法，其原理也是用到了迭代器，在使用...對數組進行展開時，也是通過迭代器的next去獲取數組的每一項值，然后存放到新數組中；

    const names = ['james', 'green']
    // 將數組和iteratorObj通過擴展進行合並
    const newNames = [...names, ...iteratorObj]
    console.log(newNames) // [ 'james', 'green', 'curry', 'kobe', 'klay' ]
    

  • 可迭代對象都是可以使用解構語法的，像數組、字符串為什么可以使用解構，其原因就在這，原理也是通過迭代器一個個取值然后再賦值給對應變量；

    const str = 'abc'
    const nums = [1, 2, 3]
    
    const [str1, str2, str3] = str
    console.log(str1, str2, str3) // a b c
    
    const [num1, num2, num3] = nums
    console.log(num1, num2, num3) // 1 2 3
    
    const [name1, name2, name3] = iteratorObj
    console.log(name1, name2, name3) // curry kobe klay
    

  • 注意：在擴展語法和解構語法中，我們知道數組可以使用，但是對象也可以使用呀，為什么沒有提到對象呢？因為對象的擴展和解構是在ES9中新增的特性，其原理並不是使用迭代器實現的，只是ECMA提供給我們的一種操作對象的新語法而已；

• JS創建對象：new Map([Iterable])、new WeakMap([Iterable])、new Set([Iterable])、new WeakSet([Iterable])等。

  // 1.Set
  const set = new Set(iteratorObj)
  console.log(set) // Set(3) { 'curry', 'kobe', 'klay' }
  
  // 2.Array.from
  const names = Array.from(iteratorObj)
  console.log(names) // [ 'curry', 'kobe', 'klay' ]
  

• JS方法調用：Promise.all(Iterable)、Promise.race(Iterable)、Array.from(Iterable)等。

  // 傳入的可迭代對象中的每個值，會使用Promise.resolve進行包裹
  Promise.all(iteratorObj).then(res => {
    console.log(res) // [ 'curry', 'kobe', 'klay' ]
  })
  

擴展：現在我們都知道了for...of可用於遍歷一個可迭代對象，如果在遍歷過程中終端了呢？因為使用break、continue、return、throw都是可以中斷遍歷的，既然for...of遍歷的原理是基於迭代器的，那么在for...of中進行中斷操作，一定是可以被迭代器監聽到的，上面說了，在迭代器中有一個next方法，其實還可以指定一個return方法，如果遍歷過程中斷了，就會去調用return方法，注意return方法也要返回和next方法一樣的對象。這種情況就稱之為迭代器的中斷。

const iteratorObj = {
  names: ['curry', 'kobe', 'klay'],
  [Symbol.iterator]: function() {
    let index = 0
    return {
      next: () => {
        if (index < this.names.length) {
          return { done: false, value: this.names[index++] }
        } else {
          return { done: true, value: undefined }
        }
      },
      return() {
        console.log('哎呀，我被中斷了！')
        return { done: true, value: undefined }
      }
    }
  }
}

for (const item of iteratorObj) {
  console.log(item)
  if (item === 'kobe') break
}

1.3.4.自定義可迭代類

上面提到了對象不是一個可迭代對象，所以對象不能使用for...of遍歷，如果我們想要實現通過for...of遍歷對象呢？那么可以自己實現一個類，這個類的實例化對象是可迭代對象。

• 實現一個Person類，並且Person類中實現了Symbol.iterator方法用於返回一個迭代器；
• Person類的實例化對象p中包含一個friends數組，通過for...of遍歷p對象時，可以將friends數組的每一項遍歷出來；

class Person {
  constructor(name, age, friends) {
    this.name = name
    this.age = age
    this.friends = friends
  }

  [Symbol.iterator]() {
    let index = 0
    return {
      next: () => {
        if (index < this.friends.length) {
          return { done: false, value: this.friends[index++] }
        } else {
          return { done: true, value: undefined }
        }
      }
    }
  }
}

簡單看一下效果：

const p = new Person('curry', 30, ['kobe', 'klay', 'green'])
for (const name of p) {
  console.log(name) // kobe klay green
}

2.生成器（Generator）

2.1.什么是生成器？

生成器是ES6中新增的一種控制函數執行的方案，它可以幫助我們控制函數的暫停和執行。生成器是一種特殊的迭代器，所以生成器也是一個對象，並且可以調用next方法。那么怎么創建一個生成器對象呢？

創建生成器對象需要使用生成器函數，生成器函數和普通函數不一樣，主要有以下特點：

• 生成器函數的聲明需要在function后加上一個符號*；
• 在生成器函數中可以使用yield關鍵字來分割函數體代碼，控制函數的執行；
• 生成器函數調用的返回值就是生成器對象了；

2.2.生成器的基本使用

實現一個生成器函數，該函數的執行可以通過返回的生成器對象進行控制。

function* generatorFn() {
  console.log('函數開始執行~')

  console.log('函數第一段代碼執行...')
  yield
  console.log('函數第二段代碼執行...')
  yield
  console.log('函數第三段代碼執行...')
  yield
  console.log('函數第四段代碼執行...')

  console.log('函數執行結束~')
}

// 調用generatorFn獲取生成器
const generator = generatorFn()

generator.next()
console.log('------------------------')
generator.next()
console.log('------------------------')
generator.next()
console.log('------------------------')
generator.next()

2.3.生成器next方法的返回值

上面說到了生成器是一種特殊的迭代器，那么調用next方法肯定也是有返回值的，並且返回值是一個包含done、value屬性的對象。

function* generatorFn() {
  console.log('函數第一段代碼執行...')
  yield
  console.log('函數第二段代碼執行...')
  yield
  console.log('函數第三段代碼執行...')
  yield
  console.log('函數第四段代碼執行...')
}

// 調用generatorFn獲取生成器
const generator = generatorFn()

console.log(generator.next())
console.log('------------------------')
console.log(generator.next())
console.log('------------------------')
console.log(generator.next())
console.log('------------------------')
console.log(generator.next())

從打印結果可以看出來，next返回的對象中value是沒有值的，當執行到最后一段代碼后，done的值就為true了：

如果需要指定next返回值中的value，那么可以通過在yield后面跟上一個值或者表達式，就可以將對應的值傳遞到next返回對象value中了。

function* generatorFn() {
  console.log('函數第一段代碼執行...')
  yield 10
  console.log('函數第二段代碼執行...')
  yield 20
  console.log('函數第三段代碼執行...')
  yield 30
  console.log('函數第四段代碼執行...')
}

// 調用generatorFn獲取生成器
const generator = generatorFn()

console.log(generator.next())
console.log('------------------------')
console.log(generator.next())
console.log('------------------------')
console.log(generator.next())
console.log('------------------------')
console.log(generator.next())

觀察以上打印結果，在執行完第四段代碼后，調用的next返回值為{ value: undefined, done: true }，原因是后面已經沒有yield了，而且當函數沒有指定返回值時，最后會默認執行return undefined。

2.4.生成器next方法的參數傳遞

在前面介紹迭代器定義時，提到迭代器的next可以傳遞0個或1個參數，而可以傳遞1個參數的情況就是生成器的next可以傳遞一個參數，而給每一段代碼傳遞過去的參數可以通過yield來接收。

function* generatorFn(value) {
  console.log('函數第一段代碼執行...', value)
  const value1 = yield 10

  console.log('函數第二段代碼執行...', value1)
  const value2 = yield 20

  console.log('函數第三段代碼執行...', value2)
  const value3 = yield 30

  console.log('函數第四段代碼執行...', value3)
}

// 調用generatorFn獲取生成器
const generator = generatorFn('參數0')

console.log(generator.next())
console.log('------------------------')
console.log(generator.next('參數1'))
console.log('------------------------')
console.log(generator.next('參數2'))
console.log('------------------------')
console.log(generator.next('參數3'))

next參數傳遞解釋：

• next中傳遞的參數是會被上一個yield接收的，這樣可以方便下面代碼使用這個參數，所以給next傳遞參數，需要從第二個next開始傳遞；
• 如果第一段代碼需要使用參數呢？可以在調用生成器函數時傳遞參數過去，供第一段代碼使用；

2.5.生成器的return方法

return方法也可以給生成器函數傳遞參數，但是調用return后，生成器函數就會中斷，之后再調用next就不會再繼續生成值了。

function* generatorFn() {
  console.log('函數第一段代碼執行...')
  yield

  console.log('函數第二段代碼執行...')
  yield

  console.log('函數第三段代碼執行...')
  yield

  console.log('函數第四段代碼執行...')
}

// 調用generatorFn獲取生成器
const generator = generatorFn()

console.log(generator.next())
console.log('------------------------')
console.log(generator.next())
console.log('------------------------')
console.log(generator.return(123))
console.log('------------------------')
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())

上面的執行return方法，相當於函數內部執行了return：

function* generatorFn() {
  console.log('函數第一段代碼執行...')
  yield

  console.log('函數第二段代碼執行...')
  const value = yield
  return value

  console.log('函數第三段代碼執行...')
  yield

  console.log('函數第四段代碼執行...')
}

// 調用generatorFn獲取生成器
const generator = generatorFn()

console.log(generator.next())
console.log('------------------------')
console.log(generator.next())
console.log('------------------------')
console.log(generator.next(123))
console.log('------------------------')
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())

2.6.生成器的throw方法

throw方法可以給生成器函數內部拋出異常。

• 生成器調用throw方法拋出異常后，可以在生成器函數中進行捕獲；
• 通過try catch捕獲異常后，后續的代碼還是可以正常執行的；

function* generatorFn() {
  console.log('函數第一段代碼執行...')
  yield 10

  console.log('函數第二段代碼執行...')
  try {
    yield 20
  } catch (err) {
    console.log(err)
  }

  console.log('函數第三段代碼執行...')
  yield 30

  console.log('函數第四段代碼執行...')
}

// 調用generatorFn獲取生成器
const generator = generatorFn()

console.log(generator.next())
console.log('------------------------')
console.log(generator.next())
console.log('------------------------')
console.log(generator.throw('err message'))
console.log('------------------------')
console.log(generator.next())

2.7.生成器替換迭代器

在前面實現了一個生成迭代器的函數，實現過程還需要進行判斷，並自己返回對應的對象，下面就用生成器來實現一個生成迭代器的函數。

• 方式一：根據數組元素的個數，執行yield；

  function* createIterator(arr) {
    let index = 0
    yield arr[index++]
    yield arr[index++]
    yield arr[index++]
  }
  

• 方式二：遍歷數組，執行yield；

  function* createIterator(arr) {
    for (const item of arr) {
      yield item
    }
  }
  

• 方式三：執行yield*，后面可以跟上一個可迭代對象，它會依次迭代其中每一個值；

  function* createIterator(arr) {
    yield* arr
  }
  

測試一下以上三種方法，執行結果都是一樣的：

const names = ['curry', 'kobe', 'klay']
const iterator = createIterator(names)

console.log(iterator.next()) // { value: 'curry', done: false }
console.log(iterator.next()) // { value: 'kobe', done: false }
console.log(iterator.next()) // { value: 'klay', done: false }
console.log(iterator.next()) // { value: undefined, done: true }

3.異步請求的處理方案

在進行異步請求時，如果出現了這樣一個需求，下一次的請求需要拿到上一次請求的結果。如下是使用Promise封裝的一個request方法。

function request(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(url)
    }, 300)
  })
}

實現上面的需求可以怎么做呢？

3.1.方案一：使用Promise的then進行嵌套調用

• 在then中拿到結果后，再去做下一次請求，以此類推；
• 缺點：形成了回調地獄；

request('/aaa').then(res => {
  request(res + '/bbb').then(res => {
    request(res + '/ccc').then(res => {
      console.log(res) // /aaa/bbb/ccc
    })
  })
})

3.2.方案二：使用Promise的then的返回值

• 雖然可以解決回調地獄問題，但是閱讀性不佳；

request('/aaa').then(res => {
  return request(res + '/bbb')
}).then(res => {
  return request(res + '/ccc')
}).then(res => {
  console.log(res) // /aaa/bbb/ccc
})

3.3.方案三：使用Promise和Generator處理

function* getRequestData() {
  const res1 = yield request('/aaa')
  const res2 = yield request(res1 + '/bbb')
  const res3 = yield request(res2 + '/ccc')
  console.log(res3)
}

• 手動執行生成器的next方法；

  const generator = getRequestData()
  generator.next().value.then(res => {
    generator.next(res).value.then(res => {
      generator.next(res).value.then(res => {
        generator.next(res) // /aaa/bbb/ccc
      })
    })
  })
  

  

• 自動執行生成器的next方法：如果手動執行嵌套層級過多的話是不方便的，那么可以借助遞歸的思想實現一個自動執行生成器的函數；

  function autoGenerator(generatorFn) {
    const generator = generatorFn()
  
    function recursion(res) {
      const result = generator.next(res)
      // 如果done值為true，說明結束了
      if (result.done) return result.value
      // 沒有結束，繼續調用Promise的then
      result.value.then(res => {
        recursion(res)
      })
    }
  
    recursion()
  }
  
  autoGenerator(getRequestData) // /aaa/bbb/ccc
  

• 使用第三方庫來執行生成器：像自動執行生成器函數，早就已經有第三方庫幫助我們實現了，如co；

  const co = require('co')
  co(getRequestData) // /aaa/bbb/ccc
  

3.4.方案四：使用async和await

async和await是我們解決異步回調的最終解決方案，它可以讓我們異步的代碼，看上去是同步執行的。

async function getRequestData() {
  const res1 = await request('/aaa')
  const res2 = await request(res1 + '/bbb')
  const res3 = await request(res2 + '/ccc')
  console.log(res3)
}

getRequestData() // /aaa/bbb/ccc

4.async和await的原理

相信從上面講述的四個異步請求的處理方案中，就可以看出來async、await和生成器的關系了。

• 將生成器函數的*換成async；
• 將生成器函數中的yield換成await；
• 兩種方案所體現出的效果和代碼書寫形式幾乎差不多；

總結：

• async和await的原理其實就是Promise+生成器實現的；
• 為什么async、await能夠讓異步代碼看上去是同步執行的，其原因就在於生成器的next方法可以對函數內代碼的執行進行控制，當上一次請求拿到結果后，再去執行下一次next；
• 所以為什么說async和await只是Promise+生成器的語法糖，其原理就在這；