>[success] # 什么是迭代器 1. **迭代器（iterator），使用戶在容器對象（container，例如鏈表或數組）上遍訪的對象**，使用該接口無需關心對象的內部實現細節 2. **迭代器是幫助我們對某個數據結構進行遍歷的對象** >[danger] ##### js 迭代器 定義 1. **在JavaScript中，迭代器也是一個具體的對象，這個對象需要符合迭代器協議**往往就是一個指針對象，不斷調用，然后不斷地指向下一個對象的過程這種對象都有一個next 方法，調用該方法后會返回一個對象這個對象有兩個屬性值，一個是'value' 一個是'done',根據描述結構可以看做{ next(){ return {value:"",done:false } } } 2.1. **done（boolean）**，如果迭代器可以產生序列中的下一個值，則為 false。如果迭代器已將序列迭代完畢，則為 true。這種情況下，value 是可選的，如果它依然存在，即為迭代結束之后的默認返回值 2.2. **value** 迭代器返回的任何 JavaScript 值。done 為 true 時可省略 2. 簡單說只有實現了一個擁有以下語義（semantic）的 **`next()`** 方法，一個對象才能成為迭代器 * 參考 [迭代器協議](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#%E8%BF%AD%E4%BB%A3%E5%99%A8%E5%8D%8F%E8%AE%AE "Permalink to 迭代器協議") >[danger] ##### 根據定義寫一個迭代器 ~~~ 1.大概的構想，需要不斷調用，調用這個方法我們起名為'next',需要有返回值這個返回值 告訴我們當前迭代的內容是多少因此定義了一個對象，有'done' 如果是最后一個元素返回'true' 非最后元素返回'false','value' 表示返回的值 2. 這一部分就是迭代器對象 { next:function () { var done = (i>=items.length) var value = !done?items[i++]:undefined return{ done:done, value:value } } ~~~ ~~~ function createIterator(items) { var i = 0 return { next:function () { var done = (i>=items.length) var value = !done?items[i++]:undefined return{ done:done, value:value } } } } var iterator = createIterator([1,2,3]) console.log(iterator.next()) // {done: false, value: 1} ~~~ * 類的形式表現 ~~~ class Iterator { constructor(assemble) { let self = this; self.assemble = assemble; self.index = 0; } next() { let self = this, assemble = self.assemble; if (self.index > assemble.length - 1) { return { done: true, value: undefined }; } return { done: false, value: assemble[self.index++] }; } } ~~~ >[danger] ##### 什么是js可迭代對象 1. 當一個對象實現了**iterable protocol協議時**，它就是一個可迭代對象 2. 這個對象的要求是必須實現 **@@iterator 方法**，在代碼中我們使用 **Symbol.iterator** 訪問該屬性； 3. 簡單說將迭代器方法作為對象本身的方法去調用，迭代器和這個對象組合叫做**可迭代對象**，在js中這類對象的方法必須 **@@iterator 方法** ~~~ /* 1.必須實現一個特定的函數: [Symbol.iterator] 2.這個函數需要返回一個迭代器(這個迭代器用于迭代當前的對象) */ const infos = { friends: ['kobe', 'james', 'curry'], [Symbol.iterator]: function () { let index = 0 const infosIterator = { next: ?() =>{ // done: Boolean // value: 具體值/undefined if (index < this.friends.length) { return { done: false, value: this.friends[index++], } } else { return { done: true } } }, } return infosIterator }, } // 可迭代對象必然具備下面的特點 const iterator = infos[Symbol.iterator]() console.log(iterator.next()) console.log(iterator.next()) console.log(iterator.next()) console.log(iterator.next()) ~~~ >[danger] ##### 原生迭代器對象 1. **String、Array、Map、Set、arguments**對象、**NodeList**集合他們都是可迭代對象，內部都實現了**Symbol.iterator** 方法 2. 可迭代對象都可使用 **for ...of、展開語法（spread syntax）、yield、解構賦值（Destructuring\_assignment）** 3. 創建一些對象時：創建一些對象時：**new Map(\[Iterable\])、new WeakMap(\[iterable\])、new Set(\[iterable\])、new WeakSet(\[iterable\]);** 他們需要的傳參也是可迭代對象 4. 一些方法的調用：**Promise.all(iterable)、Promise.race(iterable)、Array.from(iterable)** 5. **迭代器的中斷**，遍歷的過程中通過break、return、throw中斷了循環操作，在解構的時候，沒有解構所有的值，想去監聽中斷需要在迭代器對象中指定**return方法** * 沒有加return 方法 ~~~ const person = { name: 'w', age: 12, [Symbol.iterator]() { let index = 0 const ls = Object.values(this) return { next: () => { if (index < ls.length) { return { done: false, value: ls[index++] } } else { return { done: true } } }, } }, } for (const item of person) { console.log(item) if (item === 'w') { break } } ~~~ 執行效果  * 使用return 函數增加提示 ~~~ const person = { name: 'w', age: 12, [Symbol.iterator]() { let index = 0 const ls = Object.values(this) return { next: () => { if (index < ls.length) { return { done: false, value: ls[index++] } } else { return { done: true } } }, return: () => { console.log('監聽到迭代器中斷了') return { done: true } }, } }, } for (const item of person) { console.log(item) if (item === 'w') { break } } ~~~ 執行效果  * 注參考 [可迭代對象示例](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#%E5%8F%AF%E8%BF%AD%E4%BB%A3%E5%AF%B9%E8%B1%A1%E7%A4%BA%E4%BE%8B "Permalink to 可迭代對象示例") >[danger] ##### 判斷js 可迭代對象 ~~~ let someString = "hi"; typeof someString[Symbol.iterator]; // "function" ~~~ 雖然可能 有些自己定義的對象去重寫了`Symbol.iterator`但如果不能返回迭代器對象，那么可以認為它是一個*格式不佳*的（*Non-well-formed*）可迭代對象 。產生下面報錯 ~~~ var nonWellFormedIterable = {} nonWellFormedIterable[Symbol.iterator] = () => 1 [...nonWellFormedIterable] // TypeError: [] is not a function ~~~ >[info] ## 必讀 參考 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#iterable