jquery里面有個(gè)each方法,將循環(huán)操作簡化、便捷。 隨后es出了個(gè)forEach方法,兩個(gè)雖然用法相近,但是不能處理對象類型。且無法通過return true達(dá)到continue效果。 此外還有個(gè)every方法,該方法雖然可以實(shí)現(xiàn)continue效果,但是在處理類數(shù)組與對象類型時(shí),完全無用。
主要從事網(wǎng)頁設(shè)計(jì)、PC網(wǎng)站建設(shè)(電腦版網(wǎng)站建設(shè))、wap網(wǎng)站建設(shè)(手機(jī)版網(wǎng)站建設(shè))、成都響應(yīng)式網(wǎng)站建設(shè)公司、程序開發(fā)、微網(wǎng)站、小程序開發(fā)等,憑借多年來在互聯(lián)網(wǎng)的打拼,我們在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、網(wǎng)絡(luò)營銷經(jīng)驗(yàn),集策劃、開發(fā)、設(shè)計(jì)、營銷、管理等多方位專業(yè)化運(yùn)作于一體,具備承接不同規(guī)模與類型的建設(shè)項(xiàng)目的能力。
在不使用 jquery 的 each 方法時(shí),該如何處理;或者說用原生如何來實(shí)現(xiàn)? 前些前寫了個(gè)類庫: jTool , 其中就實(shí)現(xiàn)了該方法。
簡單實(shí)現(xiàn):
// 通過字面量方式實(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; }); } // 為對象格式時(shí),返回:key, value else if(type === 'Object'){ for(var i in object){ if(callback.call(object[i], i, object[i]) === false){ break; } } } }
我們來try一下, 測試下數(shù)組、對象、類數(shù)組類型及中斷效果
數(shù)組類型
var _array = [1,2,3,4]; each(_array, function(i, v){ console.log(i + ': ' + v); });
輸出如下:
對象類型
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é)果可以看出來,each方法已經(jīng)實(shí)現(xiàn)了jquery的each功能。且實(shí)現(xiàn)如此簡單~
隨筆一行 這是前端最好的時(shí)代, 這也是前端最壞的時(shí)代。 眾多前端框架滿天飛,隨著 jQuery 在前端行業(yè)的慢慢弱化,總是會(huì)有一種斯人遠(yuǎn)去,何者慰籍的感覺?;ッ惆?,各位。
另推薦個(gè)表格組件 gridManager
總結(jié)
以上所述是小編給大家介紹的原生js實(shí)現(xiàn)each方法實(shí)例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!
當(dāng)前題目:原生js實(shí)現(xiàn)each方法實(shí)例代碼詳解
本文網(wǎng)址:http://muchs.cn/article16/ihsigg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供靜態(tài)網(wǎng)站、網(wǎng)站收錄、App開發(fā)、、關(guān)鍵詞優(yōu)化、企業(yè)網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)