javascript - 了解 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]是用来访问数组的(我觉得？)。我只是不明白为什么最后它只打印出这些数字？我发现几年前有人问过这个问题，但它只是解释了如何编写它们，而不是它们是如何工作的:

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

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