詳解JS前端使用迭代器和生成器原理及範例

2023-02-24 06:01:58

正文

生成器和迭代器這兩個東西平時作為一個切圖仔，一直都沒有使用到。感覺是隻有在面試之前才會的東西。面試過不了幾天，再次看這兩個詞一陣恍惚。

記憶力退化成這樣了麼？最大的原因一定是用得少了。然後呢？就是沒有真正的理解它們。我對於它們的認知常常有下面這些：

1. 我常常把迭代器和生成器理解成完全不同的東西。

2. 我常常把for、forEach、map、reduce和for of混為一談

3. 我常常把陣列、類陣列認為是可迭代物件

想來要真正的記住它，增加自己的武器庫，必須要弄明白這些東西才行。

我們首先是要搞明白什麼for of是幹什麼用的。

業務程式碼確實使用不上，但是如果不理解的話，等真到了可以使用的場景的時候，又是否真的能夠運用起來，甚至記起來呢？

for of 是幹什麼用的

所有人都知道一些概念for、forEach、map、reduce這些是可以遍歷陣列的，for of是用於遍歷迭代物件的。如下:

const arr = [1, 2, 3]
arr.forEach((item, index) => {
   console.log(item) // 1, 2, 3 
   console.log(index) // 0, 1, 2
})

而巧合的是for of也可以遍歷陣列

for (let key of arr) {
    console.log(key) // 1 2 3
}

將arr改變為const obj = { a: 1, b: 2, c: 3 }的時候，兩者都沒有遍歷出結果。

前者是沒有反應，後者會直接報錯：TypeError: obj is not iterable。翻譯一下，型別錯誤:obj 不是一個可迭代物件。

那麼什麼是可迭代物件呢？

可迭代物件是什麼？

我們先來看看下面這個例子：

const itemLi1 = document.getElementByTagName('li')
const itemLi2 = document.querySelectorAll('li')
for(let key of itemLi1) {
    console.log(item)
}
for(let key of itemLi2) {
    console.log(item)
}

也就是說HTMLCollection和NodeList是可以迭代物件。其他的可迭代物件有Array、map、set、string等等。如果說類陣列的話，是不是迭代物件呢？

const arrLike = {
  0: 1,
  1: 2,
  2: 3,
  lenght: 3
}
for (let i = 0; i &lt; arrLike.length; i++) {
    console.log(arrLike[i]) // 1, 2, 3
}
for (let of arrLike) {
    console.log(key) // uncachh TypeError: obj is not iterable
}

for迴圈列印出了對應的結果，而for of 報錯了。類陣列不是可迭代的的物件。這又是為什麼呢？我們將類陣列和HTMLCollection型別列印出來比較一下。

而類陣列如下：

它們有一個明顯的不同，可迭代物件的原型鏈上面是包括Symbol.iterator的。而這個就是讓陣列變成可迭代的根本原因。

也就是說，當目的物件的原型鏈上面包括Symbol.iterator的時候，它才是可迭代物件。

物件是無序的，無序的東西自然不可以迭代

這裡使用到了Symbol型別，它在MDN上面的解釋就是用於生成全域性唯一的變數。而可迭代物件就是它的使用場景。受它的啟發，我們在業務當中，如果需要前端來生成一個唯一ID的時候，再次之前，通常都是建立一個UUID的函數來生成一個唯一ID。Symbol不用這麼麻煩，直接使用就可以了。

由此可知，Array.prototype[Symbol.iterater]這個函數封裝了一些東西，使得for of可以將物件的元素給列印出來。

換一句話來說，就是Array.prototype[Symbol.iterater] = function() {}的執行生成一個迭代器物件。

也就是說，當Object.prototype也有[Symbol.iterater]的方法的時候，for of也能夠遍歷它呢？我們來試試看吧。

Object.ptotoype[Symbol.iterator] = function value() {}

這不就是生成器的作用麼？

生成器和迭代器的關係。

ES6給我提高了一個生成器的函數。既然叫做生成器，它生成的東西就是迭代器。

表現形式如下：

function * generation(iterableObject) {
    for(let i = 0; i &lt; iterableObject; i++) {
        yield iterableObject[i]
    }
}

由*符號和yield關鍵字組成。

當const iterator = generation([1, 2, 3]), 其執行流程如下：

iterator.next() ==> { value: 1, done: false }

iterator.next() ==> { value: 2, done: false }

iterator.next() ==> { value: 3, done: false }

iterator.next() ==> { value: undefined, done: true }

到了第四次，value為undefined的時候，done為true(也就是說，當done為true的時候，value一定為undefined)。所以說，yield的作用有兩個：

生成一個值，將該值封裝成一個物件，而這個物件是{ value: .., done: flase/true }這樣的形式。
停下來

可以明顯的看出來，生成器有一個作用，通過next這個介面，可以看到迭代的過程。

既然說生成器生成了一個迭代器，那麼是不是說生成器執行後的結果就是一個迭代器呢？既然是迭代器，自然就可以被for of給遍歷。

for (const key of generation([1, 2, 3]) {
    console.log(key) // 1, 2, 3
}

果然可以。

經典面試題: 自己實現一個next這樣的介面呢？

上面已經有了實現的思路。通過一個識別符號和一個判斷就能夠使用ES5來使用，如下程式碼片段。

function generation(iterableObj) {
    let nextIndex = 0
    function next() {}
    return {
        next: () => {
            return nextIndex < iterableObj.length
                             ? { value: iterableObj[nextIndex++], done: false }
                             : { value: undefined, done: true } 
        }
    }
}

當nextIndex下於陣列長度的時候，沒有迭代完畢。

注意：nextIndex++是先跑nextIndex，再自增。

何為介面，後臺給你一個url地址，這個是網路介面。next是設計師給你封裝的一個方法，你通過這個方法來達到上吧yield的兩個作用，所以next()也是一個介面，前端介面。簡單來說，一個封裝好的方法就是一個介面。

讓非迭代物件也可以使用for of 進行遍歷

正如第一節所說，Symbol.iterator的方法是迭代器的關鍵。那麼我們也可以給Object掛載上該方法。既然該方法可以讓物件變成迭代器，就可以直接使用上面ES5實現next方法的程式碼片段。

const obj = {
  a: 1,
  b: 2,
  c: 3
}
Object.prototype[Symbol.iterator] = function value() {
  const keys = Object.keys(Object(this))
  let nextIndex = 0
  function next() {
    return nextIndex < keys.length
        ? { value: [keys[nextIndex], obj[keys[nextIndex ++]]], done: false }
        : { value: undefined, done: true }
  }
  return {
    next
  }
}
for (const [key, value] in obj) {
  console.log(key)
}