🐈
[JavaScript]forEachについて
forEachメソッドとは
- forEach関数は、この配列に格納されたデータをループ処理（繰り返し処理）により、一気に処理したい時に使う。
- 通常、プログラムにおいて繰り返し処理を実行するにはfor文を使うが、配列にfor文の操作をする時には、forEachメソッドを使うことで、より簡単に処理を実装することができる。
- map や filter とは異なり新しい配列は生成しない。
- 以下のような構文で使うことができる。
配列.forEach( コールバック関数による処理 )
- forEachメソッドは、for文よりも簡単に処理を記述できるかわりに、引数部分にコールバック関数と呼ばれるfunctonを指定する必要がある。
- コールバック関数の構文（もっとも簡単な例）
function(item) {
// itemに関する処理
// itemは、配列の中身のうち、任意の１つを指し示す
}
forEach()を使ったサンプルプログラム
const fruits = ['apple', 'orange', 'melon'];
fruits.forEach(function (item) {
console.log(item);
});
実行結果
apple
orange
melon
forEachメソッドをラムダ式で記述する
- JavaScriptのラムダ式である「アロー関数」を使うことで、forEachメソッドはもっと感覚的に、簡単に記述することができる。
ラムダ式による記述例
const fruits = ['apple', 'orange', 'melon'];
fruits.forEach((item) => console.log(item));
- 複数行の処理が必要な場合は、以下の記法を使う。(処理を中かっこ {} で囲うだけ)
コールバック関数に2行以上の処理を記述する場合
fruits.forEach((item) => {
console.log('中身を１つ取り出します');
console.log(item);
});
コールバック関数の使い方
コールバック関数は引数として3つの値を受け取ることができる。
array.forEach(function (value, index, array) {
// 繰り返し処理を書く
});
value：配列データの値
index：配列のインデックス番号
array：現在処理している配列
例
const lists = [1, 2, 3, 4, 5, 6, 7, 8];
lists.forEach(function (value, index, array) {
array[index] = value * 2;
});
console.log(lists);
第2引数にオブジェクトを設定する
- 任意のオブジェクトをコールバック関数内の「this」として設定することができる。
- これはforEach文の第2引数にオブジェクトを指定することで実現する。
array.forEach( コールバック関数, オブジェクト )
const priceLists = {
バナナ: 100,
リンゴ: 200,
メロン: 400,
ブドウ: 250,
};
lists.forEach(function (value) {
// この「this」は、「priceLists」を参照する
console.log(this);
}, priceLists);
forEach文でJSONを取得する
const json = '{"taro":[30,"Tokyo"],"hanako":[33,"Nagoya"]}';
const obj = JSON.parse(json); // JSONをJavaScriptで扱えるオブジェクトに変換
Object.keys(obj).forEach(function (key) {
console.log(obj[key]);
});
// 結果 [30, 'Tokyo'][(33, 'Nagoya')];
breakやcontinueは使えない！
- forEachはfor文と違い、繰り返し処理を中断するbreakやcontinueが使えない。
- breakやcontinueを使いたい場合はfor文を使用する。
JavaScript で forEach を使うのは最終手段
-配列に対して何らかの操作を行う際は、filter, find, map, reduce などのメソッドを利用できないか検討し、いずれのメソッドでも実現ができない場合の最終手段として forEach を選択する。
forEach が妥当なケース
①外部のスコープに対して直接関与しない場合
forEach
dogs.forEach(dog => {
console.log(dog.name);
});
②ある内部状態を持つインスタンスに対して、インスタンスメソッドで操作する
forEach
const pomeranian = new Pomeranian();
foods.forEach((food) => {
if (food.type === 'beef') {
pomeranian.add(food);
}
});
参考
Discussion