【JavaScript】連想配列の要素を検索する方法

2024年4月27日2024年5月2日

当ページのリンクには広告が含まれています。

JavaScriptで配列内の特定の値を持つレコードを抽出するには，find関数やfilter関数を用いると便利です。この記事では，連想配列から特定の値を検索する方法として，find関数および，filter関数の使い方とサンプルコードを紹介します。

連想配列のサンプルデータ

社員ID（id），社員氏名（name），年齢（age），性別（sex）が設定された社員データがあるとします。例えば，サンプルデータのような連想配列があるときに，

const persons = [
    {id:'1', name: '山田 太郎', age: 45, sex: 'M'},
    {id:'2', name: '鈴木 一郎', age: 51, sex: 'M'},
    {id:'3', name: '佐藤 花子', age: 32, sex: 'F'},
    {id:'4', name: '呉 モヨ子', age: 25, sex: 'F'},
];

以下のコードを実行すると，1レコード目の社員ID（id）の値を取得できます。

let id      = persons[0].id;
console.log(id);

同様に1レコード目の社員氏名（name）と年齢（age）を取得したい場合は，以下のようなコードとなります。

let name    = persons[0].name;
let age     = persons[0].age;
console.log(name + '（' + age +'歳）');

山田 太郎（45歳）

また，2レコード目から3レコード目の社員氏名（name）と年齢（age）を取得したい場合は，for文で決められた回数だけ処理を繰り返えすといいでしょう。

for (let i = 1; i <= 2; i++) {
    let name    = persons[i].name;
    let age     = persons[i].age;
    console.log(name + '（' + age +'歳）');
}

鈴木 一郎（51歳）
佐藤 花子（32歳）

45歳以上の社員を抽出する

ここからが本題。以下のサンプルコードでは，filter関数を使用して45歳以上の社員を検索します。filter関数は，配列内の条件式に合致するレコードを検索し，条件式に当てはまるレコードを全て取得することができます。

1行目のfilter関数では，引数に「年齢が45歳以上」という条件式を指定。続くfor文では，取得した全てのレコードの氏名と年齢を抽出して，その結果をコンソールに出力しています。

let over45Age = persons.filter((row) => row['age'] >= 45);
for (const element of over45Age) {
    let name    = element.name;
    let age     = element.age;
    console.log(name + '（' + age +'歳）');
}

山田 太郎（45歳）
鈴木 一郎（51歳）

注意

filter関数や，find関数の結果を，そのままconsole.log();メソッドに渡しても，コンソールに取得した内容を出力することはできないので注意しましょう。以下のように，console.log(over45Age); を実行すると，コンソールには[object Object],[object Object]が出力されます。

let over45Age = persons.filter((row) => row['age'] >= 45);
console.log(over45Age);

[object Object],[object Object]

特定の社員IDを抽出する

次に，社員ID（id）から社員氏名（name）を検索するサンプルです。こちらのサンプルコードではfilter関数ではなく，find関数を使用しています。

find関数も配列内の条件式に合致するレコードを検索します。filter関数との違いは，filter関数はヒットしたすべてのレコードを取得するのに対し，find関数はヒットした最初の1件のみを取得します。

社員ID（id）は一意となっていることが大前提です。同一の社員ID（id）を持った社員は存在しません。したがって，filter関数を使用するよりも，find関数のほうが適していると言えるでしょう。

では，もう一度サンプルコードを見てみましょう。2行目のfind関数の引数で，社員ID（id）が変数「empId」に一致するという条件を指定しています。先頭から順に条件に当てはまるレコードを検索して，最初に見つかったレコードの社員氏名（person.name）を取得します。変数「empId」に「3」を代入した場合は、佐藤花子さんがコンソールに出力されます。

let empId   = '3'; 
let person  = persons.find( ({ id }) => id === empId );
console.log(person.name);

佐藤 花子

では，変数「empId」に「100」を代入した場合はどうなるでしょうか。社員ID（id）に「100」が設定された社員は配列に存在しないため「undefined」が返されます。

let empId   = '100'; 
let person  = persons.find( ({ id }) => id === empId );
console.log(person);

undefined

なお，感のいい諸兄姉ならお気付きかもしれませんが，3行目をconsole.log(person.name);とすると「execution error」になります。実際のコーディングでは「undefined」が返されるケースにも考慮する必要があります。

女性社員を抽出する

最後に女性社員を配列から検索するサンプルです。社員ID（id）とは違い，配列内に女性社員が何人いるかわかりません。年齢の抽出と同様に，配列から条件式に該当するデータ全てを取得したい場合にはfilter関数を使用します。

今回は，filter関数の引数で性別（sex）が「F」と一致するという条件を指定しています。このサンプルコードを実行すると，佐藤花子さんと，呉モヨ子さんがコンソールに出力されます。

let person = persons.filter( p => p.sex === 'F');
for (const element of person) {
    let id      = element.id;   
    let name    = element.name;
    console.log('（社員ID:' + id + '）' + name);
}

（社員ID:3）佐藤 花子
（社員ID:4）呉 モヨ子

ちなみに，以下のコードを実行するとどうなるでしょうか。1行目のfind関数の引数で性別（sex）が「X」と一致するという条件を指定していいます。

let person = persons.filter( p => p.sex === 'X');
for (const element of person) {
    let id      = element.id;   
    let name    = element.name;
    console.log('（社員ID:' + id + '）' + name);
}

サンプルのデータには，性別（sex）に「X」が設定された社員は存在しないため結果は何も出力されません。