JS遍歷陣列（for in和forEach迴圈）

JS 遍歷陣列（迴圈陣列）的方式有多種，可以使用傳統的 for 迴圈，也可以使用升級版的 for in 迴圈，還可以使用 Array 型別的 forEach() 方法；如果希望遍曆物件的鍵名，還可以使用 keys() 方法。

使用 for 和 for in遍歷陣列

for 和 for/in 語句都可以疊代陣列。for 語句需要配合 length 屬性和陣列下標來實現，執行效率沒有 for/in 語句高。另外，for/in 語句會跳過空元素。

對於超長陣列來說，建議使用 for/in 語句進行疊代。 

範例1

下面範例使用 for 語句疊代陣列，過濾出所有數位元素。

var a = [1, 2, ,,,,,,true,,,,,,, "a",,,,,,,,,,,,,,,4,,,,,56,,,,,,"b"];  //定義陣列
var b = [], num = 0;
for (var i = 0; i < a.length; i ++) {  //遍歷陣列
    if (typeof a[i] == "number")  //如果為數位，則返回該元素的值
        b.push(a[i]);
    num ++;  //計數器
}
console.log(num);  //返回42，說明迴圈了42次
console.log(b);  //返回[1,2,4,56]

範例2

下面程式碼使用 for/in 語句疊代範例 1 中的陣列 a。在 for/in 迴圈結構中，變數 i 表示陣列的下標，而 a[i] 為可以讀取指定下標的元素值。

var b = [], num = 0;
for (var i in a) {  //遍歷陣列
    if（typeof a[i] == "number")  //如果為數位，則返回該元素的值
        b.push(a[i]);
    num ++;  //計數器
}
console.log(num);   //返回7，說明迴圈了7次
console.log(b);  //返回[1,2,4,56]

通過計時器可以看到，for/in 語句疊代陣列，僅迴圈了 7 次，而 for 語句迴圈了 42 次。

使用 forEach 遍歷陣列

Array 型別為每個陣列定義了 forEach() 原型方法，使用該方法可以為陣列執行迭代操作。具體說明如下：

array.forEach(callbackfn[, thisArg]);

引數說明如下：

• array：一個陣列物件。
• callbackfn：必需引數，最多可以接收三個引數的函數。forEach 將為陣列中的每個元素呼叫 callbackfn 函數一次。
• thisArg：可選引數，callbackfn 函數中的 this 可參照的物件。如果省略 thisArg，則 this 的值為 undefined。

對於陣列中出現的每個元素，forEach 方法都會呼叫 callbackfn 函數一次，採用昇序索引順序，但不會為陣列中空元素呼叫回撥函數。

除了陣列物件之外，forEach 方法還可以用於有 length 屬性且具有已按數位編製索引的屬性名的任何物件，如關聯陣列物件、Arguments 等。

回撥函數語法如下：

funtion callbackfn(value, index, array);

最多可以使用三個引數來宣告回撥函數。回撥函數的引數說明如下。

• value：陣列元素的值。
• index：陣列元素的數位索引。
• array：包含該元素的陣列物件。

forEach 方法不直接修改原始陣列，但回撥函數可能會修改它。在 forEach 方法啟動後修改陣列物件所獲得的結果如表所示。

回撥函數修改陣列的影響

forEach 方法啟動後的條件	元素是否傳遞給回撥函數
在陣列的原始長度之外新增元素	否
新增元素以填充陣列中缺少的元素	是，如果該索引尚未傳遞給回撥函數
元素已更改	是，如果該元素尚未傳遞給回撥函數
從陣列中刪除元素	否，除非該元素已傳遞給回撥函數

範例1

下面範例使用 forEach 疊代陣列 a，然後把每個元素的值和下標索引輸出顯示，程式碼如下：

function f(value,index,array) {
    console.log("a[" + index + "] = " + value);
}
var a = ['a', 'b', 'c'];
a.forEach(f);

演示結果如下：

---