了解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 undefined.

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

对于多维javascript数组中的循环

我把它分解成:

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. 'undefined'来自哪里

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

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]

希望这是有道理的！