用過(guò)Underscore的朋友都知道，它對(duì)數(shù)組（集合）的遍歷有著非常完善的API可以調(diào)用的，_.each()就是其中一個(gè)。下面就是一個(gè)簡(jiǎn)單的例子：

var arr = [1, 2, 3, 4, 5];
_.each(arr, function(el) {
console.log(el);
}); 

上面的代碼會(huì)依次輸出1， 2， 3， 4， 5，是不是很有意思，遍歷一個(gè)數(shù)組連for循環(huán)都不用自己寫(xiě)了。_.each()方法遍歷數(shù)組非常好用，但是它的內(nèi)部實(shí)現(xiàn)一點(diǎn)都不難。下面就一起來(lái)看看到底是如何實(shí)現(xiàn)_.each()的。在這之前，我們先來(lái)看看_.each()的API。_.each()的一般是如下調(diào)用的：

_.each(arr, fn, context);

它接收3個(gè)參數(shù)，

第一個(gè)是需要遍歷的數(shù)組（其實(shí)是對(duì)象也是可以的，這個(gè)后面我們?cè)僖黄饋?lái)討論）；

第二個(gè)是它的回調(diào)函數(shù)（這個(gè)回調(diào)函數(shù)可以傳入3個(gè)參數(shù),如：function(el, i, arr)，分別是當(dāng)前元素、當(dāng)前索引和原數(shù)組）；

第三個(gè)是回調(diào)函數(shù)需要綁定到的上下文，即指定回調(diào)函數(shù)fn的this值。

好啦，需求已經(jīng)非常明確了，開(kāi)始干活啦！

我們先來(lái)實(shí)現(xiàn)一個(gè)最簡(jiǎn)單的_.each()，它不能夠修改上下文this的，接收兩個(gè)參數(shù)，代碼如下：

var _ = {}; // 假設(shè)這就是underscore哈
// 一個(gè)最簡(jiǎn)單的_.each方法的實(shí)現(xiàn)
_.each = function(arr, fn) {
　　for(var i = 0; i < arr.length; i++) {
　　　　fn(arr[i], i, arr);
　　}
　　return arr; // 把原數(shù)組返回
} 

怎么樣？是不是很簡(jiǎn)單呢？只是用一個(gè)for循環(huán)，不停的調(diào)用回調(diào)函數(shù)即可，短短幾行代碼就搞定了，相信沒(méi)有朋友看不懂的哈！下面我們來(lái)測(cè)試一下看能不能正常工作：

var arr = [1, 2, 3, 4, 5];
_.each(arr, function(el, i, arr) {
　　console.log(el);
}); 

在瀏覽器打開(kāi)，然后控制臺(tái)就會(huì)看到有正確的輸出了。

這么簡(jiǎn)單的代碼一點(diǎn)意思也沒(méi)有，接下來(lái)看一個(gè)比較有點(diǎn)挑戰(zhàn)性的例子哈。比如，數(shù)組arr有個(gè)sum屬性，我們需要把數(shù)組所有的元素求和之后存放到sum里面，如下：

var arr = [1, 2, 3, 4, 5];
arr.sum = 0; // sum屬性用來(lái)存放數(shù)組元素之和
_.each(arr, function(el, i, arr) {
　　this.sum += el;
}); 

這時(shí)候，回調(diào)函數(shù)里面用到了this，如果不綁定的話，this默認(rèn)就是window，這不是我們想要的，我們希望它綁定到數(shù)組arr上面。call或者apply可以實(shí)現(xiàn)這個(gè)功能，代碼如下：

var _ = {}; // 假設(shè)這就是underscore哈
// bind，接收兩個(gè)參數(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;
}
// 測(cè)試用例：
var arr = [1, 2, 3, 4, 5];
arr.sum = 0; // sum屬性用來(lái)存放數(shù)組元素之和
_.each(arr, function(el, i, arr) {
　　this.sum += el;
}, arr);
console.log(arr.sum); // 15 

好啦，這個(gè)_.each()已經(jīng)足夠強(qiáng)大了，可以正常遍歷數(shù)組，還可以任意指定this值改變回調(diào)函數(shù)的上下文。但是，我們前面有提到過(guò)，Underscore的_.each()還可以遍歷對(duì)象的 ，這個(gè)實(shí)現(xiàn)也不難，只要判斷一下傳入的第一個(gè)參數(shù)是對(duì)象還是數(shù)組，如果是數(shù)組就像我們一樣遍歷，否則如果是對(duì)象，使用對(duì)象的for...in循環(huán)遍歷就行了。有興趣的可以自己試試，或者看看underscore的源碼。

注意：自從ES5標(biāo)準(zhǔn)以來(lái)，原生數(shù)組就已經(jīng)具有了Array.prototype.forEach、Array.prototype.Map等遍歷方法了，在項(xiàng)目中可以使用原生的。

以上所述是小編給大家介紹的深入淺析JS的數(shù)組遍歷方法(推薦)的全部敘述，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論