JavaScriptでオブジェクトの配列から特定の値を取得する方法

オブジェクトの配列から特定の値を取得するには？

JavaScriptでは、オブジェクトの配列の中から条件に一致する特定の値を持つ要素を取り出したい場面がよくあります。この記事では、forループとif文を使って、「employeeFirstName」が「John」である要素だけを抽出する方法を解説します。

サンプルデータ

まず、次のような従業員情報を格納したオブジェクトの配列を用意します。

const details =
    [
       {
          employeeFirstName: "John",
          employeeLastName: "Doe"
       },
       {
          employeeFirstName: "David",
          employeeLastName: "Miller"
       },
       {
          employeeFirstName: "John",
          employeeLastName: "Smith"
       }
    ]

コード例

以下は、ファーストネームが「John」である要素だけを取得してコンソールに出力するコードです。

const details =
    [
       {
            employeeFirstName: "John",
            employeeLastName: "Doe"
       },
       {
          employeeFirstName: "David",
          employeeLastName: "Miller"
       },
       {
          employeeFirstName: "John",
          employeeLastName: "Smith"
       }
    ]
for (var index = 0; index < details.length; index++) {
   if (details[index].employeeFirstName === "John") {
      console.log("FirstName=" + details[index].employeeFirstName + " LastName= " + details[index].employeeLastName);
   }
}

このコードでは、forループで配列の各要素を先頭から順に確認し、if文の中で厳密等価演算子（===）を使って「employeeFirstName」プロパティが「John」と一致するかどうかを判定しています。条件に一致した場合のみ、ファーストネームとラストネームを連結した文字列をconsole.log()で出力します。

プログラムの実行方法

上記のプログラムを実行するには、Node.js環境で次のコマンドを使用します。

node fileName.js

ここでは、ファイル名をdemo223.jsとして保存しています。

実行結果

プログラムを実行すると、ターミナルに以下のように出力されます。

PS C:\Users\Amit\JavaScript-code> node demo223.js
FirstName=John LastName= Doe
FirstName=John LastName= Smith

配列内に「John」というファーストネームを持つ要素が2つあるため、該当する2件分のデータが出力されていることがわかります。

補足：filter()メソッドを使ったより簡潔な書き方

よりモダンなアプローチとしては、Array.prototype.filter()メソッドを利用する方法もあります。条件に一致する要素だけを新しい配列としてまとめて取得できるため、コードがシンプルになり可読性も向上します。

const johns = details.filter(d => d.employeeFirstName === "John");
johns.forEach(d => console.log(`FirstName=${d.employeeFirstName} LastName= ${d.employeeLastName}`));

用途に応じて、forループによる柔軟な制御か、filter()による簡潔な記述かを選択するとよいでしょう。