ES6 新的數(shù)組方法、集合、for-of 循環(huán)、展開運(yùn)算符（...）甚至異步編程都依賴于迭代器（Iterator ）實(shí)現(xiàn)。本文會(huì)詳解 ES6 的迭代器與生成器，并進(jìn)一步挖掘可迭代對(duì)象的內(nèi)部原理與使用方法

一、迭代器的原理

在編程語言中處理數(shù)組或集合時(shí)，使用循環(huán)語句必須要初始化一個(gè)變量記錄迭代位置，而程序化地使用迭代器可以簡化這種數(shù)據(jù)操作

如何設(shè)計(jì)一個(gè)迭代器呢？

迭代器的本身是一個(gè)對(duì)象，這個(gè)對(duì)象有 next( ) 方法返回結(jié)果對(duì)象，這個(gè)結(jié)果對(duì)象有下一個(gè)返回值 value、迭代完成布爾值 done，模擬創(chuàng)建一個(gè)簡單迭代器如下：

function createIterator(iterms) { let i = 0 return {  next() {   let done = (i >= iterms.length)   let value = !done ? iterms[i++] : undefined   return {    done,    value   }  } }}let arrayIterator = createIterator([1, 2, 3])console.log(arrayIterator.next()) // { done: false, value: 1 }console.log(arrayIterator.next()) // { done: false, value: 2 }console.log(arrayIterator.next()) // { done: false, value: 3 }console.log(arrayIterator.next()) // { done: true, value: undefined }

對(duì)以上語法感到困惑的，可參考： 【ES6】對(duì)象的新功能與解構(gòu)賦值

每次調(diào)用迭代器的 next( ) 都會(huì)返回下一個(gè)對(duì)象，直到數(shù)據(jù)集被用盡。

ES6 中迭代器的編寫規(guī)則類似，但引入了生成器對(duì)象，更簡單的創(chuàng)建迭代器對(duì)象

二、創(chuàng)建迭代器

ES6 封裝了一個(gè)生成器用來創(chuàng)建迭代器。顯然生成器是返回迭代器的函數(shù)，這個(gè)函數(shù)通過 function 后的星號(hào)（*）表示，并使用新的內(nèi)部專用關(guān)鍵字yield指定迭代器 next( ) 方法的返回值。

如何使用 ES6 生成器創(chuàng)建一個(gè)迭代器呢？一個(gè)簡單的例子如下：

function *createIterator() { yield 123; yield 'someValue'}let someIterator = createIterator()console.log(someIterator.next()) // { value: 123, done: false }console.log(someIterator.next()) // { value: 'someValue', done: false }console.log(someIterator.next()) // { value: undefined, done: true }

使用yield關(guān)鍵字可以返回任意值或表達(dá)式，可以給迭代器批量添加元素：

// let createIterator = function *(items) { // 生成器函數(shù)表達(dá)式function *createIterator(items) { for (let i = 0; i < items.length; i++) {  yield items[i] }}let someIterator = createIterator([123, 'someValue'])console.log(someIterator.next()) // { value: 123, done: false }console.log(someIterator.next()) // { value: 'someValue', done: false }console.log(someIterator.next()) // { value: undefined, done: true }

由于生成器本身是函數(shù)，所以可添加到對(duì)象中，使用方式如下：

let obj = { // createIterator: function *(items) { // ES5 *createIterator(items) { // ES6  for (let i = 0; i < items.length; i++) {   yield items[i]  } }}let someIterator = obj.createIterator([123, 'someValue'])