文章目錄

• • • 迭代器
    • Iterator
    • 用處 （需要自定義遍歷數(shù)據(jù)的時(shí)候）
    • 自定義 遍歷器 lterator 簡(jiǎn)單模擬values方法
    • Array Set Map 默認(rèn)迭代器接口
    • entries values keys 返回值
    • for of運(yùn)行機(jī)制

迭代器

迭代器是一種接口，為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問(wèn)機(jī)制。任何數(shù)據(jù)結(jié)構(gòu)只需要部署 Iterator 接口(對(duì)象里面的一個(gè)屬性)，就可以完成遍歷操作。

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

es6創(chuàng)造了一種新的遍歷命令 for…of 選好，iterator接口主要提供 for…of消費(fèi)

原生具備 iterator 接口的數(shù)據(jù)（可用for…of ）

Array Arguments Set Map String TypedArray NodeList

工作原理

• 創(chuàng)建一個(gè)指針對(duì)象，指向當(dāng)前數(shù)據(jù)結(jié)構(gòu)的起始位置
• 第一次調(diào)用對(duì)象的 next() 方法，指針自動(dòng)指向數(shù)據(jù)結(jié)構(gòu)的第一個(gè)成員
• 接下來(lái)不斷調(diào)用 next() 方法，指針一直往后移動(dòng)，直至指向最后一個(gè)成員
• 每調(diào)用 next 方法返回一個(gè)包含 value 和 done 屬性的對(duì)象

Iterator

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

iterator.next()

arr.entries 也返回了遍歷器

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

arr.keys

let kes = arr.keys()

kes.next()

用處 （需要自定義遍歷數(shù)據(jù)的時(shí)候）

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

實(shí)現(xiàn)

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

自定義 遍歷器 lterator 簡(jiǎn)單模擬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 默認(rèn)迭代器接口

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

entries values keys 返回值

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

for of運(yùn)行機(jī)制

for of循環(huán)首先會(huì)調(diào)用 arr 數(shù)組中 Symbol.iterator 屬性對(duì)象的函數(shù),就會(huì)獲 取到該數(shù)組對(duì)應(yīng)的迭代器，接下來(lái) iterator.next()被調(diào)用，迭代器結(jié)果對(duì)象 的 value 屬性會(huì)被放入到變量 i 中。數(shù)組中的數(shù)據(jù)項(xiàng)會(huì)依次存入到變量 i 中，直到迭代器結(jié)果對(duì)象中的 done 屬性變成 true 為止，循環(huán)就結(jié)束。

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。