Comprendre les boucles imbriquées en javascript

Question

Je suis en train d'apprendre JavaScript sur freecodecamp et ils ont un exemple de boucles imbriquées dans l'un de leurs exercices:

 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]);
  }
}

Avec console.log = 1 2 3 4 5 6 non défini.

Je comprends plus ou moins les boucles, et je comprends que [i] et [j] sont utilisés pour accéder au tableau (je pense?). Je ne comprends tout simplement pas pourquoi à la fin, il ne fait qu'imprimer ces chiffres? J'ai trouvé cette question posée il y a quelques années, mais elle explique simplement comment les écrire, pas comment elles fonctionnent:

Pour la boucle dans un tableau javascript multidimensionnel

Je l'ai décomposé en:

var arr = [  [1,2], [3,4], [5,6]];for (var i=0; i < arr.length; i++) {
 console.log(arr[i]);}

Qui imprime 

[ 1, 2 ]
[ 3, 4 ]
[ 5, 6 ]
undefined

et 

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]);  }}

qui imprime:

[ 1, 2 ]
[ 1, 2 ]
[ 3, 4 ]
[ 3, 4 ]
[ 5, 6 ]
[ 5, 6 ]
undefined

et 

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]);  }}

qui imprime

[ 1, 2 ]
[ 3, 4 ]
[ 1, 2 ]
[ 3, 4 ]
[ 1, 2 ]
[ 3, 4 ]
undefined

Je comprends les deux premiers arr [i]. La boucle itère dans le tableau et affiche les éléments individuels (dans ce cas, un tableau) et dans le second, je suppose qu'elle le fait deux fois, car il y a deux boucles. Ce que je ne comprends pas c'est:

1. pourquoi le dernier tableau de arr [j] n'est pas imprimé (où est passé le [5, 6]?) 
2. pourquoi arr [i] [j] élimine soudainement les tableaux et juste affiche les nombres
3. d'où vient le «non défini»

Quelqu'un pourrait-il m'aider avec ceci et expliquer les étapes que le code prend avant de l'imprimer dans la console? Je voudrais vraiment comprendre mais je ne sais même pas comment chercher cette question correctement.

Answer 1

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

Ceci est un tableau de tableaux. C'est un peu plus facile à lire comme ceci:

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

Cela rend un peu plus facile de voir que vous avez un tableau de 3 tableaux. Le 'for' extérieur passera en boucle dans chacun des tableaux de premier niveau. Donc, la toute première boucle externe quand i = 0, vous allez récupérer le premier tableau interne [1,2]:

for (var i=0; i < arr.length; i++) {
    //First time through i=0 so arr[i]=[1,2];
}

Dans la boucle interne, vous allez parcourir chacune des 3 baies internes, une à la fois. 

for (var j=0; j < arr[i].length; j++) {
    //Handle inner array.
}

Cet argument saisit la longueur du tableau interne:

arr[i].length

Ainsi, lors de votre première visite dans la boucle externe, i = 0 et arr [i] sera égal à [1,2] car vous saisissez le 0e élément. N'oubliez pas que les éléments de tableau sont toujours comptés à partir de 0 et non de 1.

Enfin, vous imprimez les résultats avec:

console.log(arr[i][j]);

La première fois, vous pouvez le décomposer un peu. i = 0 et j = 0. arr [0] [0], qui traduit le premier élément de la matrice externe, puis le premier élément de la première matrice interne. Dans ce cas c'est "1":

[
    [1,2], <-- 0
    [3,4], <-- 1
    [5,6]  <-- 2
];

Le code passera en boucle dans le premier premier jeu [1,2], puis dans le deuxième [3,4], etc.

Answer 2

Je sais que c’est une vieille question ... Mais parce que c’est un message populaire de la ye olde google search, j’estime utile d’ajouter un moyen de visualiser ce qui se passe dans les boucles imbriquées.

En tant que professeur de JS, j'ai trouvé cette méthode extrêmement utile pour les personnes ayant une vision orientée et les personnes atteintes de dyslexie et de choses connexes). 

// 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);
  }
}

Aperçu des résultats

 

Answer 3

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 4

Malgré quelques mises en garde concernant l’utilisation de boucles for-in sur des tableaux, elles peuvent parfois aider à nettoyer un peu le désordre dans les boucles imbriquées:

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

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

Aussi visualisation du code peut clarifier l'exécution!

Answer 5

La double boucle que vous avez ci-dessus fonctionne comme ceci:

 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, 
  }
}

En clair anglais:  

Nous prenons le premier élément du tableau principal, qui est un tableau lui-même. Nous parcourons celui-ci en boucle et nous nous connectons à chaque index; il se termine par notre condition de longueur dans la deuxième boucle. Nous passons ensuite à l'index suivant du tableau principal, qui est un tableau lui-même ... et ainsi de suite jusqu'à la fin du tableau principal.

Pour accéder et indexer dans le tableau principal, nous devons utiliser array[i] - cet index contient un tableau - donc pour aller dans ce tableau, nous devons utiliser array[i][j]

J'espère que cela a du sens!

Answer 6

1. pourquoi le dernier tableau de arr [j] n'est pas imprimé (où est passé le [5, 6]?)

Vous remarquerez peut-être que si vous imprimez j comme console.log(j), ce sera imprimer 6 fois en tant que 0, 1, 0, 1, 0, 1. Et ce que vous essayez d'imprimer est arr[j] qui [5, 6] ne sera pas affiché car il est activé arr[2]

2. pourquoi arr [i] [j] élimine soudainement les tableaux et affiche simplement les nombres

Comme vous le dites, arr est un tableau de 3 tableaux. arr[i] représente 3 tableaux soit de [1, 2], [3, 4] ou [5, 6]. Et la j dans arr[i][j] représente l'index de ces 3 tableaux. C'est appelé Tableau multidimensionnel . arr[i][j] n'élimine pas le tableau, mais sélectionne la valeur dans l'index de j à l'intérieur de arr[i].

3. d'où vient le «non défini»

C'est juste un truc en chrome quand vous utilisez console.log. Chrome renvoie indéfini chaque fois que vous essayez de le faire. Essayez de le faire sur firefox et vous ne le verra plus.