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

JavaScriptでは、数値や文字列などのリテラル値の配列と、オブジェクトが格納された配列を組み合わせてデータを扱う場面がよくあります。ここでは、リテラル値の配列に含まれる値を持つオブジェクトだけを抽出するフィルタリング処理の実装方法を解説します。

前提となるデータ構造

まず、次のような2つの配列を用意します。1つはリテラル値の配列、もう1つは「city」キーを持つオブジェクトの配列です。

const source = [1, 2, 3, 4, 5];
const cities = [{ city: 4 }, { city: 6 }, { city: 8 }];

この例では、source 配列に含まれている値と一致する city プロパティを持つオブジェクトだけを、新しい配列として取り出すことが目的です。

filterメソッドを使った実装例

配列のフィルタリングには Array.prototype.filter() メソッドが便利です。さらに、特定の値が配列に存在するかどうかを判定するために includes() メソッドを組み合わせます。

const source = [1, 2, 3, 4, 5];
const cities = [{ city: 4 }, { city: 6 }, { city: 8 }];

const filterByLiterals = (objArr, literalArr) => {
    const common = objArr.filter(el => {
        return literalArr.includes(el['city']);
    });
    return common;
};

console.log(filterByLiterals(cities, source));

コードのポイント

objArr.filter() の中で各オブジェクトの city プロパティの値を取得し、それが literalArr(つまり source 配列)に含まれているかを includes() でチェックしています。条件に合致した要素のみが結果の配列に残ります。

実行結果

上記のコードを実行すると、コンソールには次のように出力されます。

[ { city: 4 } ]

source 配列に含まれる値は 1〜5 なので、city: 4 を持つオブジェクトだけが該当し、それ以外の { city: 6 } と { city: 8 } は除外されます。

まとめ

filter() と includes() を組み合わせることで、元の配列を変更することなく、条件に合致するオブジェクトだけを簡単に抽出できます。この手法は、IDのリストと照合して該当レコードを絞り込むなど、実務でも頻繁に活用されるパターンです。