JavaScriptで配列に基づいてオブジェクトのプロパティをフィルタリングする方法

はじめに

本記事では、オブジェクトと文字列の配列を引数として受け取り、配列内に出現するキーだけを持つフィルタリング済みのオブジェクトを返すJavaScript関数の作成方法を解説します。

例えば、オブジェクトが {"a": [], "b": [], "c": [], "d": []} であり、配列として ["a", "d"] を指定した場合、期待される出力は次のようになります。

{"a": [], "d": []}

それでは、この関数を実装していきましょう。

for...inループによる基本的な実装

考え方は非常にシンプルです。まず空の新しいオブジェクトを用意し、for...in ループで元のオブジェクトのすべてのキーを順に走査します。各キーに対して Array.prototype.includes() メソッドを使い、そのキーが指定された配列に含まれているかどうかを判定します。含まれていれば、そのキーと値のペアを新しいオブジェクトに追加し、含まれていなければそのまま次のキーへ進みます。最後に、構築した新しいオブジェクトを返せば完成です。

サンプルコード

const capitals = {
    "usa": "Washington DC",
    "uk": "London",
    "india": "New Delhi",
    "italy": "rome",
    "japan": "tokyo",
    "germany": "berlin",
    "china": "shanghai",
    "spain": "madrid",
    "france": "paris",
    "portugal": "lisbon"
};

const countries = ["uk", "india", "germany", "china", "france"];

const filterObject = (obj, arr) => {
    const newObj = {};
    for (key in obj) {
        if (arr.includes(key)) {
            newObj[key] = obj[key];
        }
    }
    return newObj;
};

console.log(filterObject(capitals, countries));

出力結果

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

{
    uk: 'London',
    india: 'New Delhi',
    germany: 'berlin',
    china: 'shanghai',
    france: 'paris'
}

Object.entries()とfilter()を使ったモダンな実装

よりモダンで関数型スタイルのコードを好む場合は、Object.entries() と filter()、さらにES2019で導入された Object.fromEntries() を組み合わせる方法がおすすめです。

const filterObject = (obj, arr) =>
    Object.fromEntries(
        Object.entries(obj).filter(([key]) => arr.includes(key))
    );

console.log(filterObject(capitals, countries));

この書き方では中間変数が不要になり、意図が明確で簡潔なコードになります。reduce() を使って同じ処理を書くことも可能ですが、filter() + fromEntries() の方が可読性に優れています。

パフォーマンスに関する補足

上記の実装はいずれも、計算量が O(n × m)(n はオブジェクトのキー数、m は配列の要素数)となります。大規模なデータセットを扱う場合は、配列をあらかじめ Set に変換しておくと、キーの存在確認が O(1) になるため処理を高速化できます。

const filterObject = (obj, arr) => {
    const keySet = new Set(arr);
    return Object.fromEntries(
        Object.entries(obj).filter(([key]) => keySet.has(key))
    );
};

まとめ

オブジェクトのプロパティを特定のキー配列に基づいてフィルタリングするには、for...in ループによる古典的な方法でも、Object.entries() と filter() を使ったモダンな方法でも実現できます。小規模なデータなら前者でも十分ですが、可読性とパフォーマンスの観点からは Set を活用したモダンな実装がおすすめです。