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 undefined。

我或多或少了解循环，我知道[i]和[j]用于访问数组（我想？）。我只是不明白为什么最后它会打印出这些数字？几年前我发现这个问题，但它只是解释了如何编写它们，而不是它们如何工作：

For loop in multidimensional javascript array

我将其分解为：

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]。循环遍历数组并打印出单个元素（在本例中为数组），在第二个中我猜它只是两次，因为有两个循环。我不明白的是：

为什么arr [j]中的最后一个数组没有打印出来（在哪里？ [5,6]去？）
为什么arr [i] [j]突然消除了数组而且只是打印出数字
其中＆＃39; undefined＆＃39;

有没有人可以帮我解决这个问题并解释代码在控制台中打印之前所采取的步骤？我真的很想理解它，但不知道如何以正确的方式搜索这个问题。

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

你上面的双循环工作如下：

 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] - 该索引包含一个数组 - 所以要转到INTO那个数组，我们需要使用array[i][j]

希望有意义！

Answer 3

尽管在数组上有一些caveats使用for-in循环，但它们有时可以帮助清除嵌套循环中的混乱：

＆＃13;

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

＆＃13;

同样code visualization可以澄清执行！

Answer 4

我知道这是一个古老的问题...但是，由于这是 ye olde google搜索的热门帖子，因此，我觉得添加一种可视化嵌套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

为什么arr [j]中的最后一个数组没有打印出来（[5] 6]去？）

您可能会注意到，如果您将j打印为console.log(j)，它会打印6次0, 1, 0, 1, 0, 1。而你正在尝试打印什么是arr[j]，[5, 6]将不会显示，因为它已打开 arr[2]

为什么arr [i] [j]突然删除数组并打印出数字

正如您所说，arr是一个包含3个数组的数组。 arr[i]代表 3个数组[1, 2]，[3, 4]或[5, 6]。而且j在 arr[i][j]表示这3个数组的索引。这就是所谓的 Multidimensional Array。 arr[i][j]不会消除数组，但会选择j内arr[i]索引中的值。

'undefined'来自

当你使用console.log时，它只是chrome的东西。 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;
}

在javascript

7 个答案:

结果预览