&emsp;&emsp;ES6將迭代器和生成器內置到語言中，不僅簡化了數據處理和集合操作，還彌補了for、while等普通循環的不足，例如難以遍歷無窮集合或自定義的樹結構等。 &emsp;&emsp;迭代器（Iterator）是一種用于迭代的對象，可有序的依次訪問集合中的數據項。ES6制訂了一套標準化的迭代器接口（包含3個方法，如表11所列），只要實現了這套接口都能成為迭代器。 :-:  :-: 表11 迭代器接口 &emsp;&emsp;上表中的IteratorResult也叫迭代器結果，是一個特定形式的對象，它必須包含兩個屬性：value和done。value屬性就是集合成員的值，done屬性是一個布爾值，用于標記當前迭代是否結束。下面是一個簡單的迭代器示例。 ~~~ function createIterator(items) { var index = 0; return { next() { var done = index >= items.length; return { value: items[index++], done: done }; } }; } var iterator = createIterator(["a", "b"]); iterator.next(); //{value: "a", done: false} iterator.next(); //{value: "b", done: false} iterator.next(); //{value: undefined, done: true} ~~~ &emsp;&emsp;當迭代結束時，done屬性的值將會是true，而value屬性在未提供返回值的時候就會設為undefined。 ## 一、可迭代對象 &emsp;&emsp;包含Symbol.iterator屬性的對象被稱為可迭代對象（Iterable），Symbol.iterator是一個特殊的內置符號（詳見[第6篇](https://www.cnblogs.com/strick/p/10173774.html)），它的值是一個返回迭代器的方法。ES6內置了多種可迭代對象，例如集合（Array、TypedArray、Set和Map）、類數組對象（Arguments和NodeList）、字符串等，它們都含有各自默認的迭代器。下面的示例使用了數組的默認迭代器，通過next()方法依次遍歷了它所包含的元素，返回結果與上一個示例類似。 ~~~ var arr = ["a", "b"], iterator = arr[Symbol.iterator](); iterator.next(); //{value: "a", done: false} iterator.next(); //{value: "b", done: false} iterator.next(); //{value: undefined, done: true} ~~~ &emsp;&emsp;可迭代對象的應用場景在前面的章節中已陸續介紹過，例如[第2篇](https://www.cnblogs.com/strick/p/10172721.html)的擴展運算符、[第3篇](https://www.cnblogs.com/strick/p/10172871.html)的解構賦值和[第12篇](https://www.cnblogs.com/strick/p/10225274.html)的Array.from()方法等。在接下來的章節中，還會將可迭代對象應用于for-of循環和yield\*。 ## 二、for-of &emsp;&emsp;這是ES6新增的一種循環語句，當要遍歷一個可迭代對象時，會先通過它的Symbol.iterator屬性得到默認迭代器，再調用迭代器的next()方法，讀取IteratorResult的value屬性的值并賦給for-of語句中聲明的變量，如此反復，直到done屬性為ture時才終止遍歷。而和其它循環語句一樣，for-of循環也能通過跳轉語句return、break和continue提前終止。下面分別對Set和Map兩種數據結構進行for-of循環。 ~~~ var set = new Set(["strick", 28]), map = new Map([["name", "strick"], ["age", 28]]); /******************** "strick" 28 ********************/ for (var value of set) { console.log(value); } /******************** "name" "strick" "age" 28 ********************/ for (var [key, value] of map) { console.log(key, value); } ~~~ &emsp;&emsp;在前文中曾多次提到過3個迭代器方法，根據上面代碼的輸出結果可知，Set和Map的默認迭代器分別通過values()和entries()方法獲得。 ## 三、字符串 &emsp;&emsp;字符串雖然是基礎類型，但它能被隱式的封裝成String對象，而String含有默認迭代器，因此可以進行for-of循環。在[第9篇](https://www.cnblogs.com/strick/p/10174360.html)字符串中曾提到過，JavaScript采用了UTF-16編碼的Unicode字符集，在BMP中的字符可用一個編碼單元表示，而在輔助平面中的字符則需要兩個編碼單元。以“向”和“??”為例，前者存在于BMP中，后者存在于輔助平面中，當用for循環遍歷下面的這段字符串（str）時，無法得到正確的字符。 ~~~ var str = "向??"; //str.length的值為3 for (var i = 0; i < str.length; i++) { console.log(str[i]); } ~~~ &emsp;&emsp;而在改用for-of循環后（如下代碼所示），就能得到預期的結果。由此可見，迭代器在處理字符串時更加安全可靠。 ~~~ for (var value of str) { console.log(value); } ~~~ ## 四、創建可迭代對象 &emsp;&emsp;普通的對象只要包含Symbol.iterator屬性，并返回一個迭代器，就能搖身一變成為可迭代對象。在下面的代碼中，iterable對象本身就是迭代器，因此Symbol.iterator屬性的返回值可以是當前對象。注意，必須返回迭代器，否則會出現不可預料的錯誤。 ~~~ var iterable = { items: ["a", "b"], index: 0, [Symbol.iterator]() { return this; }, next() { var done = this.index >= this.items.length; return { value: this.items[this.index++], done: done }; }, return() { return { value: undefined, done: true }; } }; ~~~ &emsp;&emsp;在iterable對象中，包含return()方法，只有當迭代器終止遍歷時，才會觸發此方法。例如在for-of循環體中執行break、continue或return語句，甚至還能通過調用throw語句拋出自定義異常，提前結束代碼的運行，以此實現觸發條件，如下所示。 ~~~ for (var value of iterable) { throw new Error(); } ~~~ ***** > 原文出處： [博客園-ES6躬行記](https://www.cnblogs.com/strick/category/1372951.html) [知乎專欄-ES6躬行記](https://zhuanlan.zhihu.com/pwes6) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎瀏覽。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。