🐈

[JavaScript]forEachについて

2022/10/07に公開約2,600字

forEachメソッドとは

  • forEach関数は、この配列に格納されたデータをループ処理(繰り返し処理)により、一気に処理したい時に使う。
  • 通常、プログラムにおいて繰り返し処理を実行するにはfor文を使うが、配列にfor文の操作をする時には、forEachメソッドを使うことで、より簡単に処理を実装することができる。
  • map や filter とは異なり新しい配列は生成しない。
  • 以下のような構文で使うことができる。
配列.forEach( コールバック関数による処理 )
  • forEachメソッドは、for文よりも簡単に処理を記述できるかわりに、引数部分にコールバック関数と呼ばれるfunctonを指定する必要がある。
  • コールバック関数の構文(もっとも簡単な例)
function(item) {
 // itemに関する処理
 // itemは、配列の中身のうち、任意の1つを指し示す
}

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('中身を1つ取り出します');
  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);
  }
});

参考

https://magazine.techacademy.jp/magazine/14635
https://www.sejuku.net/blog/20257
https://qiita.com/diescake/items/70d9b0cbd4e3d5cc6fce

Discussion

ログインするとコメントできます