Imbrication de boucles en JavaScript

Si vous ne parvenez pas à comprendre le défi Nesting For Loops de freeCodeCamp, ne vous inquiétez pas. Nous vous soutenons.

Dans ce problème, vous devez terminer la multiplyAll()fonction et prend un tableau multidimensionnel comme argument. Rappelez - vous qu'un tableau multidimensionnel, parfois appelé un tableau 2D, est juste un tableau de tableaux, par exemple, [[1,2], [3,4], [5,6]].

Dans l'éditeur de droite, multiplyAll()se définit comme suit:

function multiplyAll(arr) { var product = 1; // Only change code below this line // Only change code above this line return product; } multiplyAll([[1,2],[3,4],[5,6,7]]); 

Vous devez compléter la fonction afin qu'elle multiplie la productvariable par chaque nombre dans les sous-tableaux du paramètre arr, qui est un tableau multidimensionnel.

Il existe de nombreuses façons de résoudre ce problème, mais nous allons nous concentrer sur la méthode la plus simple utilisant des forboucles.

Configurez vos forboucles

Comme il arrs'agit d'un tableau multidimensionnel, vous aurez besoin de deux forboucles: une pour parcourir chacun des tableaux de sous-tableaux et une autre pour parcourir les éléments de chaque sous-tableau.

Boucle à travers les tableaux internes

Pour ce faire, configurez une forboucle comme vous l'avez fait dans les défis précédents:

function multiplyAll(arr) { let product = 1; // Only change code below this line for (let i = 0; i < arr.length; i++) { } // Only change code above this line return product; } multiplyAll([[1,2],[3,4],[5,6,7]]); 

Notez que nous utilisons à la letplace de varfor the loop et to declare product. Dans ce défi, vous ne remarquerez pas de différence entre les deux, mais il est généralement recommandé d'utiliser les ES6 constet letchaque fois que vous le pouvez. Vous pouvez en savoir plus sur les raisons dans cet article.

Maintenant, connectez chacun des sous-tableaux à la console:

function multiplyAll(arr) { let product = 1; // Only change code below this line for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } // Only change code above this line return product; } multiplyAll([[1,2],[3,4],[5,6,7]]); 

Parce que vous appelez multiplyAll()avec [[1,2],[3,4],[5,6,7]]en bas, vous devriez voir ce qui suit:

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

Parcourez les éléments de chaque sous-tableau

Vous devez maintenant parcourir chaque numéro des sous-tableaux que vous venez de connecter à la console.

Supprimez console.log(arr[i]);et créez une autre forboucle à l'intérieur de celle que vous venez d'écrire:

function multiplyAll(arr) { let product = 1; // Only change code below this line for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr[i].length; j++) { } } // Only change code above this line return product; } multiplyAll([[1,2],[3,4],[5,6,7]]); 

Rappelez-vous que, pour la boucle interne, nous devons vérifier le .lengthde arr[i]puisque arr[i]est l'un des sous-tableaux que nous avons examinés plus tôt.

Connectez-vous maintenant arr[i][j]à la console pour voir chacun des éléments individuels:

function multiplyAll(arr) { let product = 1; // Only change code below this line for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr[i].length; j++) { console.log(arr[i][j]); } } // Only change code above this line return product; } multiplyAll([[1,2],[3,4],[5,6,7]]); 
1 2 3 4 5 6 7

Enfin, multipliez productpar chaque élément de chacun des sous-tableaux:

function multiplyAll(arr) { let product = 1; // Only change code below this line for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr[i].length; j++) { product *= arr[i][j]; } } // Only change code above this line return product; } multiplyAll([[1,2],[3,4],[5,6,7]]);

Si vous vous connectez productà la console, vous verrez la bonne réponse pour chaque scénario de test:

function multiplyAll(arr) { let product = 1; // Only change code below this line for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr[i].length; j++) { product *= arr[i][j]; } } // Only change code above this line console.log(product); return product; } multiplyAll([[1,2],[3,4],[5,6,7]]);
6 // [[1], [2], [3]] 5040 // [[1, 2], [3, 4], [5, 6, 7]] 54 // [[5, 1], [0.2, 4, 0.5], [3, 9]]

Regarder de plus près

Si vous ne savez toujours pas pourquoi le code ci-dessus fonctionne, ne vous inquiétez pas, vous n'êtes pas seul. Travailler avec des boucles imbriquées est compliqué, et même les développeurs expérimentés peuvent être confus.

Dans de tels cas, il peut être utile de consigner quelque chose de plus détaillé dans la console. Revenez à votre code et connectez-vous `Sub-array ${i}: ${arr[i]}`à la console juste avant la forboucle interne :

function multiplyAll(arr) { let product = 1; // Only change code below this line for (let i = 0; i < arr.length; i++) { console.log(`Sub-array ${i}: ${arr[i]}`); for (let j = 0; j < arr[i].length; j++) { product *= arr[i][j]; } } // Only change code above this line return product; } multiplyAll([[1,2],[3,4],[5,6,7]]);

Dans la forboucle externe , chaque itération passe par les sous-tableaux dans arr. Vous devriez voir ceci dans la console:

Sub-array 0: 1,2 Sub-array 1: 3,4 Sub-array 2: 5,6,7

Notez que nous utilisons les littéraux de modèle ci-dessus. `Sub-array ${i}: ${arr[i]}`est le même que 'Sub-array ' + i + ': ' + arr[i], juste beaucoup plus facile à écrire.

Maintenant dans la forboucle interne , connectez-vous `Element ${j}: ${arr[i][j]}`à la console:

function multiplyAll(arr) { let product = 1; // Only change code below this line for (let i = 0; i < arr.length; i++) { console.log(`Sub-array ${i}: ${arr[i]}`); for (let j = 0; j < arr[i].length; j++) { console.log(`Element ${j}: ${arr[i][j]}`); product *= arr[i][j]; } } // Only change code above this line return product; } multiplyAll([[1,2],[3,4],[5,6,7]]);

La forboucle interne traverse chaque élément de chaque sous-tableau ( arr[i]), vous devriez donc voir ceci dans la console:

Sub-array 0: 1,2 Element 0: 1 Element 1: 2 Sub-array 1: 3,4 Element 0: 3 Element 1: 4 Sub-array 2: 5,6,7 Element 0: 5 Element 1: 6 Element 2: 7

La première itération de iattrape le premier sous-réseau, [1, 2]. Ensuite, la première itération de jpasse par chaque élément de ce sous-tableau:

// i is 0 arr[0] // [1, 2]; // j is 0 arr[0][0] // 1 // j is 1 arr[0][1] // 2 ----- // i is 1 arr[1] // [3, 4] // j is 0 arr[1][0] // 3 // j is 1 arr[1][1] // 4 ...

Cet exemple est assez simple, mais arr[i][j]peut toujours être difficile à comprendre sans enregistrer plusieurs choses sur la console.

Une amélioration rapide que nous pouvons faire est de déclarer une subArrayvariable dans la forboucle externe et de la définir égale à arr[i]:

function multiplyAll(arr) { let product = 1; // Only change code below this line for (let i = 0; i < arr.length; i++) { const subArray = arr[i]; for (let j = 0; j < arr[i].length; j++) { product *= arr[i][j]; } } // Only change code above this line return product; } multiplyAll([[1,2],[3,4],[5,6,7]]); 

Ensuite, apportez simplement quelques modifications au code pour utiliser la nouvelle subArrayvariable au lieu de arr[i]:

function multiplyAll(arr) { let product = 1; // Only change code below this line for (let i = 0; i < arr.length; i++) { const subArray = arr[i]; for (let j = 0; j < subArray.length; j++) { product *= subArray[j]; } } // Only change code above this line return product; } multiplyAll([[1,2],[3,4],[5,6,7]]); 

Cela devrait être tout ce que vous devez savoir sur les tableaux multidimensionnels et les forboucles imbriquées . Maintenant, sortez et répétez avec les meilleurs d'entre eux!