ES2015 迭代器模式 Iterator

2021-10-10 17:58:57 字數 1338 閱讀 8494

設計模式：迭代器模式

// 迭代器設計模式


// 場景：你和我協同開發乙個任務清單應用


// 我的** *****====


const todolist =


// 你的** *****====


for(


const item of todolist.life)


for(


const item of todolist.study)
如果我需要在我的todolist 資料列表裡新增資料時，你的**就需要作出相應的更改，對於呼叫來說，**耦合度太高

如下：

// 迭代器設計模式


// 場景：你和我協同開發乙個任務清單應用


// 我的** *****====


const todolist =


// 你的** *****====


for(


const item of todolist.life)


for(


const item of todolist.study)


for(


const item of todolist.game)
如何解決：

如果我的**能夠對外統一提供乙個遍歷的介面

對於呼叫者而已，就不用去關心它內部的資料結構，也不用擔心結構的改變

我們可以自己寫乙個方法來實現：

// 迭代器設計模式


// 場景：你和我協同開發乙個任務清單應用


// 我的** *****====


const todolist =}}


// 你的** *****====


// 不需要關注資料，只管呼叫


todolist.


each


(function


(item)


)
其實實現可迭代介面也是相同的道理

用迭代器的方法實現：

// 迭代器設計模式


// 場景：你和我協同開發乙個任務清單應用


// 我的** *****====


const todolist =}}


}}
迭代器的核心 就是對外提供統一遍歷介面，讓外部不用去擔心內部的資料結構是怎麼樣的

這裡展示的each方法只適用於這裡展示的陣列結構

而es2015種的迭代器 是從語言層面去實現的迭代器模式，所以說它適用於任何資料結構，只要實現了iterable 介面，那我們就可以實現使用for…of 遍歷物件

ES2015 延展操作符 解構

延展操作符 let showme name,age 的年齡是 let me daichen 18 alert showme me 此時認為me 就是 name引數 let showme name,age 的年齡是 let me daichen 18 alert showme me 此時me陣列裡的數...

解析ES2015中的靜態方法

es2015引入的靜態方法 static關鍵字 和我之前文章中解析的class和constructor一樣，都只是一種語法糖，本質上，與es5中的函式沒有什麼區別。注意，es2015並沒有對靜態屬性的定義。從es2015開始，我們可以使用static關鍵字定義乙個類的靜態方法 class foo f...

解析ES2015中的物件繼承

從es2015開始，我們可以使用extends關鍵字實現物件繼承，使用super關鍵字指向父物件。比如下面的es2015 class fooshow class barextends fooshow var bar newbar 1 jason bar.show 上面 的輸出結果為 子類 父類id ...