理解javascript中的嵌套for循環

Question

我目前正在 freecodecamp 上學習 JavaScript，他們的一個練習中有一個嵌套 for 循環的示例：

 var arr = [[1,2], [3,4], [5,6]];
 for (var i=0; i < arr.length; i++) {
  for (var j=0; j < arr[i].length; j++) {
    console.log(arr[i][j]);
  }
}

使用 console.log = 1 2 3 4 5 6 未定義。

我或多或少了解 for 循環，並且我了解 [i] 和 [j] 用於訪問數組（我認為？）。 我只是不明白為什么最后它只打印出這些數字？ 幾年前我發現這個問題被問到，但它只是解釋了如何編寫它們，而不是它們如何工作：

多維javascript數組中的for循環

我把它分解成：

var arr = [  [1,2], [3,4], [5,6]];for (var i=0; i < arr.length; i++) {
 console.log(arr[i]);}

哪個打印出來

[ 1, 2 ]
[ 3, 4 ]
[ 5, 6 ]
undefined

和

var arr = [  [1,2], [3,4], [5,6]];
for (var i=0; i < arr.length; i++) {  
 for (var j=0; j < arr[i].length; j++) {    
  console.log(arr[i]);  }}

打印出來：

[ 1, 2 ]
[ 1, 2 ]
[ 3, 4 ]
[ 3, 4 ]
[ 5, 6 ]
[ 5, 6 ]
undefined

和

var arr = [  [1,2], [3,4], [5,6]];
 for (var i=0; i < arr.length; i++) {  
  for (var j=0; j < arr[i].length; j++) {    
   console.log(arr[j]);  }}

打印出來

[ 1, 2 ]
[ 3, 4 ]
[ 1, 2 ]
[ 3, 4 ]
[ 1, 2 ]
[ 3, 4 ]
undefined

我理解前兩個arr[i]。 循環遍歷數組並打印出單個元素（在本例中為數組），在第二個中我猜它只執行兩次，因為有兩個循環。 我不明白的是：

1. 為什么 arr[j] 中的最后一個數組沒有打印出來（[5, 6] 去哪里了？）
2. 為什么 arr[i][j] 突然消除了數組並只打印出數字
3. “未定義”來自哪里

任何人都可以幫我解決這個問題並解釋代碼在控制台中打印之前所采取的步驟嗎？ 我真的很想理解它，但甚至不知道如何以正確的方式搜索這個問題。

Answer 1

var arr = [[1,2], [3,4], [5,6]];

這是一個數組數組。 像這樣閱讀會更容易一些：

var arr = [
            [1,2],
            [3,4],
            [5,6]
          ];

這使得更容易看到您有一個由 3 個數組組成的數組。 外部“for”將循環遍歷每個第一級數組。 因此，當 i=0 時，第一個外部 for 循環將獲取第一個內部數組 [1,2]：

for (var i=0; i < arr.length; i++) {
    //First time through i=0 so arr[i]=[1,2];
}

在內部循環中，您將一次遍歷 3 個內部數組中的每一個。

for (var j=0; j < arr[i].length; j++) {
    //Handle inner array.
}

此參數獲取內部數組的長度：

arr[i].length

因此，在您第一次通過外循環時， i=0 並且 arr[i] 將等於 [1,2]，因為您正在抓取第 0 個元素。 請記住，數組元素始終從 0 開始計數，而不是從 1 開始。

最后，您將打印出結果：

console.log(arr[i][j]);

第一次通過你可以把它分解一點。 i=0 和 j=0。 arr[0][0] 轉換為從外部數組中獲取第一個元素，然后從第一個內部數組中獲取第一個元素。 在這種情況下，它是“1”：

[
    [1,2], <-- 0
    [3,4], <-- 1
    [5,6]  <-- 2
];

代碼將循環遍歷第一個第一個集合 [1,2]，然后是第二個 [3,4]，依此類推。

Answer 2

上面的雙 for 循環的工作原理如下：

 var arr = [[1,2], [3,4], [5,6]];

 for (var i=0; i < arr.length; i++) {
  // i = 0, then we loop below:
  for (var j=0; j < arr[i].length; j++) {
    //here we loop through the array which is in the main array
    //in the first case, i = 0, j = 1, then we loop again, i = 0, j = 1
    console.log(arr[i][j]);
    //after we finish the stuff in the 'j' loop we go back to the 'i' loop 
    //and here i = 1, then we go down again, i, remains at 1, and j = 0, then j = 1
    //....rinse and repeat, 
  }
}

簡單的英語：

我們獲取主數組中的第一個元素，它是一個數組本身，我們遍歷它，並記錄每個索引，這在第二個循環中由我們的長度條件終止。 然后我們移動到主數組的下一個索引，它是一個數組本身......等等，直到我們到達主數組的末尾

要訪問和索引主數組，我們需要使用array[i] - 該索引保存一個數組 - 所以要進入該數組，我們需要使用array[i][j]

希望這是有道理的！

Answer 3

盡管在數組上使用 for-in 循環有一些注意事項，但它們有時可以幫助清除嵌套循環中的混亂：

 var arr = [[1,2], [3,4],[5,6]]; for (i in arr){ for (j in arr[i]){ console.log(arr[i][j]); } }

代碼可視化也可以闡明執行！

Answer 4

我知道這是一個老問題......但是因為這是來自ye olde google search的熱門帖子，我覺得添加一種方法來可視化嵌套 for 循環中發生的事情會很有幫助。

作為一名 JS 老師，我發現這種方法對以視覺為導向的人和有閱讀障礙和相關事物的人非常有幫助）。

 // Original: https://repl.it/@justsml/nested-loop-visualizations var nums = [[1,2,3], [4,5,6], [7,8,9]]; console.log('Example w/ Numbers:\\n'); console.log('The array data: ', JSON.stringify(nums)); for (var i=0; i < nums.length; i++) { // Main/"top" array - accessing via "arr[i]" for (var j=0; j < nums[i].length; j++) { // here we loop through the "child" arrays let helpfulLabel = `nums[${i}][${j}]` let value = nums[i][j] console.log(helpfulLabel, 'Value=' + value); } } console.log('\\nExample w/ String Data:\\n'); var letters = [['a', 'b', 'c'], ['d', 'e', 'f'], ['x', 'y', 'z']]; console.log('The array data: ', JSON.stringify(letters)); for (var i=0; i < letters.length; i++) { for (var j=0; j < letters[i].length; j++) { let helpfulLabel = `letters[${i}][${j}]` let value = letters[i][j] console.log(helpfulLabel, 'Value=' + value); } }

結果預覽

Answer 5

function multiplyAll(arr) {
   var product = 1;
   // Only change code below this line
   for (var i = 0; i < arr.length; i++) {
     for (var j = 0; j < arr[i].length; j++) {
       product *= arr[i][j];
       console.log(product)
     }
   }
   // Only change code above this line
   return product;
 }
 // Modify values below to test your code
 multiplyAll([[1], [2], [3]])
 //multiplyAll([[1, 2], [3, 4], [5, 6, 7]]);
 //multiplyAll([[5, 1], [0.2, 4, 0.5], [3, 9]])

Answer 6

1. 為什么 arr[j] 中的最后一個數組沒有打印出來（[5, 6] 去哪里了？）

您可能會注意到，如果將j打印為console.log(j) ，它將打印 6 次為0, 1, 0, 1, 0, 1 。 而您要打印的是arr[j] ，因為它在arr[2]上[5, 6]因此不會顯示[5, 6] arr[2]

2. 為什么 arr[i][j] 突然消除了數組並只打印出數字

正如你在那里所說的， arr是一個由 3 個數組組成的數組。 arr[i]表示[1, 2] 、 [3, 4]或[5, 6] 3 個數組。 和j在arr[i][j]表示的那些3個陣列的索引。 這稱為多維數組。 arr[i][j]不會消除數組，但它會選擇arr[i]中j的索引中的值。

3. “未定義”來自哪里

當您使用console.log時，它只是鍍鉻物。 每當您嘗試這樣做時，Chrome 都會返回 undefined。 嘗試在 Firefox 上執行此操作，您將不再看到它。

Answer 7

function multiply(arr) {
    var product = 1;

    for (var i = 0; i < arr.length; i++) {
        for (var j = 0; j < arr[i].length; j++) {
            product *= arr[i][j];
        }
    }

    return product;
}