JavaScriptでのForループのネスト

freeCodeCampのNestingFor Loopsチャレンジを理解するのに問題がある場合でも、心配する必要はありません。私たちはあなたを取り戻しました。

この問題では、multiplyAll()関数を完了する必要があり、引数として多次元配列を取ります。2D配列と呼ばれることもある多次元配列は、たとえば、単なる配列の配列であることに注意してください[[1,2], [3,4], [5,6]]

右側のエディターでは、multiplyAll()次のように定義されています。

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

多次元配列productであるパラメーターのサブ配列内の各数値で変数を乗算するように、関数を完了する必要がありますarr

この問題を解決するにはさまざまな方法がありますが、forループを使用する最も簡単な方法に焦点を当てます。

forループを設定する

arrは多次元配列であるため、2つのforループが必要になります。1つは各サブ配列配列をループするためのもので、もう1つは各サブ配列内の要素をループするためのものです。

内部配列をループします

これを行うにはfor、前のチャレンジで行ったようにループを設定します。

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

forループのlet代わりにvarを使用して宣言していることに注意してくださいproduct。この課題では次の2つの間の違いに気付くことはありませんが、一般的にそれはES6のを使用することをお勧めだconstletいつでもすることができます。この記事でその理由について詳しく読むことができます。

次に、各サブアレイをコンソールに記録します。

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

下部で呼び出しmultiplyAll()ているため[[1,2],[3,4],[5,6,7]]、次のように表示されます。

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

各サブ配列の要素をループします

次に、コンソールにログインしたばかりのサブアレイの各番号をループする必要があります。

今書いたループの中にconsole.log(arr[i]);別のforループを削除して作成します。

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

内側のループのために、私たちがチェックする必要がある、ということを覚えておいてください.lengthのをarr[i]ので、arr[i]私たちは以前見サブアレイの一つです。

次にarr[i][j]、コンソールにログインして、個々の要素を確認します。

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

最後に、product各サブ配列のすべての要素を乗算します。

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

productコンソールにログインすると、各テストケースの正解が表示されます。

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

よく見る

上記のコードが機能する理由がまだわからない場合でも、心配しないでください。あなただけではありません。ネストされたループの操作は複雑であり、経験豊富な開発者でさえ混乱する可能性があります。

このような場合、より詳細な情報をコンソールに記録すると便利です。コードに戻り`Sub-array ${i}: ${arr[i]}`、内部forループの直前でコンソールにログインします。

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

外側のforループでは、各反復はのサブ配列を通過しarrます。コンソールに次のように表示されます。

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

上記のテンプレートリテラルを使用していることに注意してください。`Sub-array ${i}: ${arr[i]}`と同じですが、'Sub-array ' + i + ': ' + arr[i]書くのがはるかに簡単です。

内側のforループで`Element ${j}: ${arr[i][j]}`、コンソールにログインします。

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

内側のforループは各サブ配列(arr[i])の各要素を通過するため、コンソールに次のように表示されます。

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

の最初の反復はi、最初のサブ配列を取得し[1, 2]ます。次に、の最初の反復はj、そのサブ配列の各要素を通過します。

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

This example is pretty simple, but arr[i][j] can still be difficult to understand without logging multiple things to the console.

One quick improvement we can make is declaring a subArray variable in the outer for loop and setting it equal to 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]]); 

Then just make a few tweaks to the code to use the new subArray variable instead of 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]]); 

That should be everything you need to know about multi-dimensional arrays and nested for loops. Now get out there and iterate with the best of 'em!