Verschachteln von Schleifen in JavaScript

Machen Sie sich keine Sorgen, wenn Sie Probleme haben, die Nesting For Loops-Herausforderung von freeCodeCamp zu verstehen. Wir geben dir Rückendeckung.

In diesem Problem müssen Sie die multiplyAll()Funktion vervollständigen und ein mehrdimensionales Array als Argument verwenden. Denken Sie daran, dass ein mehrdimensionales Array, manchmal auch als 2D-Array bezeichnet, beispielsweise nur ein Array von Arrays ist [[1,2], [3,4], [5,6]].

Im Editor auf der rechten Seite multiplyAll()ist wie folgt definiert:

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

Sie müssen die Funktion ausführen, damit die productVariable mit jeder Zahl in den Unterarrays des Parameters multipliziert wird arr, bei dem es sich um ein mehrdimensionales Array handelt.

Es gibt viele verschiedene Möglichkeiten, um dieses Problem zu lösen, aber wir konzentrieren uns auf die einfachste Methode mit forSchleifen.

Richten Sie Ihre forLoops ein

Da arres sich um ein mehrdimensionales Array handelt, benötigen Sie zwei forSchleifen: eine zum Durchlaufen der einzelnen Arrays und eine weitere zum Durchlaufen der Elemente in jedem Subarray.

Schleife durch die inneren Arrays

Richten Sie dazu eine forSchleife ein, wie Sie es bei früheren Herausforderungen getan haben:

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

Beachten Sie, dass wir letanstelle von varfor für die Schleife verwenden und deklarieren product. Bei dieser Herausforderung werden Sie keinen Unterschied zwischen den beiden bemerken, aber im Allgemeinen ist es empfehlenswert, ES6 zu verwenden constund letwann immer Sie können. Weitere Informationen dazu finden Sie in diesem Artikel.

Protokollieren Sie nun jedes der Sub-Arrays in der Konsole:

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

Da Sie unten multiplyAll()mit anrufen [[1,2],[3,4],[5,6,7]], sollten Sie Folgendes sehen:

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

Durchlaufen Sie die Elemente in jedem Subarray

Jetzt müssen Sie jede Nummer in den Sub-Arrays durchlaufen, die Sie gerade an der Konsole angemeldet haben.

Entfernen console.log(arr[i]);und erstellen Sie eine weitere forSchleife innerhalb der gerade geschriebenen:

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

Denken Sie daran , dass für die innere Schleife, müssen wir die überprüfen .lengthvon arr[i]da arr[i]ist einer der Unteranordnungen wir früher aussah.

Melden Sie sich jetzt arr[i][j]an der Konsole an, um die einzelnen Elemente anzuzeigen:

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

Schließlich multiplizieren Sie productmit jedem Element in jedem der Unterarrays:

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

Wenn Sie sich productan der Konsole anmelden , wird für jeden Testfall die richtige Antwort angezeigt:

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

Eine genauere Betrachtung

Wenn Sie sich immer noch nicht sicher sind, warum der obige Code funktioniert, machen Sie sich keine Sorgen - Sie sind nicht allein. Das Arbeiten mit verschachtelten Schleifen ist kompliziert und selbst erfahrene Entwickler können verwirrt sein.

In solchen Fällen kann es hilfreich sein, etwas Detaillierteres in der Konsole zu protokollieren. Kehren Sie zu Ihrem Code zurück und melden Sie `Sub-array ${i}: ${arr[i]}`sich kurz vor der inneren forSchleife bei der Konsole an :

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

In der äußeren forSchleife durchläuft jede Iteration die Sub-Arrays in arr. Sie sollten dies in der Konsole sehen:

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

Beachten Sie, dass wir oben Vorlagenliterale verwenden. `Sub-array ${i}: ${arr[i]}`ist das gleiche wie 'Sub-array ' + i + ': ' + arr[i], nur viel einfacher zu schreiben.

Melden Sie sich jetzt in der inneren forSchleife `Element ${j}: ${arr[i][j]}`bei der Konsole an:

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

Die innere forSchleife durchläuft jedes Element in jedem Subarray ( arr[i]), daher sollten Sie dies in der Konsole sehen:

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

Die erste Iteration von ipackt das erste Unterarray [1, 2]. Dann jdurchläuft die erste Iteration von jedes Element in diesem Unterarray:

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

Dieses Beispiel ist ziemlich einfach, arr[i][j]kann aber dennoch schwer zu verstehen sein, ohne mehrere Dinge an der Konsole zu protokollieren.

Eine schnelle Verbesserung besteht darin, eine subArrayVariable in der äußeren forSchleife zu deklarieren und gleich zu setzen 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]]); 

Nehmen Sie dann einfach einige Änderungen am Code vor, um die neue subArrayVariable anstelle von 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]]); 

Das sollte alles sein, was Sie über mehrdimensionale Arrays und verschachtelte forSchleifen wissen müssen . Jetzt geh raus und iteriere mit den Besten!