Indlejring af sløjfer i JavaScript

Hvis du har problemer med at forstå freeCodeCamp's Nesting For Loops-udfordring, skal du ikke bekymre dig. Vi har din ryg.

I dette problem skal du udføre multiplyAll()funktionen og tager et multidimensionelt array som argument. Husk, at et flerdimensionelt array, undertiden kaldet et 2D-array, kun er et array af arrays, for eksempel [[1,2], [3,4], [5,6]].

I redaktøren til højre multiplyAll()defineres som følger:

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

Du er nødt til at fuldføre funktionen, så den multiplicerer productvariablen med hvert nummer i underarrayerne af parameteren arr, som er et flerdimensionelt array.

Der er mange forskellige måder at løse dette problem på, men vi fokuserer på den enkleste metode ved hjælp af forsløjfer.

Opsæt dine forsløjfer

Fordi det arrer et multidimensionelt array, skal du bruge to forsløjfer: en til at løkke gennem hver af underarrayarrayerne og en anden til at løkke gennem elementerne i hver underarray.

Loop gennem de indre arrays

For at gøre dette skal du oprette en forløkke, som du har gjort i tidligere udfordringer:

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

Bemærk, at vi bruger i letstedet for vartil loop og til at erklære product. I denne udfordring bemærker du ikke en forskel mellem de to, men generelt er det god praksis at bruge ES6 constog letnår som helst du kan. Du kan læse mere om hvorfor i denne artikel.

Log nu hver af underarrayerne til konsollen:

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

Fordi du ringer multiplyAll()med [[1,2],[3,4],[5,6,7]]i bunden, skal du se følgende:

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

Loop gennem elementerne i hvert underarray

Nu skal du løbe gennem hvert nummer i de underarrays, du lige har logget på konsollen.

Fjern console.log(arr[i]);og opret en anden forsløjfe inde i den, du lige har skrevet:

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

Husk, at for den indre løkke, er vi nødt til at tjekke det .lengtharr[i]siden arr[i]er en af de sub-arrays vi kiggede på tidligere.

Log nu arr[i][j]på konsollen for at se hvert af de enkelte elementer:

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

Endelig gang productmed hvert element i hver af underarrayerne:

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

Hvis du logger productpå konsollen, kan du se det rigtige svar for hver testtilfælde:

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

Et nærmere kig

Hvis du stadig ikke er sikker på, hvorfor koden ovenfor fungerer, skal du ikke bekymre dig - du er ikke alene. At arbejde med indlejrede sløjfer er kompliceret, og selv erfarne udviklere kan blive forvirrede.

I tilfælde som dette kan det være nyttigt at logge noget mere detaljeret til konsollen. Gå tilbage til din kode og log `Sub-array ${i}: ${arr[i]}`på konsollen lige inden den indre forsløjfe:

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

I den ydre forsløjfe går hver iteration gennem underarrayerne i arr. Du skal se dette i konsollen:

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

Bemærk, at vi bruger skabelonbogstaver ovenfor. `Sub-array ${i}: ${arr[i]}`er det samme som 'Sub-array ' + i + ': ' + arr[i], bare meget lettere at skrive.

forLog nu på den indre sløjfe `Element ${j}: ${arr[i][j]}`til konsollen:

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

Den indre forsløjfe går gennem hvert element i hvert underarray ( arr[i]), så du skal se dette i konsollen:

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

Den første iteration af igriber den første sub-array, [1, 2]. Derefter går den første iteration af jhvert element i det underarray:

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

Dette eksempel er ret simpelt, men arr[i][j]kan stadig være svært at forstå uden at logge flere ting på konsollen.

En hurtig forbedring, vi kan foretage, er at erklære en subArrayvariabel i den ydre forsløjfe og sætte den lig med 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]]); 

Derefter skal du blot foretage et par tweaks til koden for at bruge den nye subArrayvariabel i stedet for 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]]); 

Det skal være alt hvad du behøver at vide om flerdimensionale arrays og indlejrede forsløjfer. Gå nu ud der og gentag med det bedste fra dem!