>[success] # for-of 循環的是什么 -- 循環的是可迭代協議 [關于可迭代協議MDN講解](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#%E5%8F%AF%E8%BF%AD%E4%BB%A3%E5%8D%8F%E8%AE%AE) ~~~ 1.for...of語句在可迭代對象（包括 Array，Map，Set，String，TypedArray，arguments 對象等等） 上創建一個迭代循環，調用自定義迭代鉤子，并為每個不同屬性的值執行語句 2.上面這些可以使用for-of的可迭代對象是因為具有'Symbol.iterator' 屬性 3.要注意'Object'不能使用 'for-of',原因很簡單他沒有'Symbol.iterator' 屬性， 想讓他使用可以給他加一個這個屬性 ~~~ >[danger] ##### 舉個例子 ~~~ const list = [1,2,3] for(item of list){ console.log(item) } ~~~ >[danger] ##### 'Symbol.iterator' ~~~ 1.'Symbol.iterator' 是可迭代對象所具有的因此，我們也可以直接調用 可迭代對象的'Symbol.iterator'屬性 ~~~ ~~~ const list = [1,2,3] let iterator = list[Symbol.iterator]() console.log(iterator.next()) // value: 1, done: false} ~~~ * 通過上面案例可以發現Symbol.iterator屬性對應的一個方法 * 首先為什么是方法因為生成器是方法，所以你想迭代就給有生成器 * 有生成器就是一個方法，那么就可以利用這個來做一個判斷當前是否是可迭代對象 ~~~ function isIterable(object) { return typeof object[Symbol.iterator] === 'function' } ~~~ >[danger] ##### 自定義的對象讓其具有可迭代屬性 ~~~ 1.想讓不可迭代的對象使用'for-of',需要給他們加一個' *[Symbol.iterator]' 方法，需要在這個方里告訴'for-of'要迭代誰 ~~~ ~~~ let collection = { items:[], *[Symbol.iterator](){ for(let item of this.items) { yield item } } } collection.items.push(1) collection.items.push(2) for(item of collection){ console.log(item) } ~~~ >[danger] ##### 仿寫數組的Symbol.iterator 方法 ~~~ 1.for-of 循環的是循環的是可迭代協議,即就是符合迭代器函數的數據結構(有next 方法返回是具有done和value對象) ~~~ ~~~ Array.prototype[Symbol.iterator] = function () { let assemble = this, index = 0; return { next() { if (index > assemble.length - 1) { return { done: true, value: undefined }; } return { done: false, value: assemble[index++] }; } }; }; ~~~ >[danger] ##### 讓for of 可以迭代的對象 ~~~ 1.首先對象不具備被for of 循環，需要給對象增加Symbol.iterator 方法 ~~~ ~~~ Object.prototype[Symbol.iterator] = function values() { let assemble = this, keys = Object.keys(assemble).concat(Object.getOwnPropertySymbols(assemble)), index = 0; return { next() { if (index > keys.length - 1) { return { done: true, value: undefined }; } let key = keys[index++]; return { done: false, value: assemble[key] }; } }; }; ~~~ >[danger] ##### 類數組對象 ~~~ 1.直接將數組的Symbol.iterator方法給予類數組，也可也使用call bind apply ~~~ ~~~ let obj = { 0: 10, 1: 20, 2: 30, 3: 40, length: 4 }; obj[Symbol.iterator] = Array.prototype[Symbol.iterator]; for (let value of obj) { console.log(value); } ~~~