了解 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. “未定义”来自哪里

谁能帮我解决这个问题并解释代码在控制台中打印出来之前所采取的步骤？我真的很想了解它，但甚至不知道如何以正确的方式搜索这个问题。

原文由 stellatores 发布，翻译遵循 CC BY-SA 4.0 许可协议

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]，依此类推。

原文由 Gremash 发布，翻译遵循 CC BY-SA 3.0 许可协议

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]

希望这是有道理的！

原文由 omarjmh 发布，翻译遵循 CC BY-SA 3.0 许可协议