【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(num => {
    // オブジェクトから数値を取得
    console.log(num.no);
});

1
2
3

〇例３：変数は３つ

Sample_3.js

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

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

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

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

Sample_4.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させたい