迭代

傳統的 for 迴圈

傳統的 for 迴圈有三個組成部分:

  1. 初始化: 在第一次執行檢視塊之前執行
  2. 條件: 每次執行迴圈塊之前檢查一個條件,如果為 false 則退出迴圈
  3. 事後的想法: 每次執行迴圈塊後執行

這三個元件通過 ; 符號彼此分開。這三個元件中的每個元件的內容都是可選的,這意味著以下是可能的最小 for 迴圈:

for (;;) {
    // Do stuff
}

當然,你需要在 for-loop 中的某處包含 if(condition === true) { break; }if(condition === true) { return; } 才能讓它停止執行。

但是,通常,初始化用於宣告索引,條件用於將該索引與最小值或最大值進行比較,並使用事後補充來增加索引:

for (var i = 0, length = 10; i < length; i++) {
    console.log(i);
}

使用傳統的 for 迴圈遍歷陣列

迴圈遍歷陣列的傳統方法是:

for (var i = 0, length = myArray.length; i < length; i++) {
    console.log(myArray[i]);
}

或者,如果你更喜歡向後迴圈,則執行以下操作:

for (var i = myArray.length - 1; i > -1; i--) {
    console.log(myArray[i]);
}

但是,有許多可能的變化,例如這一個:

for (var key = 0, value = myArray[key], length = myArray.length; key < length; value = myArray[++key]) {
    console.log(value);
}

……或者這一個……

var i = 0, length = myArray.length;
for (; i < length;) {
    console.log(myArray[i]);
    i++;
}

……或者這個:

var key = 0, value;
for (; value = myArray[key++];){
    console.log(value);
}

無論哪種效果最好,主要取決於個人品味和你正在實施的具體用例。

請注意,所有瀏覽器都支援這些變體,包括非常舊的瀏覽器!

一個 while 迴圈

for 迴圈的一個替代方案是 while 迴圈。要遍歷陣列,你可以這樣做:

var key = 0;
while(value = myArray[key++]){
    console.log(value);
}

與傳統的 for 迴圈一樣,即使是最古老的瀏覽器也支援 while 迴圈。

另請注意,每個 while 迴圈都可以重寫為 for 迴圈。例如,上面的 while 迴圈與此 for 迴圈的行為完全相同:

for(var key = 0; value = myArray[key++];){
    console.log(value);
}

for...in

在 JavaScript 中,你也可以這樣做:

for (i in myArray) {
    console.log(myArray[i]);
}

但是,這應該謹慎使用,因為它在所有情況下都不像傳統的 for 迴圈那樣,並且存在需要考慮的潛在副作用。看看 為什麼在陣列迭代中使用“for … in”是一個壞主意? 更多細節。

for...of

在 ES 6 中, for-of 迴圈是迭代陣列值的推薦方法:

Version >= 6

let myArray = [1, 2, 3, 4];
for (let value of myArray) {
  let twoValue = value * 2;
  console.log("2 * value is: %d", twoValue);
}

以下示例顯示了 for...of 迴圈和 for...in 迴圈之間的區別:

Version >= 6

let myArray = [3, 5, 7];
myArray.foo = "hello";

for (var i in myArray) {
  console.log(i); // logs 0, 1, 2, "foo"
}

for (var i of myArray) {
  console.log(i); // logs 3, 5, 7
}

Array.prototype.keys()

Array.prototype.keys() 方法可用於迭代這樣的指標:

Version >= 6

let myArray = [1, 2, 3, 4];
for (let i of myArray.keys()) {
  let twoValue = myArray[i] * 2;
  console.log("2 * value is: %d", twoValue);
}

Array.prototype.forEach()

.forEach(...) 方法是在 ES 5 及以上的選項。它受到所有現代瀏覽器以及 Internet Explorer 9 及更高版本的支援。

Version >= 五

[1, 2, 3, 4].forEach(function(value, index, arr) {
  var twoValue = value * 2;
  console.log("2 * value is: %d", twoValue);
});

與傳統的 for 迴圈相比,我們不能跳出 .forEach() 的迴圈。在這種情況下,請使用 for 迴圈,或使用下面給出的部分迭代。

在所有版本的 JavaScript 中,都可以使用傳統的 C 風格 for 迴圈遍歷陣列的索引。

var myArray = [1, 2, 3, 4];
for(var i = 0; i < myArray.length; ++i) {
  var twoValue = myArray[i] * 2;
  console.log("2 * value is: %d", twoValue);
}

也可以使用 while 迴圈:

var myArray = [1, 2, 3, 4],
    i = 0, sum = 0;
while(i++ < myArray.length) {
  sum += i;
}
console.log(sum);

Array.prototype.every

從 ES5 開始,如果你想遍歷一個陣列的一部分,你可以使用 Array.prototype.every ,它迭代直到我們返回 false

Version >= 五

// [].every() stops once it finds a false result
// thus, this iteration will stop on value 7 (since 7 % 2 !== 0)
[2, 4, 7, 9].every(function(value, index, arr) {
  console.log(value);
  return value % 2 === 0; // iterate until an odd number is found
}); 

在任何 JavaScript 版本中等效:

var arr = [2, 4, 7, 9];
for (var i = 0; i < arr.length && (arr[i] % 2 !== 0); i++) { // iterate until an odd number is found
  console.log(arr[i]);
}

Array.prototype.some

Array.prototype.some 迭代,直到我們返回 true

Version >= 五

// [].some stops once it finds a false result
// thus, this iteration will stop on value 7 (since 7 % 2 !== 0)
[2, 4, 7, 9].some(function(value, index, arr) {
  console.log(value);
  return value === 7; // iterate until we find value 7
}); 

在任何 JavaScript 版本中等效:

var arr = [2, 4, 7, 9];
for (var i = 0; i < arr.length && arr[i] !== 7; i++) {
  console.log(arr[i]);
}

最後,許多實用程式庫也有自己的 foreach 變體。其中三個最受歡迎的是:

****jQuery 中的 jQuery.each()

$.each(myArray, function(key, value) {
    console.log(value);
});

_.each() ,在 Underscore.js

_.each(myArray, function(value, key, myArray) {
    console.log(value);
});

_.forEach() ,在 Lodash.js

_.forEach(myArray, function(value, key) {
    console.log(value);
});

另請參閱關於 SO 的以下問題,其中大部分資訊最初發布在: