プログラミングBlog

JavaScript 繰り返し処理について。

JavaScriptの繰り返し処理について

配列に格納されている値をすべて表示させたい時に、にfor文もしくはforEachを使いますよね。
例えばこんな配列があったとします。
index番号と値を表示させてみましょう。

for

const array = ["A", "B", "C"];

for (var i = 0; i < array.length; i++) {
    console.log(array[i]);
}

for文の場合は簡単ですね。インクリメントされているiを使うだけです。

結果
index:1 A
index:2 B
index:3 C

さて、foeEachの場合はどうしましょう。

forEach

const array = ["A", "B", "C"];

array.forEach(function (value, index, currentValue) {
    console.log(`index:${index}`, `value:${value}`, `currentValue:${currentValue}`);
});
結果
index:0 value:A currentValue:A,B,C
index:1 value:B currentValue:A,B,C
index:2 value:C currentValue:A,B,C

forEachの場合だとindexとcurrentValueを引数に指定してあげると index番号とcurrentValue現在の値が取得できます。
他の言語にもforEachがありますが、index番号はだいたい取れるのでおぼえておくと良さそう。 便利ですね!
どんな時に使うか問題を作ってみました。

オリジナル問題①

学校という連想配列に学年と名前を定義してみました。
これらに対してforEachを使ってindex番号を取得し、
学年と出席番号をindex番号付きで表示させてみましょう。
例:学年1 出席番号1 名前

const school = {
    first_grade: [
        "丈太郎", "丈二郎", "常三郎"
    ],
    second_grade: [
        "NARUTO", "SASUKE", "SAKURA"
    ],
    third_grade: [
        "三男", "次男", "長男"
    ]
};

答え

Object.keys(school).forEach(function (key, index) {
    var grade = index + 1;
    school[key].forEach(function (value, index) {
        console.log(`学年:${grade}`, `出席番号:${index + 1}`, `名前:${value}`);
    });
});

Object.keys(school)でschoolのkeyの値をすべて取得することができます。
その後school[key]でvalue値、名前の配列を呼び出しています。
var grade = index + 1;で学年を取得。

結果
学年:1 出席番号:1 名前:丈太郎
学年:1 出席番号:2 名前:丈二郎
学年:1 出席番号:3 名前:常三郎
学年:2 出席番号:1 名前:NARUTO
学年:2 出席番号:2 名前:SASUKE
学年:2 出席番号:3 名前:SAKURA
学年:3 出席番号:1 名前:三男
学年:3 出席番号:2 名前:次男
学年:3 出席番号:3 名前:長男

感想

forEachでindex番号を定義して ランキングを出したり今回みたいに出席番号などに利用できるので便利ですね。
MDN見ていたら他にも書き方があるようなのでまた試してみようかと思います。