Anidamiento de bucles for en JavaScript

Si tiene problemas para comprender el desafío de anidación de bucles de freeCodeCamp, no se preocupe. Te respaldamos.

En este problema, debe completar la multiplyAll()función y toma una matriz multidimensional como argumento. Recuerde que una matriz multidimensional, a veces llamado una matriz 2D, es sólo una matriz de matrices, por ejemplo, [[1,2], [3,4], [5,6]].

En el editor de la derecha, multiplyAll()se define de la siguiente manera:

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

Debe completar la función para que multiplique la productvariable por cada número en las submatrices del parámetro arr, que es una matriz multidimensional.

Hay muchas formas diferentes de resolver este problema, pero nos centraremos en el método más simple usando forbucles.

Configura tus forbucles

Debido a que arres una matriz multidimensional, necesitará dos forbucles: uno para recorrer cada una de las matrices de submatrices y otro para recorrer los elementos de cada submatriz.

Recorre las matrices internas

Para hacer esto, configure un forciclo como lo hizo en desafíos anteriores:

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

Tenga en cuenta que estamos usando en letlugar de varpara el ciclo y para declarar product. En este desafío, no notará una diferencia entre los dos, pero en general es una buena práctica usar ES6 consty letsiempre que pueda. Puede leer más sobre por qué en este artículo.

Ahora registre cada una de las submatrices en la consola:

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

Como está llamando multiplyAll()con [[1,2],[3,4],[5,6,7]]en la parte inferior, debería ver lo siguiente:

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

Recorre los elementos de cada submatriz

Ahora necesita recorrer cada número en las submatrices que acaba de iniciar sesión en la consola.

Elimine console.log(arr[i]);y cree otro forbucle dentro del que acaba de escribir:

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

Recuerda que, para el bucle interno, tenemos que comprobar la .lengthdel arr[i]puesto arr[i]es una de las submatrices que vimos anteriormente.

Ahora inicie sesión arr[i][j]en la consola para ver cada uno de los elementos individuales:

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

Finalmente, multiplique productpor cada elemento en cada una de las submatrices:

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 inicia sesión producten la consola, verá la respuesta correcta para cada caso de prueba:

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]]

Una mirada más cercana

Si aún no está seguro de por qué funciona el código anterior, no se preocupe, no está solo. Trabajar con bucles anidados es complicado e incluso los desarrolladores experimentados pueden confundirse.

En casos como este, puede resultar útil registrar algo más detallado en la consola. Regrese a su código e inicie sesión `Sub-array ${i}: ${arr[i]}`en la consola justo antes del forciclo interno :

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

En el forciclo externo , cada iteración pasa por las submatrices en arr. Debería ver esto en la consola:

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

Tenga en cuenta que estamos usando literales de plantilla arriba. `Sub-array ${i}: ${arr[i]}`es lo mismo que 'Sub-array ' + i + ': ' + arr[i], pero mucho más fácil de escribir.

Ahora en el forbucle interno , inicie sesión `Element ${j}: ${arr[i][j]}`en la consola:

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

El forbucle interno pasa por cada elemento en cada subarreglo ( arr[i]), por lo que debería ver esto en la consola:

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 primera iteración de iagarra la primera sub-matriz, [1, 2]. Luego, la primera iteración de jpasa por cada elemento en esa submatriz:

// 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 ...

Este ejemplo es bastante simple, pero arr[i][j]aún puede ser difícil de entender sin registrar varias cosas en la consola.

Una mejora rápida que podemos hacer es declarar una subArrayvariable en el forbucle externo y establecerla igual a 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]]); 

Luego, simplemente haga algunos ajustes en el código para usar la nueva subArrayvariable en lugar 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]]); 

Eso debería ser todo lo que necesita saber sobre matrices multidimensionales y forbucles anidados . ¡Ahora sal y repite con los mejores!