深度解析ES6 迭代器與可迭代對象的實現

ES6 新的數組方法、集合、for-of 循環、展開運算符（...）甚至異步編程都依賴於迭代器（Iterator ）實現。本文會詳解 ES6 的迭代器與生成器，並進一步挖掘可迭代對象的內部原理與使用方法

一、迭代器的原理

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

如何設計一個迭代器呢？

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

function createIterator(iterms) {
 let i = 0
 return {
 next() {
 let done = (i >= iterms.length)
 let value = !done ? iterms[i++] : undefined
 return {
 done,
 value
 }
 }
 }
}
 //在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力
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 }

每次調用迭代器的 next( ) 都會返回下一個對象，直到數據集被用盡。

ES6 中迭代器的編寫規則類似，但引入了生成器對象，更簡單的創建迭代器對象

二、創建迭代器

ES6 封裝了一個生成器用來創建迭代器。顯然生成器是返回迭代器的函數，這個函數通過 function 後的星號（*）表示，並使用新的內部專用關鍵字yield指定迭代器 next( ) 方法的返回值。

如何使用 ES6 生成器創建一個迭代器呢？一個簡單的例子如下：

function *createIterator() {
 yield 864305860;
 yield 'someValue'
}
 
let someIterator = createIterator()
 //在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力
console.log(someIterator.next()) // { value: 864305860, done: false }
console.log(someIterator.next()) // { value: 'someValue', done: false }
console.log(someIterator.next()) // { value: undefined, done: true }

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

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

由於生成器本身是函數，所以可添加到對象中，使用方式如下：

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

生成器函數的一個特點是，當執行完一句 yield 語句後函數會自動停止執行，再次調用迭代器的 next( ) 方法才會繼續執行下一個 yield 語句。

這種自動中止函數執行的能力衍生出很多高級用法。

三、可迭代對象

在 ES6 中常用的集合對象（數組、Set/Map集合）和字符串都是可迭代對象，這些對象都有默認的迭代器和Symbol.iterator屬性。

通過生成器創建的迭代器也是可迭代對象，因為生成器默認會為Symbol.iterator屬性賦值。

**3.1 Symbol.iterator

可迭代對象具有 Symbol.iterator屬性，即具有 Symbol.iterator 屬性的對象都有默認迭代器。

我們可以用 Symbol.iterator 來訪問對象的默認迭代器，例如對於一個數組：

let list = [11, 22, 33]
let iterator = list[Symbol.iterator]()
console.log(iterator.next()) // { value: 11, done: false }

Symbol.iterator 獲得了數組這個可迭代對象的默認迭代器，並操作它遍歷了數組中的元素。

反之，我們可以用 Symbol.iterator 來檢測對象是否為可迭代對象：

function isIterator(obj) {
 return typeof obj[Symbol.iterator] === 'function'
}
 
console.log(isIterator([11, 22, 33])) // true
console.log(isIterator('sometring')) // true
console.log(isIterator(new Map())) // true
console.log(isIterator(new Set())) // true
console.log(isIterator(new WeakMap())) // false
console.log(isIterator(new WeakSet())) // false

顯然數組、Set/Map 集合、字符串都是可迭代對象，而 WeakSet/WeakMap 集合（弱引用集合）是不可迭代的。

默認情況下，自定義的對象都是不可迭代的。

剛才講過，通過生成器創建的迭代器也是一種可迭代對象，生成器默認會為Symbol.iterator屬性賦值。

那如何將自定義對象變為可迭代對象呢？通過給Symbol.iterator屬性添加一個生成器：

let collection = {
 items: [11,22,33],
 *[Symbol.iterator]() {
 for (let item of this.items){
 yield item
 }
 }
}
 
console.log(isIterator(collection)) // true
//在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力 
for (let item of collection){
 console.log(item) // 11 22 33
}

數組 items 是可迭代對象，collection 對象通過給Symbol.iterator屬性賦值也成為可迭代對象。

3.3 for-of

注意到上個栗子使用了for-of代替索引循環，for-of是 ES6 為可迭代對象新加入的特性。

思考一下for-of循環的實現原理。

對於使用for-of的可迭代對象，for-of每執行一次就會調用這個可迭代對象的 next( )，並將返回結果存儲在一個變量中，持續執行直到可迭代對象 done 屬性值為 false。

// 迭代一個字符串
let str = 'somestring'
 
for (let item of str){
 console.log(item) // s o m e s t r i n g
}

本質上來說，for-of調用 str 字符串的Symbol.iterator屬性方法獲取迭代器（這個過程由 JS 引擎完成），然後多次調用 next( ) 方法將對象 value 值存儲在 item 變量。

將for-of用於不可迭代對象、null 或 undefined 會報錯！

3.4 展開運算符（...）

ES6 語法糖展開運算符（...）也是服務於可迭代對象，即只可以“展開”數組、集合、字符串、自定義可迭代對象。

以下栗子輸出不同可迭代對象展開運算符計算的結果：

let str = 'somestring'
console.log(...str) // s o m e s t r i n g
  

let set = new Set([1, 2, 2, 5, 8, 8, 8, 9])
console.log(set) // Set { 1, 2, 5, 8, 9 }
console.log(...set) // 1 2 5 8 9
 
let map = new Map([['name', '前端全棧開發交流圈'], ['id', 864305860]])
console.log(map) // Map { 'name' => '前端全棧開發交流圈', 'id' => 864305860 }
console.log(...map) // [ 'name', '前端全棧開發交流圈' ] [ 'id', 864305860 ]
 
let num1 = [1, 2, 3], num2 = [7, 8, 9]
console.log([...num1, ...num2]) // [ 1, 2, 3, 7, 8, 9 ]
//在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力 
let udf
console.log(...udf) // TypeError: undefined is not iterable

由以上代碼可以看出，展開運算符（...）可以便捷地將可迭代對象轉換為數組。同for-of一樣，展開運算符（...）用於不可迭代對象、null 或 undefined 會報錯！

四. 默認迭代器

ES6 為很多內置對象提供了默認的迭代器，只有當內建的迭代器不能滿足需求時才自己創建迭代器。

ES6 的 三個集合對象：Set、Map、Array 都有默認的迭代器，常用的如values()方法、entries()方法都返回一個迭代器，其值區別如下：

• entries()：多個鍵值對
• values()：集合的值
• keys()：集合的鍵

調用以上方法都可以得到集合的迭代器，並使用for-of循環，示例如下：

/******** Map ***********/
let map = new Map([['name', '前端全棧開發交流圈'], ['id', 864305860]])
 
for(let item of map.entries()){
 console.log(item) // [ 'name', '前端全棧開發交流圈' ] [ 'id', 864305860 ]
}
for(let item of map.keys()){
 console.log(item) // name id
}
for (let item of map.values()) {
 console.log(item) // 前端全棧開發交流圈 864305860
}
 //在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力
/******** Set ***********/
let set = new Set([1, 4, 4, 5, 5, 5, 6, 6,])
 
for(let item of set.entries()){
 console.log(item) // [ 1, 1 ] [ 4, 4 ] [ 5, 5 ] [ 6, 6 ]
}
 
/********* Array **********/
let array = [11, 22, 33]
 
for(let item of array.entries()){
 console.log(item) // [ 0, 11 ] [ 1, 22 ] [ 2, 33 ]
}

此外 String 和 NodeList 類型都有默認的迭代器，雖然沒有提供其它的方法，但可以用for-of循環

結語

感謝您的觀看，如有不足之處，歡迎批評指正。

對前端的技術，前端全棧技術感興趣的同學關注我的頭條號，並在後臺私信發送關鍵字：“前端”即可獲取免費的前端開發攻城師學習資料

知識體系已整理好，歡迎免費領取。還有視頻分享可以免費獲取。關注我，可以獲得沒有的經驗哦！

閱讀更多 前端攻城小牛 的文章

關鍵字: 生成器 技術 盤點