什么是迭代器
創(chuàng)新互聯(lián)是一家專業(yè)提供北海街道企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、外貿(mào)營銷網(wǎng)站建設(shè)、H5開發(fā)、小程序制作等業(yè)務(wù)。10年已為北海街道眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。
迭代器就是為實現(xiàn)對不同集合進(jìn)行統(tǒng)一遍歷操作的一種機(jī)制,只要給需要遍歷的數(shù)據(jù)結(jié)構(gòu)部署Iterator接口,通過調(diào)用該接口,或者使用消耗該接口的API實現(xiàn)遍歷操作。
迭代器模式
在接觸迭代器之前,一起先了解什么是迭代器模式,回想一下我們生活中的事例。我們在參觀景區(qū)需要買門票的時候,售票員需要做的事情,他會對排隊購票的每一個人依次進(jìn)行售票,對普通成人,對學(xué)生,對兒童都依次售票。售票員需要按照一定的規(guī)則,一定順序把參觀人員一個不落的售完票,其實這個過程就是遍歷,對應(yīng)的就是計算機(jī)設(shè)計模式中的迭代器模式。迭代器模式,提供一種方法順序訪問一個聚合對象中的各種元素,而又不暴露該對象的內(nèi)部表示。
為什么要有迭代器
回憶在我們的javascript中,可遍歷的結(jié)構(gòu)以及方式有很多。JavaScript 原有的表示“集合”的數(shù)據(jù)結(jié)構(gòu),主要是數(shù)組(Array)和對象(Object),ES6 又添加了Map和Set,這樣就有了四種數(shù)據(jù)集合,而遍歷這四種結(jié)構(gòu)都有不同的方法。舉個栗子,服務(wù)端提供數(shù)據(jù)給前端,前端進(jìn)行數(shù)據(jù)可視化工作,對數(shù)據(jù)進(jìn)行遍歷展示使用的for,但是由于業(yè)務(wù)的變化,使得后端返回的數(shù)據(jù)結(jié)構(gòu)發(fā)生變化,返回對象或者是set,map,導(dǎo)致前端遍歷代碼大量重寫。而迭代器的目的就是要標(biāo)準(zhǔn)化迭代操作。
如何部署迭代器接口
ES6為迭代器引入了一個隱式的標(biāo)準(zhǔn)化接口。Javascript許多內(nèi)建的數(shù)據(jù)結(jié)構(gòu),例如Array、Map、Set、String、TypedArray、函數(shù)的 arguments 對象、NodeList 對象都具備 Iterator 接口??梢酝ㄟ^在控制臺打印一個Array實例,查看其原型上具有一個Symbol.iterator屬性(Symbol.iterator其實是Symbol('Symbol.iterator')的簡寫,屬性名是Symbol類型代表著這個屬性的唯一以及不可重寫覆蓋),它就是迭代器函數(shù),執(zhí)行這個函數(shù),就會返回一個迭代器對象。
雖然Javascript許多內(nèi)建的數(shù)據(jù)結(jié)構(gòu)已經(jīng)實現(xiàn)了該接口,還有些結(jié)構(gòu)是沒有迭代器接口的(比如對象),那怎么辦,我們需要寫迭代器,那么就需要知道迭代器是如何工作的。下面代碼實現(xiàn)的一個簡單迭代器:
//迭代器就是一個函數(shù),也叫迭代器生成函數(shù) function Iterator(o){ let curIndex = 0; let next = () => { return { value: o[curIndex], done: o.length == ++curIndex } } //返回迭代對象,該對象有next方法 return { next } } let arr = [1,2] let oIt = Iterator(arr) oIt.next();//{value:1,done:false} oIt.next();//{value:2,done:false} oIt.next();// {value: undefined, done: true} oIt.next();// {value: undefined, done: true}
調(diào)用迭代器函數(shù),返回一個對象,該對象就是迭代器對象,對象上擁有next方法,每一次調(diào)用next方法,都會返回數(shù)據(jù)結(jié)構(gòu)的當(dāng)前成員的信息。具體來說,就是返回一個包含value和done兩個屬性的對象。其中,value屬性是當(dāng)前成員的值,done屬性是一個布爾值,表示遍歷是否結(jié)束。
next()迭代
在上面調(diào)用next方法的栗子中,需要注意的是:
在獲得數(shù)組最后一位元素的時候,迭代器不會報告done:true,這時候需要再次調(diào)用next(),越過數(shù)組結(jié)尾的值,才能得到完成信號done:true。
通常情況下,在已經(jīng)迭代完畢的迭代器對象上繼續(xù)調(diào)用next方法會繼續(xù)返回{value: undefined, done: true}而不會報錯。
可選的return()和throw()
遍歷器對象除了必須具有next方法,還可以具有可選的return方法和throw方法。
return方法被定義為向迭代器發(fā)送一個信號,表明不會在消費者中再提取出任何值。
Object.prototype[Symbol.iterator] = function () { let curIndex = 0; let next = () => { return { value: this[curIndex], done: this.length == curIndex++ } } return { next, return() { console.log('執(zhí)行return啦') return {} } } } let obj = { 0: 'a', 1: 'b', 2: 'c' } //自動調(diào)用---遇到對迭代器消耗提前終止的條件 for (let item of obj) { if (item == 'c') { break } else { console.log(item) } } //自動調(diào)用---拋出異常 for (let item of obj) { if (item == 'c') { throw new Error('Errow') } else { console.log(item) } } //手動調(diào)用 let ot = obj[Symbol.iterator]() console.log(ot.return())
上面代碼中,throw方法的執(zhí)行可以在某種情況下自動被調(diào)用,也可以手動調(diào)用。throw方法主要向迭代器報告一個異常/錯誤,一般配合生成器使用。
迭代器分類
迭代器分為內(nèi)部迭代器和外部迭代器。
迭代器使用
實現(xiàn)迭代器接口后,如何進(jìn)行使用?
let arr = ['a', 'b']; let iter = arr[Symbol.iterator](); iter.next() // { value: 'a', done: false } iter.next() // { value: 'b', done: false } iter.next() // { value: undefined, done: true }
除了像上述代碼這樣單獨使用外,實現(xiàn)該接口的目的,就是為所有數(shù)據(jù)結(jié)構(gòu),提供一種統(tǒng)一的訪問機(jī)制。實現(xiàn)了該接口,就可以調(diào)用ES6中新增的通過調(diào)用Iterator 接口實現(xiàn)的API,例如for..of就是典型的消耗迭代器的API。下面具體看看for..of的實現(xiàn)原理:
let arr = [1,2,3]; for(let num of arr){ console.log(num); }
輸出結(jié)果為:1,2,3
for-of 循環(huán)首先會調(diào)用 arr 數(shù)組中Symbol.iterator 屬性對象的函數(shù),就會獲取到該數(shù)組對應(yīng)的迭代器,接下來 iterator.next()被調(diào)用,迭代器結(jié)果對象的 value 屬性會被放入到變量 num 中。數(shù)組中的數(shù)據(jù)項會依次存入到變量num 中,直到迭代器結(jié)果對象中的 done 屬性變成 true 為止,循環(huán)就結(jié)束。
for-of 循環(huán)完全刪除了for循環(huán)中追蹤集合索引的需要,更能專注于操作集合內(nèi)容。
ES6 規(guī)定,默認(rèn)的 Iterator 接口部署在數(shù)據(jù)結(jié)構(gòu)的Symbol.iterator屬性,或者說,一個數(shù)據(jù)結(jié)構(gòu)只要具有Symbol.iterator屬性,就可以認(rèn)為是“可遍歷的”(iterable)。就可以使用上述默認(rèn)會調(diào)用Iterator函數(shù)的API,而如果該數(shù)據(jù)結(jié)構(gòu)沒有提供實現(xiàn)這個接口(例如對象)又該怎么樣達(dá)到最大化的互操作性呢?那么就可以自己構(gòu)建符合這個標(biāo)準(zhǔn)的迭代器。
下面是一個為對象添加 Iterator 接口的例子:
let obj = { 0: 'a', 1: 'b', 2: 'c', length: 3, [Symbol.iterator]: function () { let curIndex = 0; let next = () => { return { value: this[curIndex], done: this.length == curIndex++ } } return { next } } } for (let item of obj) { console.log(item) }
如果把該對象的[Symbol.iterator]屬性刪除,那么就會報錯Uncaught TypeError: obj is not iterable,告訴我們obj是不可被遍歷。
除了上面展示的for..of循環(huán)可以一個一個的消耗迭代器之外,還有其它ES6結(jié)構(gòu)也可以用來消耗迭代器。例如spread運算符:
function f(x, y, z) { console.log(x, y, z) } f(...[2, 3, 1])
以及結(jié)構(gòu)賦值也可以部分或者完全消耗一個迭代器:
let arr = [1, 2, 3, 4, 5] var it = arr[Symbol.iterator]() //部分消耗 var [x, y] = it console.log(x, y) //打印1 2 //完全消耗 var [y, ...z] = it console.log(y, z) //打印3 [4,5]
JavaScript 默認(rèn)產(chǎn)生迭代器的API
產(chǎn)生迭代器對象,我們可以通過定義迭代器函數(shù)來生產(chǎn)迭代器對象,還可以調(diào)用JavaScript在內(nèi)置數(shù)據(jù)結(jié)構(gòu)中定義好的迭代器函數(shù)來生產(chǎn)。除此之外,對于數(shù)組以及ES6新增的幾個新的數(shù)據(jù)結(jié)構(gòu)MAP、Set,這些集合不僅本身已部署迭代器接口,還提供了API方法來產(chǎn)生迭代器對象。ES6 的數(shù)組、Set、Map 都部署了以下三個方法,調(diào)用后都返回遍歷器對象。
數(shù)組的迭代器使用實例
下面是數(shù)組的迭代器接口使用:
let arr = [1,2,3,4] let arrEntires = arr.entries() arrEntires.next() //{value: [0, 1], done: false} let arrKeys = arr.keys() //對于數(shù)組,索引值就是鍵值 arrKeys.next() //{value: 0, done: false} let arrValues = arr.values() arrValues.next() //{value: 1, done: false}
下面代碼可以看出數(shù)組的for…of 遍歷的默認(rèn)迭代器接口是values
for(let item of [1,2,3]) { console.log(item)// [1,2,3] }
Set的迭代器使用實例
下面是Set的迭代器接口使用:
let set = new Set([1,2,3,4]) let setEntires = set.entries()//對于 Set,鍵名與鍵值相同。 setEntires.next() //{value: [1, 1], done: false} let setKeys = set.keys() setKeys.next() //{value: 1, done: false} let setValues = set.values() setValues.next() //{value: 1, done: false}
如下可以看出Set的默認(rèn)迭代器接口[Symblo.iterator]是values
for(let item of new Set([1,2,3,4])){ console.log(item)// [1,2,3,4] }
Map的迭代器使用實例
下面是Map的迭代器接口使用:
let map = new Map([[1,2],[3,4]]) let mapEntires = map.entries() mapEntires.next() //{value: [1, 2], done: false} let mapKeys = map.keys() mapKeys.next() //{value: 1, done: false} let mapValues = map.values() mapValues.next() //{value: 2, done: false}
Map 的默認(rèn)迭代器接口[Symblo.iterator]是 entries;
for(let item of new Map([[1,2],[3,4]])){ console.log(item)// [1,2] [3,4] }
為什么對象沒有內(nèi)置迭代器接口
在上面中,我們提及到對象沒有設(shè)置可迭代的默認(rèn)方法,是不可迭代對象,表現(xiàn)為其沒有[Symbol.iterator]屬性。雖然對象對我們來說,是鍵值存儲的一種方式,盡管沒有 map 那么好,key只可以是字符串,但是有的時候?qū)ο笠彩切枰坏?,但是為什么不給對象設(shè)置可迭代的默認(rèn)方法?
原因是因為,對于對象的遍歷,需要考慮到遍歷是對象自身的屬性還是遍歷對象自身上的可枚舉屬性還是遍歷原型上的屬性還是遍歷原型上的可枚舉屬性還是連[Symbol.iterator]也希望遍歷出來。鑒于各方意見不一,并且現(xiàn)有的遍歷方式可以滿足,于是標(biāo)準(zhǔn)組沒有將[Symbol.iterator]加入。
生成迭代器對象的方法
在上面,我們嘗試過了為一個對象添加了Symbol.iterator方法,該方法就是該對象的遍歷器生成函數(shù),調(diào)用該函數(shù)會返回該對象的一個遍歷器對象。
除了上面在為對象添加遍歷器生成函數(shù)的這種根據(jù)迭代器協(xié)議直接生成迭代器對象的方式外,還有什么方式可以生成迭代器對象呢?有,它是一種特殊的函數(shù),叫生成器。
var it = {}; it[Symbol.iterator] = function* () { yield 1; yield 2; yield 3; }; //可以被...遍歷,說明已經(jīng)部署成功 console.log([...it])// [1, 2, 3] let myIterator = it[Symbol.iterator]() console.log(myIterator.next())//{value: 1, done: false} console.log(myIterator.next())//{value: 2, done: false} console.log(myIterator.next())//{ value: 3, done: false } console.log(myIterator.next())//{ value: undefined, done: true }
上面代碼中,生成器函數(shù)沒有過多的代碼,只需要使用關(guān)鍵字yeild來返回每次next()的值。
生成器是一種特殊的函數(shù)形式,生成器函數(shù)的聲明語法為:
function *bar(){ // ... }
*前后可以有空格也可以沒有空格。生成器函數(shù)的聲明雖然和普通函數(shù)有區(qū)別,但是執(zhí)行和普通函數(shù)一樣,一樣可以傳參數(shù)。那它們的主要區(qū)別是什么呢?
函數(shù)是一段執(zhí)行特定任務(wù)的代碼塊,所以函數(shù)執(zhí)行,相當(dāng)于這一段代碼塊被執(zhí)行。函數(shù)開始執(zhí)行,在它執(zhí)行完之前不會被打斷,這段代碼塊將被全部執(zhí)行完。在ES6引入生成器之前函數(shù)的確是這樣執(zhí)行的,但是前面介紹到外部迭代器可以相比內(nèi)部迭代器對迭代過程進(jìn)行控制,什么時候需要消耗,迭代器對象再next一下即可。類似迭代過程,函數(shù)的執(zhí)行過程一樣可以控制,函數(shù)可以不需要一次性執(zhí)行完畢。
生成器函數(shù)的執(zhí)行會返回一個迭代器對象來控制該生成器函數(shù)執(zhí)行其代碼。因此,函數(shù)的執(zhí)行變得可控。還可以在生成器中使用新的關(guān)鍵字yield,用來標(biāo)示一個暫停點。迭代器除了可以控制函數(shù)執(zhí)行外,還可以在每一次暫停中雙向傳遞信息,暫停的時候生成器函數(shù)會返回一個值,恢復(fù)執(zhí)行的時候迭代器可以通過向next方法傳參向函數(shù)內(nèi)部傳遞一個值。可以理解為多次傳參,多個返回值。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)站題目:JavaScript迭代器的含義及用法
轉(zhuǎn)載注明:http://muchs.cn/article20/ghjcjo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開發(fā)、品牌網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、服務(wù)器托管、營銷型網(wǎng)站建設(shè)、做網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)