摘要:和循環(huán)遍歷器意義為四種數(shù)據(jù)集合,提供統(tǒng)一的接口機制來處理所有不同的數(shù)據(jù)結(jié)構(gòu)。調(diào)用函數(shù)返回一個遍歷器對象,代表函數(shù)的內(nèi)部指針。以后,每次調(diào)用遍歷器對象的方法,就會返回一個有著和兩個屬性的對象。
Iterator 和 for...of 循環(huán) Iterator(遍歷器)意義
為Array、Object、Map、Set四種數(shù)據(jù)集合,提供統(tǒng)一的接口機制來處理所有不同的數(shù)據(jù)結(jié)構(gòu) 。
任何數(shù)據(jù)結(jié)構(gòu),只要部署 Iterator 接口,就可以完成遍歷操作(即依次處理該數(shù)據(jù)結(jié) 構(gòu)的所有成員) 。
接口//遍歷器接口 interface Iterable{ [Symbol.iterator]():Iterator, } //指針對象 interface Iterator{ next(value?:any):IterationResult, } //返回結(jié)果 interface IterationResult{ value:any, done:boolean }
生成器
Generator 函數(shù)的調(diào)用方法與普通函數(shù)一樣,也是在函數(shù)名后面加上一對圓括號。不同 的是 ,
調(diào)用 Generator 函數(shù)后,該函數(shù)并不執(zhí)行 , 返回的也不是函數(shù)運行結(jié)果 , 而是一個指 向內(nèi) 部狀態(tài)
的指針對象, 也就是上一章介紹的遍歷器對象 Iterator Object ) 。
調(diào)用 Generator 函數(shù)返回一個遍歷器對象,代表 Generator 函數(shù)的內(nèi)部指針 。 以
后,每次調(diào)用遍歷器對象的 next 方法,就會返回 一個有著 value 和 done 兩個屬性的對象 。
value 屬性表示當前的內(nèi)部狀態(tài)的值,是 yield 語句后面那個表達式的值 : done 屬性是一個
布爾值,表示是否遍歷結(jié)束
為各種數(shù)據(jù)結(jié)構(gòu)提供一個統(tǒng)一 的、簡便的訪問接口;
使得 數(shù)據(jù)結(jié)構(gòu)的成員能夠按某種次序排列;
ES6 創(chuàng)造了 一種新的遍歷命令一for . . . of 循環(huán), Iterator 接口 主要供 for ... of 消費。
過程創(chuàng)建一個指針對象,指向當前數(shù)據(jù)結(jié)構(gòu)的起始位置 。 也就是說,遍歷器對象本質(zhì)上就是 一個指針對象 。
第一次調(diào)用指針對象的 next 方法,可以將指針指向數(shù)據(jù)結(jié)構(gòu)的第 一個成員 。
第二次調(diào)用指針對象的 next 方法,指針就指向數(shù)據(jù)結(jié)構(gòu)的第二個成員 。
不斷調(diào)用指針對象的 next 方法,直到它指向數(shù)據(jù)結(jié)構(gòu)的結(jié)束位置 。
原理每次調(diào)用 next 方法都會返回數(shù)據(jù)結(jié)構(gòu)的當前成員的信息。具體來說,就是返回一個包含 value 和 done 兩個屬性的對象。其中, value 屬性是當前成員的值, done 屬性是一個布爾值
與其他遍歷語法的比較以數(shù)組為例, JavaScript 提供了多種遍歷語法。最原始的寫法就是 for 循環(huán) 。
//麻煩 for (var index = 0; index < myArray.length ; index++) { console.log(myArray[index]); } // 不能跳出 myArray.forEach(function (value) { console.log(value) ; }) //被設(shè)計用來遍歷對象,而不是數(shù)組 for(let i in myArray){ console.log(i) } //簡潔,可跳出,統(tǒng)一接口 for(let i of myArray){ console.log(i) } //for ... of的等價寫法 let iterator = myArray[Symbol.iterator](); let item = iterator.next(); while(!item.done){ console.log(item.value); item = iterator.next(); }
這種寫法比較麻煩,因此數(shù)組提供了內(nèi)置的 forEach 方法。
這種寫法的問題在于,無法中途跳出 forEach 循環(huán), break 命令或 return 命令都不能 奏效
for ... in循環(huán)可以遍歷數(shù)組的鍵名。
for ... in 循環(huán)有幾個缺點。
數(shù)組的鍵名是數(shù)字,但是 for ... in 循環(huán)是以字符串作為鍵名,“0”、“ 1 ”、" 2 ”等。
for ... in 循環(huán)不僅可以遍歷數(shù)字鍵名,還會遍歷手動添加的其他鍵,甚至包括原 型鏈上的鍵。
某些情況下, for ... in 循環(huán)會以任意順序遍歷鍵名
總之, for . .. in 循環(huán)主要是為遍歷對象而設(shè)計的,不適用于遍歷數(shù)組。
for ... of 循環(huán)相比上面幾種做法有一些顯著的優(yōu)點。
有著同 for ... in 一樣的簡潔語法,但是沒有 for ... in 那些缺點。
不同于 forEach 方法 , 它可以與 break 、 continue 和 return 配合使用 。
提供了遍歷所有數(shù)據(jù)結(jié)構(gòu)的統(tǒng)一操作接口。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/101695.html
摘要:有兩個協(xié)議可迭代協(xié)議和迭代器協(xié)議。為了變成可迭代對象,一個對象必須實現(xiàn)或者它原型鏈的某個對象必須有一個名字是的屬性迭代器協(xié)議該迭代器協(xié)議定義了一種標準的方式來產(chǎn)生一個有限或無限序列的值。 ECMAScript 2015的幾個補充,并不是新的內(nèi)置或語法,而是協(xié)議。這些協(xié)議可以被任何遵循某些約定的對象來實現(xiàn)。有兩個協(xié)議:可迭代協(xié)議和迭代器協(xié)議。 可迭代協(xié)議 可迭代協(xié)議允許 JavaScri...
摘要:一個對象如果要有可被循環(huán)調(diào)用的接口,就必須在的屬性上部署遍歷器生成方法原型鏈上的對象具有該方法也可。阮大神案例上面代碼是一個類部署接口的寫法。屬性對應(yīng)一個函數(shù),執(zhí)行后返回當前對象的遍歷器對象。 最近看阮一峰阮大神的ES6,剛剛看到Iterator和for...of循環(huán)這一章,小作筆記跟大家略微分享一下,不足之處還望大家多多指正 Iterator(遍歷器)就是一種機制;任何數(shù)據(jù)結(jié)構(gòu)只要是...
摘要:文章內(nèi)容分兩部分前半部分為迭代器模式概念后半部分為中迭代器上半部分開始迭代器模式提供一種方法順序訪問一個聚合對象中的各個元素,而又不需要暴露該對象的內(nèi)部表示。下半部分開始的迭代器迭代器等同于遍歷器。執(zhí)行該函數(shù),會返回一個遍歷器對象。 showImg(https://segmentfault.com/img/bVbuyaZ?w=800&h=600); 文章內(nèi)容分兩部分: 前半部分為 迭...
摘要:到這里,源碼分析完了。但是,有兩個致命的特性的遍歷不能保證順序會遍歷所有可枚舉屬性,包括繼承的屬性。的遍歷順序依賴于執(zhí)行環(huán)境,不同執(zhí)行環(huán)境的實現(xiàn)方式可能會不一樣。 小時候,鄉(xiāng)愁是一枚小小的郵票, 我在這頭, 母親在那頭。 長大后,鄉(xiāng)愁是一張窄窄的船票, 我在這頭, 新娘在那頭。 后來啊, 鄉(xiāng)愁是一方矮矮的墳?zāi)梗?我在外頭, 母親在里頭。 而現(xiàn)在, 鄉(xiāng)愁是一灣淺淺的海峽, 我在這頭, 大...
摘要:舉個例子遍歷器生成函數(shù),作用就是返回一個遍歷器對象,方法返回一個對象,表示當前數(shù)據(jù)成員的信息。該對象本身也具有屬性,執(zhí)行后返回自身。 Iterator的作用 一是為各種數(shù)據(jù)結(jié)構(gòu),提供一個統(tǒng)一的、簡便的訪問接口;(統(tǒng)一)二是使得數(shù)據(jù)結(jié)構(gòu)的成員能夠按某種次序排列;(按序)三是ES6創(chuàng)造了一種新的遍歷命令for...of循環(huán),Iterator接口主要供for...of消費。舉個例子:遍歷器生...
閱讀 1897·2021-10-09 09:44
閱讀 3412·2021-09-28 09:35
閱讀 1415·2021-09-01 10:31
閱讀 1685·2019-08-30 15:55
閱讀 2747·2019-08-30 15:54
閱讀 956·2019-08-29 17:07
閱讀 1401·2019-08-29 15:04
閱讀 2030·2019-08-26 13:56