原生js實(shí)現(xiàn)each方法實(shí)例代碼詳解
jquery里面有個(gè)each方法,將循環(huán)操作簡(jiǎn)化、便捷。 隨后es出了個(gè)forEach方法,兩個(gè)雖然用法相近,但是不能處理對(duì)象類型。且無(wú)法通過(guò)return true達(dá)到continue效果。 此外還有個(gè)every方法,該方法雖然可以實(shí)現(xiàn)continue效果,但是在處理類數(shù)組與對(duì)象類型時(shí),完全無(wú)用。
在不使用 jquery 的 each 方法時(shí),該如何處理;或者說(shuō)用原生如何來(lái)實(shí)現(xiàn)? 前些前寫了個(gè)類庫(kù): jTool , 其中就實(shí)現(xiàn)了該方法。
簡(jiǎn)單實(shí)現(xiàn):
// 通過(guò)字面量方式實(shí)現(xiàn)的函數(shù)each var each = function(object, callback){ var type = (function(){ switch (object.constructor){ case Object: return 'Object'; break; case Array: return 'Array'; break; case NodeList: return 'NodeList'; break; default: return 'null'; break; } })(); // 為數(shù)組或類數(shù)組時(shí), 返回: index, value if(type === 'Array' || type === 'NodeList'){ // 由于存在類數(shù)組NodeList, 所以不能直接調(diào)用every方法 [].every.call(object, function(v, i){ return callback.call(v, i, v) === false ? false : true; }); } // 為對(duì)象格式時(shí),返回:key, value else if(type === 'Object'){ for(var i in object){ if(callback.call(object[i], i, object[i]) === false){ break; } } } }
我們來(lái)try一下, 測(cè)試下數(shù)組、對(duì)象、類數(shù)組類型及中斷效果
數(shù)組類型
var _array = [1,2,3,4]; each(_array, function(i, v){ console.log(i + ': ' + v); });
輸出如下:
對(duì)象類型
var object = {a:1, b:2, c:3} each(object, function(i, v){ console.log(i + ': ' + v); });
輸出如下:
類數(shù)組類型
var ele = document.querySelectorAll('div'); each(ele, function(i, v){ console.log(i + ': ' + v); });
輸出如下:
增加中斷條件
var object2 = {name:'baukh', age: '29', six:'男', url: 'www.lovejavascript.com',} each(object2, function(i, v){ if(i === 'age'){ //如果存在鍵值為age的屬性時(shí),則輸出警告,用于實(shí)現(xiàn)continue效果 console.log('存在鍵值為age,這家伙已經(jīng)'+v+'歲了'); return true; } if(i === 'six' && v === '男'){//如果存在鍵值為age的屬性時(shí),則輸出跳出,用于實(shí)現(xiàn)break效果 console.log('存在鍵值為six,是個(gè)男的,不用關(guān)注了~'); return false; } console.log(i + ': ' + v); });
輸出如下:
從結(jié)果可以看出來(lái),each方法已經(jīng)實(shí)現(xiàn)了jquery的each功能。且實(shí)現(xiàn)如此簡(jiǎn)單~
隨筆一行 這是前端最好的時(shí)代, 這也是前端最壞的時(shí)代。 眾多前端框架滿天飛,隨著 jQuery 在前端行業(yè)的慢慢弱化,總是會(huì)有一種斯人遠(yuǎn)去,何者慰籍的感覺(jué)?;ッ惆桑魑?。
另推薦個(gè)表格組件 gridManager
總結(jié)
以上所述是小編給大家介紹的原生js實(shí)現(xiàn)each方法實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript數(shù)組去重的3種方法和代碼實(shí)例
這篇文章主要介紹了JavaScript數(shù)組去重的3種方法和代碼實(shí)例,本文直接給出實(shí)例代碼,需要的朋友可以參考下2015-07-07用JavaScript對(duì)JSON進(jìn)行模式匹配 (Part 2 - 實(shí)現(xiàn))
在上一篇文章里,我們完成了 Dispatcher 類的接口設(shè)計(jì),現(xiàn)在我們就來(lái)考慮一下如何實(shí)現(xiàn)這個(gè)類。2010-07-07淺析微信小程序modal彈窗關(guān)閉默認(rèn)會(huì)執(zhí)行cancel問(wèn)題
這篇文章主要介紹了小程序modal彈窗關(guān)閉默認(rèn)會(huì)執(zhí)行cancel方法,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10微信小程序picker組件兩列關(guān)聯(lián)使用方式
這篇文章主要介紹了微信小程序picker組件兩列關(guān)聯(lián)使用方式,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-10-10FormValidate 表單驗(yàn)證功能代碼更新并提供下載
加入驗(yàn)證模式 4,同3,但是當(dāng)驗(yàn)證不通過(guò)時(shí),立即停止向下檢查。在模式3下,如果發(fā)生錯(cuò)誤,會(huì)把錯(cuò)誤記錄,并向下檢查,模式4就不向下檢查了2008-08-08javascript中直接引用Microsoft的COM生成Word
直接引用Microsoft的COM是可以生成Word的,下面為大家介紹下實(shí)現(xiàn)的javascript代碼2014-01-01