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

１．forEach()メソッドとは

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

mapメソッドの文法

// 変数には、要素の値が入る
配列名.forEach(変数 => {
	処理内容
});

/*
    変数１には要素の値
    変数２には要素のインデックスがそれぞれ入る
*/
配列名.forEach((変数１, 変数２) => {
	処理内容
});


/*
    変数１には要素の値
    変数２には要素のインデックス
    変数３には配列がそれぞれ入る
*/
配列名.forEach((変数１, 変数２, 変数３) => {
	処理内容
});

２．サンプルプログラム

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

Sample.js

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

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

赤
青
黄

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

Sample.js

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

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

1
2
3

〇例３：変数は３つ

Sample.js

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

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

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

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

Sample.js

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

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

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

return文を使用しても、forEachメソッドから抜けることができず、次の処理に移りました。

３．その他

○参考
・forEachメソッドとは
・JavaScriptのArray.forEachをbreak、continue、returnさせたい