文章目錄

• • • 迭代器
    • Iterator
    • 用處 （需要自定義遍歷數據的時候）
    • 自定義 遍歷器 lterator 簡單模擬values方法
    • Array Set Map 默認迭代器接口
    • entries values keys 返回值
    • for of運行機制

迭代器

迭代器是一種接口，為各種不同的數據結構提供統一的訪問機制。任何數據結構只需要部署 Iterator 接口(對象里面的一個屬性)，就可以完成遍歷操作。

不能訪問到 遍歷器對象的 就不能使用擴展運算符 …arr
訪問遍歷器對象: arr[Symbol.iterator]()
所有擁有[Symbol.iterator]()的對象被稱為可迭代的。
迭代器模式：提供一種方法順序訪問一個集合的各個元素，而又不暴露該 對象的內部表示。

es6創造了一種新的遍歷命令 for…of 選好，iterator接口主要提供 for…of消費

原生具備 iterator 接口的數據（可用for…of ）

Array Arguments Set Map String TypedArray NodeList

工作原理

• 創建一個指針對象，指向當前數據結構的起始位置
• 第一次調用對象的 next() 方法，指針自動指向數據結構的第一個成員
• 接下來不斷調用 next() 方法，指針一直往后移動，直至指向最后一個成員
• 每調用 next 方法返回一個包含 value 和 done 屬性的對象

Iterator

let arr = ['xx','yy','zz']; // 獲取單前數組的iterator對象 let iterator = arr[Symbol.iterator]()

iterator.next()

arr.entries 也返回了遍歷器

let arrEn = arr.entries() arrEn.next()

arr.keys

let kes = arr.keys()

kes.next()

用處 （需要自定義遍歷數據的時候）

const banji = {name:'一級',stus:['張三1號','張三2號','張三3號','張三4號','張三5號'] } // 遍歷這個對象 for..of // 每一次遍歷返回的是 stus 成員 // 不能直接操作屬性 //banji.stus.forEach()

實現

const banji = {name:'一級',stus:['張三1號','張三2號','張三3號','張三4號','張三5號'],[Symbol.iterator](){ //添加 iterator 接口let index = 0let _this = thisreturn {next(){let done = index >= _this.stus.length //是否結束遍歷let value = _this.stus[index++]return {value,done}}}} }for(let v of banji){console.log(v) }

自定義 遍歷器 lterator 簡單模擬values方法

Array.prototype.myLterator = function(){let i = 0;let _this = this;return {next(){const done = i >= _this .length;const value = done ? undefined: _this[i++]return {value,done}}} } arr = ['xx','yy','zz'] let myL = arr.myLterator() myL.next()

Array Set Map 默認迭代器接口

Array 的默認迭代器接口[Symblo.iterator]是 values：
Set 的默認迭代器接口[Symblo.iterator]是 values：
Map 的默認迭代器接口[Symblo.iterator]是 entries：

entries values keys 返回值

entries()：返回一個包含鍵值對的迭代器；
values()：返回一個包含集合中的值的迭代器；
keys()：返回一個包含集合中的鍵的迭代器；

for of運行機制

for of循環首先會調用 arr 數組中 Symbol.iterator 屬性對象的函數,就會獲 取到該數組對應的迭代器，接下來 iterator.next()被調用，迭代器結果對象 的 value 屬性會被放入到變量 i 中。數組中的數據項會依次存入到變量 i 中，直到迭代器結果對象中的 done 屬性變成 true 為止，循環就結束。

let arr = [1,2,3] for(let i of arr){console.log(i);// 就是調用了 arr 的遍歷器// arr.values().next().done && i = arr.values().next().value }

總結

以上是生活随笔為你收集整理的es6 迭代器(遍历器)Iterator 自定义遍历器 lterator/简单模拟values方法 for of运行机制 Array/Set/Map默认迭代器接口 对象设置迭代器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。