JavaScriptでオブジェクトの配列を別の配列を使ってフィルタリングする方法

課題の概要

まず、次のようなオブジェクトを要素にもつ配列が与えられたとします。

const arr = [
    {area: 'NY', name: 'Bla', ads: true},
    {area: 'DF', name: 'SFS', ads: false},
    {area: 'TT', name: 'SDSD', ads: true},
    {area: 'SD', name: 'Engine', ads: false},
    {area: 'NSK', name: 'Toyota', ads: false},
];

今回求められるのは、第1引数にこのようなオブジェクトの配列を、第2引数に文字列リテラルの配列を受け取るJavaScript関数を作成することです。

作成する関数は、入力された配列の中から「area」プロパティの値が第2引数の文字列配列に含まれているオブジェクトのみを抽出し、新しい配列として返す必要があります。

実装例（forループを使用）

この要件を満たすコードは以下の通りです。

const arr = [
    {area: 'NY', name: 'Bla', ads: true},
    {area: 'DF', name: 'SFS', ads: false},
    {area: 'TT', name: 'SDSD', ads: true},
    {area: 'SD', name: 'Engine', ads: false},
    {area: 'NSK', name: 'Toyota', ads: false},
];
const keys = ['NY', 'SD'];
const filterByArea = (arr = [], keys = []) => {
    const res = [];
    for(let i = 0; i < arr.length; i++){
        const { area } = arr[i];
        if(keys.includes(area)){
            res.push(arr[i]);
        }
    }
    return res;
};
console.log(filterByArea(arr, keys));

このコードでは、元の配列を先頭から順に走査しながら、各オブジェクトの「area」プロパティを分割代入で取り出し、keys.includes()によって条件に一致するかどうかを判定しています。一致した要素だけが結果配列に追加され、最終的にその配列が返されます。

出力結果

コンソールには次のように表示されます。

[
    { area: 'NY', name: 'Bla', ads: true },
    { area: 'SD', name: 'Engine', ads: false }
]

より簡潔な代替案：filter()メソッド

forループを明示的に書かなくても、Array.prototype.filter()を使えば同じ処理を1行で表現できます。

const filterByArea = (arr = [], keys = []) =>
    arr.filter(({ area }) => keys.includes(area));

filter()は条件を満たす要素だけで構成される新しい配列を返すため、宣言的で読みやすく、意図も伝わりやすいコードになります。

パフォーマンス改善：Setの活用

扱うデータ量が大きい場合は、keys.includes()の代わりにSet.has()を使うと効率的です。配列のincludes()は線形時間（O(n)）で探索を行うのに対し、Setのhas()はほぼ定数時間（O(1)）で判定できるため、大規模なデータセットを扱う際に処理速度に大きな差が生まれます。

const filterByArea = (arr = [], keys = []) => {
    const keySet = new Set(keys);
    return arr.filter(({ area }) => keySet.has(area));
};

まとめ

• オブジェクト配列を別の配列の値で絞り込むには、includes()による存在チェックが基本となります。
• filter()を活用すると、ループ処理を簡潔かつ読みやすく記述できます。
• データ量が多いケースではSetへ変換することで、検索処理を大幅に高速化できます。