在ES5中常用的10種陣列遍歷方法：(以下指令碼可複製黏貼到瀏覽器的console中檢視效果)

1、原始的for迴圈語句

2、Array.prototype.forEach陣列物件內建方法 優點不用定義額外的引數變數，缺點:

• 效能不如for迴圈
• 不能用return結束迴圈
• 不生成新陣列
• ie不支援（alert(Array.prototype.forEach)返回undefined）
• 陣列元素為數值時不改變原陣列，元素為物件、陣列時改變原陣列。

例1：

var oldArr = [3, 6, 8];
var newArr = oldArr.forEach((value,key,arr) => {
    console.log('value:' + value + ',key:' + key+',arr:' + arr);
    return value += 1;
})
console.log('oldArr:' + oldArr); // [3,6,8]
console.log('newArr:' + newArr); // undefined

例2：

var oldArr = [
    {id:1, score:10},  
    {id:2, score:20},  
    {id:3, score:30}
];
var newArr = oldArr.forEach((value,key,arr) => {
    value.score += 5;
})
console.log('oldArr:' + JSON.stringify(oldArr)); // [{"id":1,"score":15},{"id":2,"score":25},{"id":3,"score":35}]
console.log('newArr:' + newArr); // undefined

3、Array.prototype.map陣列物件內建方法,特點：

• 不改變原陣列
• 不能用return結束迴圈，但用return可生成新陣列
• 常用於修改陣列的值，並且不破壞原陣列。

var oldArr = [3, 6, 8];
var newArr = oldArr.map((value,key,arr) => {
    console.log('value:' + value + ',key:' + key+',arr:' + arr);
    return value+1;
})
console.log('oldArr:' + oldArr); // [3,6,8]
console.log('newArr:' + newArr); // [4,7,9]

4、Array.prototype.filter陣列物件內建方法,特點：

• 不改變原陣列
• 必須用return true新增到新陣列中，或用return false不新增到新陣列中
• 直接返回return表示不新增到新陣列中，相當於return false
• 常用於去掉不要的值

var oldArr = [3, 6, 8];
var newArr = oldArr.filter((value,key,arr) => {
    console.log('value:' + value + ',key:' + key+',arr:' + arr);
    if (value === 6) {
        return false;
    }
    return true;
})
console.log('oldArr:' + oldArr); // [3,6,8]
console.log('newArr:' + newArr); // [3,8]

5、Array.prototype.reduce陣列物件內建方法，特點：

• 不改變原陣列
• 第一個引數是函式累加器，陣列中的每個值（從左到右）開始合併，最終返回一個值。
• 第二個引數(選填)如果有，函式累加器從第二個引數開始。

var oldArr = [3, 6, 8];
var newArr = oldArr.reduce((pre, cur, index, array) => {
    console.log('pre:' + JSON.stringify(pre) + ',cur:' + cur+',index:' + index + ',array:' + array);
    pre[cur] = 1;
  return pre;
}, {})
console.log('oldArr:' + oldArr); // [3, 6, 8]
console.log('newArr:' + JSON.stringify(newArr)); // {3: 1, 6: 1, 8: 1}

// 例1:將陣列所有項相加
var total = [0, 1, 2, 3].reduce(function(a, b) {
    console.log('a=' + a + ',b=' + b);
    return a + b;
});
console.log(total) // 6

// 例2:陣列扁平化
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
    console.log('a=' + a + ',b=' + b);
    return a.concat(b);
});
console.log(flattened) // [0, 1, 2, 3, 4, 5]

6、Array.prototype.some陣列物件內建方法

• 不改變原陣列
• 判斷陣列中是否至少有一個元素滿足條件，判斷邏輯：只要有一個滿足就返回true，只有都不滿足時才返回false。類似邏輯運算子||。

var oldArr = [3, 6, 8];
var newArr = oldArr.some((value,key,arr) => {
    console.log('value:' + value + ',key:' + key+',arr:' + arr);
    return value === 6;
})
console.log('oldArr:' + oldArr); //[3, 6, 8]
console.log('newArr:' + newArr); // true

// 例:判斷陣列是否有大於3的元素
var arr = [ 1, 2, 3, 4, 5, 6 ];
console.log(arr.some( function( item, index, array ){  
    console.log( 'item=' + item + ',index='+index+',array='+array );  
    return item > 3;  
}));

7、Array.prototype.every陣列物件內建方法

• 不改變原陣列
• 判斷陣列中是否每個元素都滿足條件，判斷邏輯：只有都滿足條件才返回true，只要有一個不滿足就返回false。類似邏輯運算子&&。

var oldArr = [3, 6, 8];
var newArr = oldArr.every((value,key,arr) => {
    console.log('value:' + value + ',key:' + key+',arr:' + arr);
    return value === 6;
})
console.log(oldArr); //[3, 6, 8]
console.log(newArr); // false

// 例:判斷陣列元素是否都小於5
var arr = [ 1, 2, 3, 4, 5, 6 ];
console.log(arr.every( function( item, index, array ){  
    console.log( 'item=' + item + ',index='+index+',array='+array );  
    return item < 5;
}));

8、Array.prototype.indexOf陣列物件內建方法 在陣列迴圈過程中會和傳入的引數比對，比對成功返回對比成功的下標並終止迴圈，比對失敗返回-1。

var oldArr = [3, 6, 8];
var newArr = oldArr.indexOf(6)
console.log(oldArr); //[3, 6, 8]
console.log(newArr); // 1

9、Array.prototype.lastIndexOf陣列物件內建方法 與indexOf類似，只不過查詢順序是逆向的。

10、for...in迴圈語句

• for迴圈變數i表示陣列的下標是number型別，而for...in迴圈的變數key是string型別。
• 遍歷陣列是遍歷陣列的下標值，遍歷物件是遍歷物件的key值。

var arr = [3, 6, 8];
for(const value in arr){
  console.log(typeof(value))
  console.log(value)  // 結果依次為0，1，2
}

ES6中新增加了一種：

1.for...of迴圈語句

for(const value of [3, 6, 8]){
  console.log(value)  // 結果依次為3，6，8
}

小結： forEach,for,for...in,for...of方法僅僅只是為了迴圈，並不可以幫你做額外的事情； map方法是做迴圈改變陣列值； filter方法是做迴圈剔除陣列值； reduce方法相當於迴圈遍歷物件做統計（累加或者累減之類的）; some和every方法相當於迴圈找到指定值，分別返回的是true和false； indexOf和lastIndexOf方法相當於迴圈找到指定值，返回給你它的門牌號（索引）。