忙了好一段時間，項目上線后終於有那么一點點空檔期靜下來整理一些問題了。當我們在開發項目的時候，用到遍歷的地方肯定少不了，那么我們有那么多的遍歷方法，在不同情況下用那種方法會更優雅而且還沒bug呢？
首先，我在這里先列出幾種常見的遍歷機制，然后針對部分來做一個我對它的理解，有不同看法的老鐵也可以分享一下，下面是我列出來的幾種遍歷的方法，另外我們常用來中斷循環的語句我在這里簡單的提一下：
a、continue： 中斷本次循環；
b、return和break直接跳出循環。
// for 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 });
在開發上一個項目的時候，我在用for...in...這個方法遍歷的時候就遇到一個詭異的bug，在android手機是完美的展示，但是在iPhone手機的時候，就出現了遍歷后的數據竟然是翻倍的，而且數據是重復的。然后我就想着用array.forEach的方法，來解決問題總該行來吧，在正常邏輯的情況下是可以解決問題的，但是，在稍微復雜的邏輯了，有時候我們要中斷forEach遍歷時，這時候就會顯得軟弱無力了，因為在forEach的遍歷機制里是不支持中斷遍歷的，然后我只能尋求其他的解決方案了。
下面我在這對上述列舉的遍歷方法逐個逐個的分析一下，有些分析不到位的，或者有不同的看法的老鐵們請分享你的看法：
1. 普通的for循環
var arr = [1, 2, 3] for(var i = 0; i < arr.length; i++) { // 這里的i是代表數組的下標 console.log(i); // 0, 1, 2 };
最簡單的一種，正常用的話也不會出現什么問題，想中斷也可以中斷，性能上也還可以。
2. 優化版的for循環
var arr = [1, 2, 3] for(var i = 0, len = arr.length; i < len; i++) { // 這里的i是代表數組的下標
console.log(i); // 0, 1, 2 };
使用臨時變量，將長度緩存起來，避免重復獲取數組長度，當數組較大時優化效果才會比較明顯。這種方法基本上是所有循環遍歷方法中性能最高的一種，並且這一類型的for循環可以通過用break來中斷循環，如下圖所示：
3. for...of...遍歷(這種遍歷支持ES6)
var arr = [1, 2, 3] for(var item of arr) { // item代表數組里面的元素 console.log(item); // 1, 2, 3 };
1、 這是最簡潔、最直接的遍歷數組元素的語法
2、 這個方法避開了for-in循環的所有缺陷
3、 與forEach()不同的是，它可以正確響應break、continue和return語句
4、性能要好於forin，但仍然比不上普通for循環
4. forEach()
var arr = [1, 2, 3]; arr.forEach((item, index, arr) => { // item為arr的元素，index為下標，arr原數組 console.log(item); // 1, 2, 3 console.log(index); // 0, 1, 2 console.log(arr); // [1, 2, 3] });
這種遍歷便捷還是挺便捷的，看起來優雅，對目標數組的操作很人性化，要元素給元素，要下標給下標，但是當某種情況你想中斷遍歷的時候，你就會感覺它就像雞肋，食之無味，棄之可惜。由於foreach是Array型自帶的，對於一些非這種類型的，無法直接使用(如NodeList)，所以才有了這個變種，使用這個變種可以讓類似的數組擁有foreach功能。而且forEach的性能也會比普通的for循環弱。又下面的例子我們可以看到，我們常用的return false是可以終止代碼繼續往下執行的，但是在forEach遍歷中，並沒有終止循環，所以在用forEach的時候，要考慮使用場景了。
5.some()
var arr = [1, 2, 3]; arr.some((item, index, arr) => { // item為數組中的元素，index為下標，arr為目標數組 console.log(item); // 1, 2, 3 console.log(index); // 0, 1, 2 console.log(arr); // [1, 2, 3] })
some作為一個用來檢測數組是否滿足一些條件的函數存在，同樣是可以用作遍歷的函數簽名同forEach，有區別的是當任一callback返回值匹配為true則會直接返回true，如果所有的callback匹配均為false，則返回false。
some() 方法會依次執行數組的每個元素：
- 如果有一個元素滿足條件，則表達式返回true , 剩余的元素不會再執行檢測。
- 如果沒有滿足條件的元素，則返回false。
7. every()
var arr = [1, 2, 3]; arr.every((item, index, arr) => { // item為數組中的元素，index為下標，arr為目標數組 return item > 0; // true return index == 0; // false })
every() 方法用於檢測數組所有元素是否都符合指定條件（通過函數提供）。
every() 方法使用指定函數檢測數組中的所有元素：
- 如果數組中檢測到有一個元素不滿足，則整個表達式返回 false ，且剩余的元素不會再進行檢測。
- 如果所有元素都滿足條件，則返回 true。
8. for...in...遍歷
var arr = [1, 2, 3] for(var item in arr) { // item遍歷數組時為數組的下標，遍歷對象時為對象的key值 console.log(item); // 0, 1, 2 };
for...in更多是用來遍歷對象，很少用來遍歷數組， 不過 item 對應與數組的 key值，建議不要用該方法來遍歷數組，因為它的效率是最低的。
9. filter()
var arr = [1, 2, 3]; arr.filter(item => { // item為數組當前的元素 return item > 1; // [2, 3] })
filter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。
10. map()
var arr = [1, 2, 3]; arr.map(item => { // item為數組的元素 console.log(item); // 1, 2, 3 return item * 2; // 返回一個處理過的新數組[2, 4, 6] })
map() 方法返回一個新數組，數組中的元素為原始數組元素調用函數處理后的值。
map() 方法按照原始數組元素順序依次處理元素。
這種方式也是用的比較廣泛的，雖然用起來比較優雅，但實際效率還比不上foreach
上述簡單的介紹了各種遍歷的方法。
在前面我有提到一個蘋果手機遍歷出現數據重復的bug，那么我在這里做一個用for...in...案例，首先來看看代碼：
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('尚有數據未完成，提交失敗！'); return false; } else { if (this.expressionTest(this.currentForm[item].subjectValue)) { this.Toast('內容不能含有表情符，請重新輸入！'); this.isSubmit = true; this.hideLoading(); return false; } if (this.currentForm[item].subjectName.indexOf('手機號') > -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('尚有數據未完成，提交失敗！'); return false; } else { // subFormDataObj.picture = "data:image/jpeg;base64," + this.listPicStr.replace(/data:image\/jpeg;base64,/g,'') || ''; } } subFormData.push(subFormDataObj); } }; alert(JSON.stringify(subFormData));
我們看一下安卓手機和蘋果手機alert出來的數據有什么區別：在截圖中我們就可以發現，蘋果手機整體遍歷了2輪，這樣個結果是不是很詭異？是的我也覺得很詭異，怎么來解決呢，很多很學會想到一些方法，比如用數組去重的方法，並且es6的去重方法很優雅（var newArr = Array.from(new Set(subFormData))），或者其他去重的方法，這樣做並沒有什么不好，比較方法有千千萬，喜歡就好。當時因為考慮到里面的邏輯問題，我就直接改了一行代碼，用了最普通的方法，因為性能上會有優勢，所以我就用了普通的for循環解決了這個問題。
換了一種遍歷方法后，這個問題就解決了，在這里簡單的做了一些開發時遇到的坑做了一些總結，有不同看法的各路大神，跪求分享！！！