js 數(shù)組實(shí)現(xiàn)一個(gè)類似ruby的迭代器
·基本實(shí)現(xiàn)
·在迭代中引用原來(lái)的對(duì)象,或者直接改變數(shù)組的值而不是返回一個(gè)新數(shù)組
·向迭代傳入無(wú)限多的參數(shù)
·基本實(shí)現(xiàn)
今天突然發(fā)現(xiàn)js的數(shù)組處理起來(lái)真是麻煩,代碼一些就是一大堆,相比起ruby的迭代器來(lái)真是遜色不少,主要是要寫的代碼太多了,也許是js有特殊的處理數(shù)組的方式,真是我不知道而已,但是我真的想自己給js實(shí)現(xiàn)一個(gè)類似ruby的迭代器的東東,而且實(shí)現(xiàn)起來(lái)也不難,那就開始動(dòng)手吧.
真的應(yīng)該慶幸js是動(dòng)態(tài)語(yǔ)言啊,如果是靜態(tài)語(yǔ)言,實(shí)現(xiàn)起來(lái)很不方便(別說(shuō)要我重新定義一個(gè)繼承自array的類),不過(guò)用js實(shí)現(xiàn)起來(lái)就簡(jiǎn)單多了,直接給Array對(duì)象加一個(gè)方法即可,如下:
額呵呵,迭代器其實(shí)已經(jīng)實(shí)現(xiàn)了......好簡(jiǎn)單啊,是啊,不過(guò)這樣的確方便了不少哦,看下面的用法就知道了:
首先我們定義一個(gè)數(shù)組:
1:用法一:
迭代使用每個(gè)數(shù)組元素:
聲明:這里可以縮寫成:aa.each(function(val){alert(val)});,以下的也同理,為了清晰,分開寫的
執(zhí)行結(jié)果是依次彈出每個(gè)數(shù)組元素的值,哦呵,就是這么簡(jiǎn)單,不用寫可惡的for,如果代碼很多的時(shí)候,這點(diǎn)節(jié)省也會(huì)省出不少的代碼量哦
2:用法二:
迭代處理每個(gè)數(shù)組元素并返回一個(gè)處理后哦數(shù)組:
結(jié)果如何?如你所想,首先彈出的是"1,2,3,4",之后彈出的是"2,4,6,8",每個(gè)元素都被處理了,并且作為新數(shù)組返回,額呵呵,很簡(jiǎn)單的功能,如果你覺得沒什么用的話,那好吧,還是去寫for循環(huán)吧,如果你喜歡這種寫法,那好吧,還有很多可以改進(jìn)的地方,也留給大家去探索,反正這樣目前對(duì)我來(lái)說(shuō)已經(jīng)足夠用來(lái)節(jié)省很多代碼了.
3:更多:
還可以給數(shù)組增加更多有用的方法,例如:隨機(jī)打亂順序(棋牌游戲?)等,不過(guò)真希望js可以在方法名中包含更多的標(biāo)點(diǎn)符號(hào),那樣就可以定義 each?或者each!這種警示性方法了,可惜可惜
·在迭代中引用原來(lái)的對(duì)象,或者直接改變數(shù)組的值而不是返回一個(gè)新數(shù)組
我這里有一個(gè)可以說(shuō)是改進(jìn)版的迭代器,因?yàn)槲彝蝗灰趂unc函數(shù)里引用原來(lái)的迭代對(duì)象,于是做了如下修改
變化并不大,也兼容前面所講的所有功能,而且增加了對(duì)數(shù)組對(duì)象的引用
我們可以在func函數(shù)里引用原來(lái)的數(shù)組對(duì)象,和當(dāng)前元素的索引位置,這樣可以增加很多功能哦,首先可以直接修改原來(lái)數(shù)組的值,?。?!不過(guò)如果你在func函數(shù)里刪除了某個(gè)數(shù)組元素,可能會(huì)出現(xiàn)不可預(yù)料的錯(cuò)誤哦?。。?/SPAN>,下面來(lái)做個(gè)試驗(yàn),看看會(huì)出現(xiàn)什么結(jié)果:
哦,我們?cè)趂unc函數(shù)里刪除了值為2的元素,結(jié)果呢,依次彈出1,3,4,undefined,也就是迭代函數(shù)無(wú)法知道你的數(shù)組長(zhǎng)度改變了,多循環(huán)了一次,如何解決這個(gè)問(wèn)題呢?
初步想法是,判斷一下元素是否為空,如果為空,就不做任何操作,&&操作符的前面如果為假,就不會(huì)執(zhí)行后面的語(yǔ)句.今天發(fā)現(xiàn)這種方法有所欠考慮,因?yàn)槲衣┨幚砹艘粋€(gè)元素,仔細(xì)想想就知道了,所以需要在處理函數(shù)里加一個(gè)offset變量,指引當(dāng)前的偏移量,每次刪除元素就將offset變量減一,索引以index+offset為準(zhǔn),這樣可以解決刪除元素的問(wèn)題,但是不能解決增加元素的問(wèn)題,所以這個(gè)迭代器里不能動(dòng)態(tài)增加數(shù)組元素,否則會(huì)出現(xiàn)錯(cuò)誤,注意注意
先到此為止吧.
·向迭代傳入無(wú)限多的參數(shù)
又回來(lái)了,這次我們要讓這個(gè)迭代可以傳遞更多的有用的自定義參數(shù),而不是系統(tǒng)自定的,當(dāng)然,前面的所有操作都是被兼容的,所有的修改都不會(huì)破壞前面的操作的兼容性.
我們將主方法修改如下:
OK,加了個(gè)參數(shù),只是一個(gè)參數(shù),沒有什么大驚小怪,但是它已經(jīng)可以完成所有的參數(shù)傳遞了,看例子:
還是剛才的例子,我們要?jiǎng)h除數(shù)組中的一個(gè)元素,我們通過(guò)傳遞進(jìn)來(lái)的參數(shù)來(lái)確定刪除哪個(gè)值,我們用一個(gè)對(duì)象作為參數(shù)傳進(jìn)來(lái),這個(gè)對(duì)象是個(gè)json對(duì)象,歐耶,json可以承載任意多的參數(shù),想傳多少就傳多少,不是很簡(jiǎn)單么,好像我們已經(jīng)實(shí)現(xiàn)了很多功能了.但是還沒有完,更多的需要自己去探索.
只用拓展ie的forEach就行了,ff下已經(jīng)支持了,而且你這種寫法貌似效率很低
相關(guān)文章
js實(shí)現(xiàn)單一html頁(yè)面兩套css切換代碼
研究了一下JS的用setAttribute方法實(shí)現(xiàn)一個(gè)頁(yè)面兩份樣式表的效果與大家分享下,感興趣的朋友可以參考下哈,希望可以幫助到你2013-04-04用javascript實(shí)現(xiàn)截取字符串包含中文處理的函數(shù)
一直不知道js可以截取中文字符,呵呵,原理用正則表達(dá)式,匹配中文的長(zhǎng)度,中文算兩個(gè),因?yàn)樗阋粋€(gè),是個(gè)好東西,推薦大家收藏2008-04-04在JavaScript中如何訪問(wèn)暫未存在的嵌套對(duì)象
這篇文章主要給大家介紹了關(guān)于在JavaScript中如何訪問(wèn)暫未存在的嵌套對(duì)象的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06用javascript實(shí)現(xiàn)鼠標(biāo)框選
用javascript實(shí)現(xiàn)鼠標(biāo)框選...2007-05-05一個(gè)對(duì)于js this關(guān)鍵字的問(wèn)題
一個(gè)對(duì)于js this關(guān)鍵字的問(wèn)題...2007-01-01基于Bootstrap實(shí)現(xiàn)下拉菜單項(xiàng)和表單導(dǎo)航條(兩個(gè)菜單項(xiàng),一個(gè)下拉菜單和登錄表單導(dǎo)航條)
這篇文章主要介紹了基于Bootstrap實(shí)現(xiàn)下拉菜單項(xiàng)和表單導(dǎo)航條(兩個(gè)菜單項(xiàng),一個(gè)下拉菜單和登錄表單導(dǎo)航條)的相關(guān)資料,需要的朋友可以參考下2016-07-07