【JavaScript】forEachメソッドとは（備忘録）

１．forEach()メソッドとは

配列から順番に要素を取り出します。
その取り出した要素を、コールバック関数に渡し処理を行うメソッドです。

forEachメソッドの文法

// アロー関数を使用しコールバック関数を記述
配列名.forEach((変数１, 変数２, 変数３) => {
	処理内容
});

変数１には要素の値・変数２には要素のインデックス・変数３には配列がそれぞれ入ります。

２．サンプルプログラム

〇例１：コールバック関数にアロー関数を用いた場合（変数は１つ）

Sample_1.js

const colors = ['赤', '青', '黄'];

colors.forEach(color => {
    console.log(color);
});

赤
青
黄

〇例２：配列の中に作成したオブジェクトからデータを取得

Sample_2.js

const colors = [
	{no : 1, color: '赤'},
	{no : 2, color: '青'},
	{no : 3, color: '黄'}
];

colors.forEach(element => {
    // オブジェクトから数値を取得
    console.log(element.no);
});

1
2
3

〇例３：変数は３つ

Sample_3.js

const colors = ['赤', '青', '黄'];

colors.forEach((color, index, list) => {
    console.log('色：' + color);
    console.log('配列の要素番号：' + index);
    console.log('全色：' + list); 
});

色：赤
配列の要素番号：0
全色：赤,青,黄
色：青
配列の要素番号：1
全色：赤,青,黄
色：黄
配列の要素番号：2
全色：赤,青,黄

〇例４：forEachメソッドとreturn文の併用

Sample_4.js

const colors = ['赤', '青', '黄'];

colors.forEach((color, index) => {
    if(color === '青'){
        // foeEachメソッドを抜ける
        return;
    }
    console.log('色：' + color);
    console.log('配列の要素番号：' + index);
});

色：赤
配列の要素番号：0
色：黄
配列の要素番号：2

重要：
return文はforEachメソッドのコールバック関数内でのみ有効であり、forEachメソッドから抜けることはできません。
そのため、return文を使っても、次の要素の処理が継続されます。

〇例５：

Sample_5.js

const fruit = ["APPLE", "ORANGE", "CHEERY"];

// コールバック関数
function lowerCase(element, index, list) {
    // 大文字を小文字化
    list[index] = element.toLowerCase();
}

fruit.forEach(lowerCase);
console.log(fruit);

[ 'apple', 'orange', 'cheery' ]

解説：
以下の流れで処理が実行されます。
①．fruit.forEach(lowerCase); が実行され、配列 fruit の各要素を順番に取り出します。
↓
②．コールバック関数内で、大文字の要素 element を小文字化し、list[index] にその結果が代入されます。
※この処理により、元の配列 fruit が変更されます。
↓
③．全ての要素の処理が完了した後、console.log(fruit); が実行されます。

重要：
新しい配列を生成したい場合は、map メソッドを使用する方が一般的です

３．参考

・Array.prototype.forEach()
・JavaScriptのArray.forEachをbreak、continue、returnさせたい
・JavaScript forEach() method in 8 minutes! ➿

４．その他

・実行環境