Iterator 和 for...of 循環

Drinkey 發布于2019-08-23 15:13 / 1560人閱讀

摘要：和循環遍歷器意義為四種數據集合，提供統一的接口機制來處理所有不同的數據結構。調用函數返回一個遍歷器對象，代表函數的內部指針。以后，每次調用遍歷器對象的方法，就會返回一個有著和兩個屬性的對象。

Iterator 和 for...of 循環 Iterator（遍歷器）意義

為Array、Object、Map、Set四種數據集合，提供統一的接口機制來處理所有不同的數據結構。

任何數據結構，只要部署 Iterator 接口，就可以完成遍歷操作（即依次處理該數據結構的所有成員）。

接口

//遍歷器接口 
interface Iterable{
    [Symbol.iterator]():Iterator,
}
//指針對象
interface Iterator{
    next(value?:any):IterationResult,
}
//返回結果
interface IterationResult{
    value:any,
    done:boolean
}

生成器
Generator 函數的調用方法與普通函數一樣，也是在函數名后面加上一對圓括號。不同的是，
調用 Generator 函數后，該函數并不執行，返回的也不是函數運行結果，而是一個指向內部狀態
的指針對象，也就是上一章介紹的遍歷器對象 Iterator Object ）。
調用 Generator 函數返回一個遍歷器對象，代表 Generator 函數的內部指針。以
后，每次調用遍歷器對象的 next 方法，就會返回一個有著 value 和 done 兩個屬性的對象。
value 屬性表示當前的內部狀態的值，是 yield 語句后面那個表達式的值： done 屬性是一個
布爾值，表示是否遍歷結束

作用

為各種數據結構提供一個統一的、簡便的訪問接口；

使得數據結構的成員能夠按某種次序排列；

ES6 創造了一種新的遍歷命令一for . . . of 循環， Iterator 接口主要供 for ... of 消費。

過程

創建一個指針對象，指向當前數據結構的起始位置。也就是說，遍歷器對象本質上就是一個指針對象。

第一次調用指針對象的 next 方法，可以將指針指向數據結構的第一個成員。

第二次調用指針對象的 next 方法，指針就指向數據結構的第二個成員。

不斷調用指針對象的 next 方法，直到它指向數據結構的結束位置。

原理

每次調用 next 方法都會返回數據結構的當前成員的信息。具體來說，就是返回一個包含 value 和 done 兩個屬性的對象。其中， value 屬性是當前成員的值， done 屬性是一個布爾值

與其他遍歷語法的比較

以數組為例， JavaScript 提供了多種遍歷語法。最原始的寫法就是 for 循環。

//麻煩
for (var index = 0; index < myArray.length ; index++) { 
    console.log(myArray[index]);  
} 
// 不能跳出
myArray.forEach(function (value) {
    console.log(value) ; 
})

//被設計用來遍歷對象，而不是數組
for(let i in myArray){
    console.log(i)
}
//簡潔，可跳出，統一接口
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();
}

這種寫法比較麻煩，因此數組提供了內置的 forEach 方法。

這種寫法的問題在于，無法中途跳出 forEach 循環， break 命令或 return 命令都不能奏效

for ... in循環可以遍歷數組的鍵名。

for ... in 循環有幾個缺點。

數組的鍵名是數字，但是 for ... in 循環是以字符串作為鍵名，“0”、“ 1 ”、＂ 2 ”等。

for ... in 循環不僅可以遍歷數字鍵名，還會遍歷手動添加的其他鍵，甚至包括原型鏈上的鍵。

某些情況下， for ... in 循環會以任意順序遍歷鍵名

總之， for . .. in 循環主要是為遍歷對象而設計的，不適用于遍歷數組。

for ... of 循環相比上面幾種做法有一些顯著的優點。

有著同 for ... in 一樣的簡潔語法，但是沒有 for ... in 那些缺點。

不同于 forEach 方法，它可以與 break 、 continue 和 return 配合使用。

提供了遍歷所有數據結構的統一操作接口。

GPU云服務器云服務器 for...of Iterator Iterator模式 for循環和foreach

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101695.html

ES6語法之可迭代協議和迭代器協議

摘要：有兩個協議可迭代協議和迭代器協議。為了變成可迭代對象，一個對象必須實現或者它原型鏈的某個對象必須有一個名字是的屬性迭代器協議該迭代器協議定義了一種標準的方式來產生一個有限或無限序列的值。 ECMAScript 2015的幾個補充，并不是新的內置或語法，而是協議。這些協議可以被任何遵循某些約定的對象來實現。有兩個協議：可迭代協議和迭代器協議。可迭代協議可迭代協議允許 JavaScri...

sarva 2019-08-22 11:23 評論0 收藏0
ES6中的Iterator和for...of循環那些事

摘要：一個對象如果要有可被循環調用的接口，就必須在的屬性上部署遍歷器生成方法原型鏈上的對象具有該方法也可。阮大神案例上面代碼是一個類部署接口的寫法。屬性對應一個函數，執行后返回當前對象的遍歷器對象。最近看阮一峰阮大神的ES6，剛剛看到Iterator和for...of循環這一章，小作筆記跟大家略微分享一下，不足之處還望大家多多指正 Iterator（遍歷器）就是一種機制；任何數據結構只要是...

OpenDigg 2019-08-21 10:44 評論0 收藏0
JavaScript 設計模式（五）：迭代器模式

摘要：文章內容分兩部分前半部分為迭代器模式概念后半部分為中迭代器上半部分開始迭代器模式提供一種方法順序訪問一個聚合對象中的各個元素，而又不需要暴露該對象的內部表示。下半部分開始的迭代器迭代器等同于遍歷器。執行該函數，會返回一個遍歷器對象。 showImg(https://segmentfault.com/img/bVbuyaZ?w=800&h=600); 文章內容分兩部分：前半部分為迭...

zhou_you 2019-08-23 18:26 評論0 收藏0
lodash源碼分析之compact中的遍歷

摘要：到這里，源碼分析完了。但是，有兩個致命的特性的遍歷不能保證順序會遍歷所有可枚舉屬性，包括繼承的屬性。的遍歷順序依賴于執行環境，不同執行環境的實現方式可能會不一樣。小時候，鄉愁是一枚小小的郵票，我在這頭，母親在那頭。長大后，鄉愁是一張窄窄的船票，我在這頭，新娘在那頭。后來啊，鄉愁是一方矮矮的墳墓，我在外頭，母親在里頭。而現在，鄉愁是一灣淺淺的海峽，我在這頭，大...

dmlllll 2019-08-22 11:20 評論0 收藏0
ES6之Iterator、Generator

摘要：舉個例子遍歷器生成函數，作用就是返回一個遍歷器對象，方法返回一個對象，表示當前數據成員的信息。該對象本身也具有屬性，執行后返回自身。 Iterator的作用一是為各種數據結構，提供一個統一的、簡便的訪問接口；(統一)二是使得數據結構的成員能夠按某種次序排列；（按序）三是ES6創造了一種新的遍歷命令for...of循環，Iterator接口主要供for...of消費。舉個例子：遍歷器生...

tuomao 2019-08-20 18:03 評論0 收藏0