JavaScript

レシピ

配列

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

配列に含まれる全ての要素に対して、指定した処理を実行する方法について解説します。

この記事のポイント

  • ArrayオブジェクトforEachメソッドを使って各要素に処理を実行する
  • 引数に変数を用意すると処理内で要素の値やインデックスを参照できる

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

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

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

コード例

var 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を用意して処理の中で参照します。(引数の変数名は任意です)

コード例

var 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) [{…}, {…}, {…}]

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。