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:
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.
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.
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);
}
}
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]])
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!
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!
Vous remarquerez peut-être que si vous imprimez
j
commeconsole.log(j)
, ce sera imprimer 6 fois en tant que0, 1, 0, 1, 0, 1
. Et ce que vous essayez d'imprimer estarr[j]
qui[5, 6]
ne sera pas affiché car il est activéarr[2]
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 laj
dansarr[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 dej
à l'intérieur dearr[i]
.
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.