JavaScript設(shè)計模式之迭代者模式詳情
前言
迭代器設(shè)計模式是指提供一個方法去訪問一個有序復(fù)雜數(shù)據(jù),這些數(shù)據(jù)在內(nèi)部有可能會用復(fù)雜的結(jié)構(gòu)進(jìn)行存儲,我們可以通過方法進(jìn)行訪問這種數(shù)據(jù)的內(nèi)部的每一個元素,使用該數(shù)據(jù)無需知道是如何拿到的,只要能夠進(jìn)行操作即可
迭代器設(shè)計模式在生活中的運用
在生活中我們可以用收音機來表示迭代器設(shè)計模式,用戶搜索到廣播電臺,然后從某個廣播電臺開始,通過向前向后的按鈕進(jìn)行控制遍歷收聽所有的廣播頻道,我們也可以以音樂播放器為例子,通過音樂播放器的上一首下一首按鈕進(jìn)行控制播放瀏覽的音樂,它們也可以說是提供了一個迭代器接口,進(jìn)行遍歷每一個頻道或歌曲
迭代器設(shè)計模式在業(yè)務(wù)上的應(yīng)用
迭代器設(shè)計模式在業(yè)務(wù)中分為內(nèi)部迭代器和外部迭代器
內(nèi)部迭代器
內(nèi)部迭代器我們常見的是數(shù)組的forEach方法,內(nèi)部迭代器一般都有自己的規(guī)則,我們需要按照他們特定的要求進(jìn)行使用,缺點也顯而易見,由于迭代規(guī)則已經(jīng)約定好了,我們必須按照他們所約定的規(guī)則進(jìn)行使用,所以我們?nèi)绻霈F(xiàn)某些特性需求,內(nèi)部迭代器則無法滿足
let?arr?=?[{?name:?"前端"?},?{?name:?'后端'?},?{?name:?'運維'?}];
//通過forEach方法對數(shù)據(jù)進(jìn)行迭代,forEach方法接收一個回調(diào)函數(shù),該回調(diào)函數(shù)中接收三個參數(shù),第一個是當(dāng)前的循環(huán)的每一項,第二個是當(dāng)前索引,第三個是當(dāng)前迭代的總數(shù)組,這就是內(nèi)部迭代器的規(guī)則
????????arr.forEach(function(res,index,arr){
????????????console.log(res.name);
????????})
外部迭代器
外部迭代器必須顯式的進(jìn)行迭代,增加了調(diào)用的復(fù)雜度同時也相對的增加了迭代器的靈活性,可以手動的進(jìn)行操控迭代過程以及迭代順序,將迭代相關(guān)的數(shù)據(jù)暴露出來進(jìn)行處理后返回
我們來手寫一個外部迭代器方法,里面擁有一個標(biāo)記index參數(shù),用于獲取下一次數(shù)據(jù),擁有一個next方法,該方法會進(jìn)行對index標(biāo)記進(jìn)行自增后然后返回一個對象,對象中擁有倆個參數(shù)value是代表著當(dāng)前標(biāo)記下的數(shù)據(jù),done是當(dāng)前數(shù)據(jù)是否還能繼續(xù)往下調(diào)用next方法的標(biāo)記,最后在返回一個全新的處理過后的數(shù)據(jù),通過調(diào)用next方法可以看到當(dāng)前的項的數(shù)據(jù)
const?arr?=?[{name:"javaScript"},?{name:"Go"},{name:"Node.js"}];
????????function?Iterator(data)?{
????????????let?index?=?0;
????????????function?next(){
????????????????index++;
????????????????return?{
????????????????????value:?data[index],
????????????????????done:?data.length?==?index
????????????????}
????????????};
????????????return?{
????????????????next
????????????}
????????}使用外部迭代器:
??????const?iter?=?Iterator(arr); ????????console.log(iter.next()); ????????console.log(iter.next()); ????????console.log(iter.next());
迭代器設(shè)計模式能夠可以讓我們更方便的且有規(guī)矩的進(jìn)行訪問復(fù)合數(shù)據(jù)的每一項,也可以通過迭代器進(jìn)行完成一些流線式操作
到此這篇關(guān)于JavaScript設(shè)計模式之迭代者模式詳情的文章就介紹到這了,更多相關(guān)JavaScript迭代模式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
一文帶你掌握J(rèn)avaScript中Moment.js如何操作日期和時間
Moment.js是一個極其強大的JavaScript庫,專門用于解析、驗證、操作和顯示日期和時間,下面就跟隨小編一起學(xué)習(xí)一下Moment.js的具體使用吧2024-01-01
Javascript中的this,bind和that使用實例
這篇文章主要介紹了Javascript中的this,bind和that使用實例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12

