深入淺析JS的數(shù)組遍歷方法(推薦)
用過Underscore的朋友都知道,它對數(shù)組(集合)的遍歷有著非常完善的API可以調(diào)用的,_.each()就是其中一個。下面就是一個簡單的例子:
var arr = [1, 2, 3, 4, 5]; _.each(arr, function(el) { console.log(el); });
上面的代碼會依次輸出1, 2, 3, 4, 5,是不是很有意思,遍歷一個數(shù)組連for循環(huán)都不用自己寫了。_.each()方法遍歷數(shù)組非常好用,但是它的內(nèi)部實現(xiàn)一點都不難。下面就一起來看看到底是如何實現(xiàn)_.each()的。在這之前,我們先來看看_.each()的API。_.each()的一般是如下調(diào)用的:
_.each(arr, fn, context);
它接收3個參數(shù),
第一個是需要遍歷的數(shù)組(其實是對象也是可以的,這個后面我們再一起來討論);
第二個是它的回調(diào)函數(shù)(這個回調(diào)函數(shù)可以傳入3個參數(shù),如:function(el, i, arr),分別是當前元素、當前索引和原數(shù)組);
第三個是回調(diào)函數(shù)需要綁定到的上下文,即指定回調(diào)函數(shù)fn的this值。
好啦,需求已經(jīng)非常明確了,開始干活啦!
我們先來實現(xiàn)一個最簡單的_.each(),它不能夠修改上下文this的,接收兩個參數(shù),代碼如下:
var _ = {}; // 假設這就是underscore哈 // 一個最簡單的_.each方法的實現(xiàn) _.each = function(arr, fn) { for(var i = 0; i < arr.length; i++) { fn(arr[i], i, arr); } return arr; // 把原數(shù)組返回 }
怎么樣?是不是很簡單呢?只是用一個for循環(huán),不停的調(diào)用回調(diào)函數(shù)即可,短短幾行代碼就搞定了,相信沒有朋友看不懂的哈!下面我們來測試一下看能不能正常工作:
var arr = [1, 2, 3, 4, 5]; _.each(arr, function(el, i, arr) { console.log(el); });
在瀏覽器打開,然后控制臺就會看到有正確的輸出了。
這么簡單的代碼一點意思也沒有,接下來看一個比較有點挑戰(zhàn)性的例子哈。比如,數(shù)組arr有個sum屬性,我們需要把數(shù)組所有的元素求和之后存放到sum里面,如下:
var arr = [1, 2, 3, 4, 5]; arr.sum = 0; // sum屬性用來存放數(shù)組元素之和 _.each(arr, function(el, i, arr) { this.sum += el; });
這時候,回調(diào)函數(shù)里面用到了this,如果不綁定的話,this默認就是window,這不是我們想要的,我們希望它綁定到數(shù)組arr上面。call或者apply可以實現(xiàn)這個功能,代碼如下:
var _ = {}; // 假設這就是underscore哈 // bind,接收兩個參數(shù)fn和context // 把fn綁定到context上面 var bind = function(fn, context) { context = context || null; return function(el, i, arr) { fn.call(context, el, i, arr); } } // _.each _.each = function(arr, fn, context) { // 調(diào)用bind方法,把fn綁定到context上面 fn = bind(fn, context); for(var i = 0; i < arr.length; i++) { fn(arr[i], i, arr); } return arr; } // 測試用例: var arr = [1, 2, 3, 4, 5]; arr.sum = 0; // sum屬性用來存放數(shù)組元素之和 _.each(arr, function(el, i, arr) { this.sum += el; }, arr); console.log(arr.sum); // 15
好啦,這個_.each()已經(jīng)足夠強大了,可以正常遍歷數(shù)組,還可以任意指定this值改變回調(diào)函數(shù)的上下文。但是,我們前面有提到過,Underscore的_.each()還可以遍歷對象的 ,這個實現(xiàn)也不難,只要判斷一下傳入的第一個參數(shù)是對象還是數(shù)組,如果是數(shù)組就像我們一樣遍歷,否則如果是對象,使用對象的for...in循環(huán)遍歷就行了。有興趣的可以自己試試,或者看看underscore的源碼。
注意:自從ES5標準以來,原生數(shù)組就已經(jīng)具有了Array.prototype.forEach、Array.prototype.Map等遍歷方法了,在項目中可以使用原生的。
以上所述是小編給大家介紹的深入淺析JS的數(shù)組遍歷方法(推薦)的全部敘述,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
javascript實現(xiàn)原生ajax的幾種方法介紹
項目中不需要加載jquery這種龐大的js插件要使用到ajax這種功能該如何辦呢?下面和大家分享幾種利用javascript實現(xiàn)原生ajax的方法2013-09-09JavaScript實現(xiàn)帶緩沖效果的隨屏滾動漂浮廣告代碼
這篇文章主要介紹了JavaScript實現(xiàn)帶緩沖效果的隨屏滾動漂浮廣告代碼,通過JavaScript結(jié)合時間函數(shù)動態(tài)響應頁面元素滾動事件實現(xiàn)懸浮廣告的緩沖漂浮效果,非常簡單實用,需要的朋友可以參考下2015-11-11詳解XMLHttpRequest(二)響應屬性、二進制數(shù)據(jù)、監(jiān)測上傳下載進度
這篇文章主要為大家詳細介紹了XMLHttpRequest響應屬性、二進制數(shù)據(jù)、監(jiān)測上傳下載進度,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-09-09基于JS代碼實現(xiàn)圖片在頁面中旋轉(zhuǎn)效果
這篇文章主要介紹了基于JS代碼實現(xiàn)圖片在頁面中旋轉(zhuǎn)效果 的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-06-06Bootstrap的Carousel配合dropload.js實現(xiàn)移動端滑動切換圖片
這篇文章主要介紹了bootstrap的Carousel配合dropload.js實現(xiàn)移動端滑動切換圖片,實現(xiàn)方法非常簡單,具有參考借鑒價值,需要的朋友可以參考下2017-03-03