JavaScript設(shè)計(jì)模式之迭代者模式詳情
前言
迭代器設(shè)計(jì)模式是指提供一個(gè)方法去訪問(wèn)一個(gè)有序復(fù)雜數(shù)據(jù),這些數(shù)據(jù)在內(nèi)部有可能會(huì)用復(fù)雜的結(jié)構(gòu)進(jìn)行存儲(chǔ),我們可以通過(guò)方法進(jìn)行訪問(wèn)這種數(shù)據(jù)的內(nèi)部的每一個(gè)元素,使用該數(shù)據(jù)無(wú)需知道是如何拿到的,只要能夠進(jìn)行操作即可
迭代器設(shè)計(jì)模式在生活中的運(yùn)用
在生活中我們可以用收音機(jī)來(lái)表示迭代器設(shè)計(jì)模式,用戶搜索到廣播電臺(tái),然后從某個(gè)廣播電臺(tái)開始,通過(guò)向前向后的按鈕進(jìn)行控制遍歷收聽(tīng)所有的廣播頻道,我們也可以以音樂(lè)播放器為例子,通過(guò)音樂(lè)播放器的上一首下一首按鈕進(jìn)行控制播放瀏覽的音樂(lè),它們也可以說(shuō)是提供了一個(gè)迭代器接口,進(jìn)行遍歷每一個(gè)頻道或歌曲
迭代器設(shè)計(jì)模式在業(yè)務(wù)上的應(yīng)用
迭代器設(shè)計(jì)模式在業(yè)務(wù)中分為內(nèi)部迭代器和外部迭代器
內(nèi)部迭代器
內(nèi)部迭代器我們常見(jiàn)的是數(shù)組的forEach方法,內(nèi)部迭代器一般都有自己的規(guī)則,我們需要按照他們特定的要求進(jìn)行使用,缺點(diǎn)也顯而易見(jiàn),由于迭代規(guī)則已經(jīng)約定好了,我們必須按照他們所約定的規(guī)則進(jìn)行使用,所以我們?nèi)绻霈F(xiàn)某些特性需求,內(nèi)部迭代器則無(wú)法滿足
let?arr?=?[{?name:?"前端"?},?{?name:?'后端'?},?{?name:?'運(yùn)維'?}]; //通過(guò)forEach方法對(duì)數(shù)據(jù)進(jìn)行迭代,forEach方法接收一個(gè)回調(diào)函數(shù),該回調(diào)函數(shù)中接收三個(gè)參數(shù),第一個(gè)是當(dāng)前的循環(huán)的每一項(xiàng),第二個(gè)是當(dāng)前索引,第三個(gè)是當(dāng)前迭代的總數(shù)組,這就是內(nèi)部迭代器的規(guī)則 ????????arr.forEach(function(res,index,arr){ ????????????console.log(res.name); ????????})
外部迭代器
外部迭代器必須顯式的進(jìn)行迭代,增加了調(diào)用的復(fù)雜度同時(shí)也相對(duì)的增加了迭代器的靈活性,可以手動(dòng)的進(jìn)行操控迭代過(guò)程以及迭代順序,將迭代相關(guān)的數(shù)據(jù)暴露出來(lái)進(jìn)行處理后返回
我們來(lái)手寫一個(gè)外部迭代器方法,里面擁有一個(gè)標(biāo)記index參數(shù),用于獲取下一次數(shù)據(jù),擁有一個(gè)next方法,該方法會(huì)進(jìn)行對(duì)index標(biāo)記進(jìn)行自增后然后返回一個(gè)對(duì)象,對(duì)象中擁有倆個(gè)參數(shù)value是代表著當(dāng)前標(biāo)記下的數(shù)據(jù),done是當(dāng)前數(shù)據(jù)是否還能繼續(xù)往下調(diào)用next方法的標(biāo)記,最后在返回一個(gè)全新的處理過(guò)后的數(shù)據(jù),通過(guò)調(diào)用next方法可以看到當(dāng)前的項(xià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è)計(jì)模式能夠可以讓我們更方便的且有規(guī)矩的進(jìn)行訪問(wèn)復(fù)合數(shù)據(jù)的每一項(xiàng),也可以通過(guò)迭代器進(jìn)行完成一些流線式操作
到此這篇關(guān)于JavaScript設(shè)計(jì)模式之迭代者模式詳情的文章就介紹到這了,更多相關(guān)JavaScript迭代模式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
ES6學(xué)習(xí)筆記之正則表達(dá)式和字符串正則方法分析
這篇文章主要介紹了ES6學(xué)習(xí)筆記之正則表達(dá)式和字符串正則方法,結(jié)合實(shí)例形式對(duì)比分析了ES5與ES6正則操作的常用函數(shù)功能與用法區(qū)別,需要的朋友可以參考下2017-04-04javascript簡(jiǎn)單實(shí)現(xiàn)表格行間隔顯示顏色并高亮顯示
表格行間隔顯示顏色并實(shí)現(xiàn)高亮顯示,這種效果大家都有見(jiàn)到過(guò)吧,下面就為大家詳細(xì)介紹下,需要的朋友可不要錯(cuò)過(guò)2013-11-11uniapp中使用計(jì)時(shí)器setInterval的場(chǎng)景與方法
計(jì)時(shí)器在日常開發(fā)中經(jīng)常會(huì)遇到,下面這篇文章主要給大家介紹了關(guān)于uniapp中使用計(jì)時(shí)器setInterval的場(chǎng)景與方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08微信小程序左滑動(dòng)顯示菜單功能的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序左滑動(dòng)顯示菜單功能的實(shí)現(xiàn),代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06javascript 保存文件到本地實(shí)現(xiàn)方法
本文將提供兩種方式保存圖片,大家可以根據(jù)喜歡自由選擇2012-11-11BootStrap表單控件之復(fù)選框checkbox和單選擇按鈕radio
這篇文章主要介紹了BootStrap表單控件之復(fù)選框checkbox和單選擇按鈕radio的相關(guān)資料,需要的朋友可以參考下2017-05-05