忙了好一段時(shí)間，項(xiàng)目上線后終于有那么一點(diǎn)點(diǎn)空檔期靜下來(lái)整理一些問(wèn)題了。當(dāng)我們?cè)陂_(kāi)發(fā)項(xiàng)目的時(shí)候，用到遍歷的地方肯定少不了，那么我們有那么多的遍歷方法，在不同情況下用那種方法會(huì)更優(yōu)雅而且還沒(méi)bug呢？

首先，我在這里先列出幾種常見(jiàn)的遍歷機(jī)制，然后針對(duì)部分來(lái)做一個(gè)我對(duì)它的理解，有不同看法的老鐵也可以分享一下，下面是我列出來(lái)的幾種遍歷的方法，另外我們常用來(lái)中斷循環(huán)的語(yǔ)句我在這里簡(jiǎn)單的提一下：

a、continue： 中斷本次循環(huán)；

b、return和break直接跳出循環(huán)。

var arr = [1, 2, 3] for(var i = 0; i < arr.length; i++) { 
    //do something
}; 
// for...of...
for(var i of arr) { 
    //do something
}; 
// for...in..
for(var i in arr) { 
    //do something
}; 
// forEach()
arr.forEach((item, index, arr) => { 
    //do something});
});

// map()
arr.map((value,index,array) => {
    //do something
});

在開(kāi)發(fā)上一個(gè)項(xiàng)目的時(shí)候，我在用for...in...這個(gè)方法遍歷的時(shí)候就遇到一個(gè)詭異的bug，在android手機(jī)是完美的展示，但是在iPhone手機(jī)的時(shí)候，就出現(xiàn)了遍歷后的數(shù)據(jù)竟然是翻倍的，而且數(shù)據(jù)是重復(fù)的。然后我就想著用array.forEach的方法，來(lái)解決問(wèn)題總該行來(lái)吧，在正常邏輯的情況下是可以解決問(wèn)題的，但是，在稍微復(fù)雜的邏輯了，有時(shí)候我們要中斷forEach遍歷時(shí)，這時(shí)候就會(huì)顯得軟弱無(wú)力了，因?yàn)樵趂orEach的遍歷機(jī)制里是不支持中斷遍歷的，然后我只能尋求其他的解決方案了。

下面我在這對(duì)上述列舉的遍歷方法逐個(gè)逐個(gè)的分析一下，有些分析不到位的，或者有不同的看法的老鐵們請(qǐng)分享你的看法：

1. 普通的for循環(huán)

var arr = [1, 2, 3] for(var i = 0; i < arr.length; i++) { // 這里的i是代表數(shù)組的下標(biāo)
    console.log(i); // 0, 1, 2
};

最簡(jiǎn)單的一種，正常用的話也不會(huì)出現(xiàn)什么問(wèn)題，想中斷也可以中斷，性能上也還可以。

image

2. 優(yōu)化版的for循環(huán)

var arr = [1, 2, 3] ;
for(var i = 0, len = arr.length; i < len; i++) { // 這里的i是代表數(shù)組的下標(biāo)
    console.log(i); // 0, 1, 2 
};

使用臨時(shí)變量，將長(zhǎng)度緩存起來(lái)，避免重復(fù)獲取數(shù)組長(zhǎng)度，當(dāng)數(shù)組較大時(shí)優(yōu)化效果才會(huì)比較明顯。這種方法基本上是所有循環(huán)遍歷方法中性能最高的一種，并且這一類(lèi)型的for循環(huán)可以通過(guò)用break來(lái)中斷循環(huán)，如下圖所示：

image

3. for...of...遍歷(這種遍歷支持ES6)

var arr = [1, 2, 3] ;
for(var item of arr) { // item代表數(shù)組里面的元素
    console.log(item); // 1, 2, 3
};

1、 這是最簡(jiǎn)潔、最直接的遍歷數(shù)組元素的語(yǔ)法

2、 這個(gè)方法避開(kāi)了for-in循環(huán)的所有缺陷

3、 與forEach()不同的是，它可以正確響應(yīng)break、continue和return語(yǔ)句

4、性能要好于forin，但仍然比不上普通for循環(huán)

image

4. forEach()

var arr = [1, 2, 3];
arr.forEach((item, index, arr) => { // item為arr的元素，index為下標(biāo)，arr原數(shù)組
    console.log(item); // 1, 2, 3
    console.log(index); // 0, 1, 2
    console.log(arr); // [1, 2, 3]
});

這種遍歷便捷還是挺便捷的，看起來(lái)優(yōu)雅，對(duì)目標(biāo)數(shù)組的操作很人性化，要元素給元素，要下標(biāo)給下標(biāo)，但是當(dāng)某種情況你想中斷遍歷的時(shí)候，你就會(huì)感覺(jué)它就像雞肋，食之無(wú)味，棄之可惜。由于foreach是Array型自帶的，對(duì)于一些非這種類(lèi)型的，無(wú)法直接使用(如NodeList)，所以才有了這個(gè)變種，使用這個(gè)變種可以讓類(lèi)似的數(shù)組擁有foreach功能。而且forEach的性能也會(huì)比普通的for循環(huán)弱。又下面的例子我們可以看到，我們常用的return false是可以終止代碼繼續(xù)往下執(zhí)行的，但是在forEach遍歷中，并沒(méi)有終止循環(huán)，所以在用forEach的時(shí)候，要考慮使用場(chǎng)景了。

image

5.some()

var arr = [1, 2, 3];
arr.some((item, index, arr) => { // item為數(shù)組中的元素，index為下標(biāo)，arr為目標(biāo)數(shù)組
    console.log(item); // 1, 2, 3
    console.log(index); // 0, 1, 2
    console.log(arr); // [1, 2, 3] 
});

some作為一個(gè)用來(lái)檢測(cè)數(shù)組是否滿足一些條件的函數(shù)存在，同樣是可以用作遍歷的函數(shù)簽名同forEach，有區(qū)別的是當(dāng)任一callback返回值匹配為true則會(huì)直接返回true，如果所有的callback匹配均為false，則返回false。

some() 方法會(huì)依次執(zhí)行數(shù)組的每個(gè)元素：

• 如果有一個(gè)元素滿足條件，則表達(dá)式返回true , 剩余的元素不會(huì)再執(zhí)行檢測(cè)。
• 如果沒(méi)有滿足條件的元素，則返回false。

image

7. every()

var arr = [1, 2, 3];
arr.every((item, index, arr) => { // item為數(shù)組中的元素，index為下標(biāo)，arr為目標(biāo)數(shù)組
    return item > 0; // true
    return index == 0; // false
});

every() 方法用于檢測(cè)數(shù)組所有元素是否都符合指定條件（通過(guò)函數(shù)提供）。

every() 方法使用指定函數(shù)檢測(cè)數(shù)組中的所有元素：

• 如果數(shù)組中檢測(cè)到有一個(gè)元素不滿足，則整個(gè)表達(dá)式返回 false ，且剩余的元素不會(huì)再進(jìn)行檢測(cè)。
• 如果所有元素都滿足條件，則返回 true。

image

8. for...in...遍歷

var arr = [1, 2, 3] for(var item in arr) { // item遍歷數(shù)組時(shí)為數(shù)組的下標(biāo)，遍歷對(duì)象時(shí)為對(duì)象的key值
    console.log(item); // 0, 1, 2
};

for...in更多是用來(lái)遍歷對(duì)象，很少用來(lái)遍歷數(shù)組， 不過(guò) item 對(duì)應(yīng)與數(shù)組的 key值，建議不要用該方法來(lái)遍歷數(shù)組，因?yàn)樗男适亲畹偷摹?/p>

image

9. filter()

var arr = [1, 2, 3];
arr.filter(item => { // item為數(shù)組當(dāng)前的元素
    return item > 1; // [2, 3]
});

filter() 方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過(guò)檢查指定數(shù)組中符合條件的所有元素。

image

10. map()

var arr = [1, 2, 3];
arr.map(item => { // item為數(shù)組的元素
    console.log(item); // 1, 2, 3
    return item * 2; // 返回一個(gè)處理過(guò)的新數(shù)組[2, 4, 6]
});

map() 方法返回一個(gè)新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。

map() 方法按照原始數(shù)組元素順序依次處理元素。

這種方式也是用的比較廣泛的，雖然用起來(lái)比較優(yōu)雅，但實(shí)際效率還比不上foreach

image

上述簡(jiǎn)單的介紹了各種遍歷的方法。

在前面我有提到一個(gè)蘋(píng)果手機(jī)遍歷出現(xiàn)數(shù)據(jù)重復(fù)的bug，那么我在這里做一個(gè)用for...in...案例，首先來(lái)看看代碼：

for (let item in this.currentForm) {
　　var subFormDataObj = {}; if (this.currentForm[item].isRequired === 2 && !this.currentForm[item].subjectValue && this.currentForm[item].subjectType != 5) { this.isSubmit = true; this.hideLoading(); this.Toast('尚有數(shù)據(jù)未完成，提交失??！'); return false;
   } else { if (this.expressionTest(this.currentForm[item].subjectValue)) { this.Toast('內(nèi)容不能含有表情符，請(qǐng)重新輸入！'); this.isSubmit = true; this.hideLoading(); return false;
       } if (this.currentForm[item].subjectName.indexOf('手機(jī)號(hào)') > -1) { if(!this.checkPhone(this.currentForm[item].subjectValue)) { this.isSubmit = true; this.hideLoading(); return false;
           };
       }
       subFormDataObj.subjectId = this.currentForm[item].subjectId;
       subFormDataObj.subjectValue = this.currentForm[item].subjectValue;
       subFormDataObj.picture = this.currentForm[item].picurl;
       subFormDataObj.isRequired = this.currentForm[item].isRequired; if (this.currentForm[item].subjectType == 5) { if (this.listPicStr == '') { this.isSubmit = true; this.hideLoading(); this.Toast('尚有數(shù)據(jù)未完成，提交失??！'); return false;
           } else { // subFormDataObj.picture = "data:image/jpeg;base64," + this.listPicStr.replace(/data:image\/jpeg;base64,/g,'') || '';
 }
       }
       subFormData.push(subFormDataObj);
   }
};
alert(JSON.stringify(subFormData));

image

image

我們看一下安卓手機(jī)和蘋(píng)果手機(jī)alert出來(lái)的數(shù)據(jù)有什么區(qū)別：在截圖中我們就可以發(fā)現(xiàn)，蘋(píng)果手機(jī)整體遍歷了2輪，這樣個(gè)結(jié)果是不是很詭異？是的我也覺(jué)得很詭異，怎么來(lái)解決呢，很多很學(xué)會(huì)想到一些方法，比如用數(shù)組去重的方法，并且es6的去重方法很優(yōu)雅（var newArr = Array.from(new Set(subFormData))），或者其他去重的方法，這樣做并沒(méi)有什么不好，比較方法有千千萬(wàn)，喜歡就好。當(dāng)時(shí)因?yàn)榭紤]到里面的邏輯問(wèn)題，我就直接改了一行代碼，用了最普通的方法，因?yàn)樾阅苌蠒?huì)有優(yōu)勢(shì)，所以我就用了普通的for循環(huán)解決了這個(gè)問(wèn)題。

image

換了一種遍歷方法后，這個(gè)問(wèn)題就解決了，在這里簡(jiǎn)單的做了一些開(kāi)發(fā)時(shí)遇到的坑做了一些總結(jié)，有不同看法的各路大神，跪求分享?。?！