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

JavaScriptでは、オブジェクトから特定のキーを持つプロパティだけを抽出したい場面がよくあります。今回は、指定した配列の要素と一致するキーのみを残し、それ以外のプロパティを取り除く方法を解説します。

前提となるデータ

まず、次のような配列とオブジェクトがあったとします。

const arr = ['a', 'd', 'f'];
const obj = {
    "a": 5,
    "b": 8,
    "c": 4,
    "d": 1,
    "e": 9,
    "f": 2,
    "g": 7
};

求められているのは、このオブジェクトと配列を引数として受け取り、配列に含まれていないキーのプロパティをすべて削除する関数です。実行後の出力には、「a」「d」「f」の3つのプロパティのみが残ることになります。

実装例

それでは、実際のコードを見ていきましょう。

const arr = ['a', 'd', 'f'];
const obj = {
    "a": 5,
    "b": 8,
    "c": 4,
    "d": 1,
    "e": 9,
    "f": 2,
    "g": 7
};
const filterObject = (obj, arr) => {
    Object.keys(obj).forEach((key) => {
        if (!arr.includes(key)) {
            delete obj[key];
        }
    });
};
filterObject(obj, arr);
console.log(obj);

コードのポイント

この関数の仕組みは以下の通りです。

1. Object.keys(obj) で、オブジェクトのすべてのキーを配列として取得します。
2. forEach() を使って、各キーに対して順番に処理を行います。
3. Array.prototype.includes() で、そのキーが配列 arr に含まれているかどうかを判定します。
4. 含まれていない場合は、delete 演算子によってオブジェクトから該当するプロパティを削除します。

実行結果

コンソールに出力される結果は次のようになります。

{ a: 5, d: 1, f: 2 }

補足：元のオブジェクトを変更せずにフィルタリングする方法

上記の実装は元のオブジェクトを直接書き換える（破壊的な）方法です。元のデータを保持したい場合は、reduce() を使って新しいオブジェクトを生成するアプローチも有効です。

const filterObject = (obj, arr) =>
    Object.keys(obj)
        .filter(key => arr.includes(key))
        .reduce((acc, key) => {
            acc[key] = obj[key];
            return acc;
        }, {});

const newObj = filterObject(obj, arr);
console.log(newObj); // { a: 5, d: 1, f: 2 }
console.log(obj);   // 元のオブジェクトは変更されない

用途に応じて、破壊的な方法と非破壊的な方法を使い分けることで、より安全で保守性の高いコードを書くことができます。