本文介紹了深入理解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}"上面，我們用ES6的生成，大大簡化了迭代器的創建過程。我們給生成器函數createIterator()傳入一個items數組，函數內部，for循環不斷從數組中生成新的元素放入迭代器中，每遇到一個yield語句循環都會停止；每次調用迭代器的next()方法，循環便繼續運行并停止在下一條yield語句處。
生成器的創建方式
生成器是個函數：
function *createIterator(items) { ... }可以用函數表達式方式書寫：
let createIterator = function *(item) { ... }也可以添加到對象中，ES5風格對象字面量：
let o = { createIterator: function *(items) { ... }};let iterator = o.createIterator([1, 2, 3]);ES6風格的對象方法簡寫方式：
let o = { *createIterator(items) { ... }};let iterator = o.createIterator([1, 2, 3]);可迭代對象
在ES6中，所有的集合對象（數組、Set集合及Map集合）和字符串都是可迭代對象，可迭代對象都綁定了默認的迭代器。
來了來了，姍姍來遲的ES6循環新特性for-of：
var colors = ["red", "green", "blue"];for(let color of colors){ console.log(color);}for-of循環，可作用在可迭代對象上，正是利用了可迭代對象上的默認迭代器。大致過程是：for-of循環每執行一次都會調用可迭代對象的next()方法，并將迭代器返回的結果對象的value屬性存儲在變量中，循環將繼續執行這一過程直到返回對象的done屬性的值為true。
如果只需要迭代數組或集合中的值，用for-of循環代替for循環是個不錯的選擇。
訪問默認迭代器
可迭代對象，都有一個Symbol.iterator方法，for-of循環時，通過調用colors數組的Symbol.iterator方法來獲取默認迭代器的，這一過程是在JavaScript引擎背后完成的。
我們可以主動獲取一下這個默認迭代器來感受一下：
let values = [1, 2, 3];let iterator = values[Symbol.iterator]();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: undefined, done: true}"在這段代碼中，通過Symbol.iterator獲取了數組values的默認迭代器，并用它遍歷數組中的元素。在JavaScript引擎中執行for-of循環語句也是類似的處理過程。
用Symbol.iterator屬性來檢測對象是否為可迭代對象：
function isIterator(object) { return typeof object[Symbol.iterator] === "function";}console.log(isIterable([1, 2, 3])); // trueconsole.log(isIterable(new Set())); // trueconsole.log(isIterable(new Map())); // trueconsole.log(isIterable("Hello")); // true創建可迭代對象
當我們在創建對象時，給Symbol.iterator屬性添加一個生成器，則可以將其變成可迭代對象：
let collection = { items: [], *[Symbol.iterator]() { // 將生成器賦值給對象的Symbol.iterator屬性來創建默認的迭代器 for(let item of this.items) { yield item; } }};collection.items.push(1);collection.items.push(2);collection.items.push(3);for(let x of collection) { console.log(x);}內建迭代器
ES6中的集合對象，數組、Set集合和Map集合，都內建了三種迭代器：
不同集合的默認迭代器
每個集合類型都有一個默認的迭代器，在for-of循環中，如果沒有顯式指定則使用默認的迭代器。按常規使用習慣，我們很容易猜到，數組和Set集合的默認迭代器是values()，Map集合的默認迭代器是entries()。
請看以下示例：
let colors = [ "red", "green", "blue"];let tracking = new Set([1234, 5678, 9012]);let data = new Map();data.set("title", "Understanding ECMAScript 6");data.set("format", "print");// 與調用colors.values()方法相同for(let value of colors) { console.log(value);}// 與調用tracking.values()方法相同for(let num of tracking) { console.log(num);}// 與調用data.entries()方法相同for(let entry of data) { console.log(entry);}這段代碼會輸入以下內容：
"red"
"green"
"blue"
1234
5678
9012
["title", "Understanding ECMAScript 6"]
["format", "print"]
for-of循環配合解構特性，操縱數據會更方便：
for(let [key, value] of data) { console.log(key + "=" + value);}展開運算符操縱可迭代對象
let set = new Set([1, 2, 3, 4, 5]), array = [...set]; console.log(array); // [1,2,3,4,5]
展開運算符可以操作所有的可迭代對象，并根據默認迭代器來選取要引用的值，從迭代器讀取所有值。然后按返回順序將它們依次插入到數組中。因此如果想將可迭代對象轉換為數組，用展開運算符是最簡單的方法。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
