瞭解嵌套的for循環在JavaScript

Question

我學習JavaScript在上freecodecamp的那一刻，他們有一個例子嵌套的for循環在他們excercises之一：

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未定義。

我理解循環或多或少，並且我明白[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. 爲什麼改編[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時你要抓住第一內陣列[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和改編[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

1. 爲什麼在ARR [J]數組最後不被打印出來（在哪裏的[5， 6]去了？）

您可能會注意到，如果你打印出來j爲console.log(j)，它會 打印6次，作爲0, 1, 0, 1, 0, 1。而你要打印 什麼arr[j]這[5, 6]將不會顯示由於其對 arr[2]

爲什麼改編[i] [j]頓時消除了陣列和僅僅打印出的數字

作爲你的狀態存在，arr是3個數組的數組。 arr[i]代表 3個陣列，分別是[1, 2],[3, 4]或[5, 6]。 , arr[i][j]表示這3個數組的索引。這叫做 Multidimensional Array。 arr[i][j]不會消除該數組，但它會選擇arr[i]內部的j索引中的值。

其中 '未定義' 來自

這只是鉻啄當您使用console.log。 Chrome返回 未定義，每當你嘗試這樣做。嘗試在Firefox上做到這一點，你會不會再看到它。

Answer 4

儘管使用陣列上進行，在循環的一些​​，他們可以IMO有時會幫助清除混亂中嵌套循環位：

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

 
for (i in arr){ 
 
     for (j in arr[i]){ 
 
     console.log(arr[i][j]); 
 
     } 
 
    }

而且code visualization可以澄清執行！