本文介紹了深入理解ES6的迭代器與生成器，分享給大家，具體如下：

循環語句的問題

var colors = ["red", "green", "blue"];for(var i=0; i<colors.length; i++){  console.log(colors[i]);}

在ES6之前，這種標準的for循環，通過變量來跟蹤數組的索引。如果多個循環嵌套就需要追蹤多個變量，代碼復雜度會大大增加，也容易產生錯用循環變量的bug。

迭代器的出現旨在消除這種復雜性并減少循環中的錯誤。

什么是迭代器

我們先感受一下用ES5語法模擬創建一個迭代器：

function createIterator(items) {  var i = 0;    return { // 返回一個迭代器對象    next: function() { // 迭代器對象一定有個next()方法      var done = (i >= items.length);      var value = !done ? items[i++] : undefined;            return { // next()方法返回結果對象        value: value,        done: done      };    }  };}var iterator = createIterator([1, 2, 3]);console.log(iterator.next()); // "{ value: 1, done: false}"console.log(iterator.next()); // "{ value: 2, done: false}"console.log(iterator.next()); // "{ value: 3, done: false}"console.log(iterator.next()); // "{ value: undefiend, done: true}"http:// 之后所有的調用都會返回相同內容console.log(iterator.next()); // "{ value: undefiend, done: true}"

以上，我們通過調用createIterator()函數，返回一個對象，這個對象存在一個next()方法，當next()方法被調用時，返回格式{ value: 1, done: false}的結果對象。

因此，我們可以這么定義：迭代器是一個擁有next()方法的特殊對象，每次調用next()都返回一個結果對象。

借助這個迭代器對象，我們來改造剛開始那個標準的for循環【暫時先忘記ES6的for-of循環新特性】：

var colors = ["red", "green", "blue"];var iterator = createIterator(colors);while(!iterator.next().done){  console.log(iterator.next().value);}

what?，消除循環變量而已，需要搞這么麻煩，代碼上不是得不償失了嗎？

并非如此，畢竟createIterator()只需寫一次，就可以一直復用。不過ES6引入了生成器對象，可以讓創建迭代器的過程變得更加簡單。

什么是生成器

生成器是一種返回迭代器的函數，通過function關鍵字后的星號（*）來表示，函數中會用到新的關鍵字yield。

function *createIterator(items) {  for(let i=0; i<items.length; i++) {    yield items[i];  }}let iterator = createIterator([1, 2, 3]);// 既然生成器返回的是迭代器，自然就可以調用迭代器的next()方法console.log(iterator.next()); // "{ value: 1, done: false}"console.log(iterator.next()); // "{ value: 2, done: false}"console.log(iterator.next()); // "{ value: 3, done: false}"console.log(iterator.next()); // "{ value: undefiend, done: true}"http:// 之后所有的調用都會返回相同內容console.log(iterator.next()); // "{ value: undefiend, done: true}"