配列の各要素に対して処理を実行する

配列にある要素1つ1つに対して処理を実行

ArrayオブジェクトのforEachメソッドを使って、配列にある全ての要素に対して同じ処理を1つずつ実行することができます。

以下の例は要素が持つオブジェクトのプロパティを出力します。

JavaScript コード例

let animals = [
  {
    name: "cat",
    id: 150001,
    voice: "にゃん"
  },
  {
    name: "dog",
    id: 150002,
    voice: "ワン"
  },
  {
    name: "mouse",
    id: 150003,
    voice: "チュウ"
  }
];

animals.forEach(function(e){
  console.log(e.name);
  console.log(e.id);
  console.log(e.voice);
});

// 1回目
// cat
// 150001
// にゃん

// 2回目
// dog
// 150002
// ワン

// 3回目
// mouse
// 150003
// チュウ

forEachメソッドは配列の先頭にある要素から1つずつ順番に処理を実行していきます。
上記の例では要素の値のみ変数eを使って参照していますが、引数を用意すると配列のインデックス（キー）や元の配列も処理内で参照することが可能です。

以下の例では引数をeに加えて、インデックスを渡すindexと、元の配列を渡すarrayを用意して処理の中で参照します。（引数の変数名は任意です）

JavaScript コード例

let animals = [
  {
    name: "cat",
    id: 150001,
    voice: "にゃん"
  },
  {
    name: "dog",
    id: 150002,
    voice: "ワン"
  },
  {
    name: "mouse",
    id: 150003,
    voice: "チュウ"
  }
];

animals.forEach(function( e, index, array){
  console.log(e.name);
  console.log(index);
  console.log(array);
});

// 1回目
// cat
// 0
// (3) [{…}, {…}, {…}]
//  0: {name: "cat", id: 150001, voice: "にゃん"}
//  1: {name: "dog", id: 150002, voice: "ワン"}
//  2: {name: "mouse", id: 150003, voice: "チュウ"}

// 2回目
// dog
// 1
// (3) [{…}, {…}, {…}]

// 3回目
// mouse
// 2
// (3) [{…}, {…}, {…}]