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

まず、以下のような2つのオブジェクト配列があると仮定しましょう。

const arr1 = [{id:'1',name:'A'},{id:'2',name:'B'},{id:'3',name:'C'},{id:'4',name:'D'}];
const arr2 = [{id:'1',name:'A',state:'healthy'},{id:'3',name:'C',state:'healthy'}];

ここで必要となるのは、このような2つの配列を受け取るJavaScript関数です。この関数は、1つ目の配列(arr1)から、nameプロパティが2つ目の配列(arr2)内のどのオブジェクトにも存在しない要素だけを抜き出し、新しい配列として返す必要があります。

したがって、期待される出力は次のとおりです。

const output = [{id:'2',name:'B'},{id:'4',name:'D'}];

実装例

実際のコードは以下のようになります。

const arr1 = [{id:'1',name:'A'},{id:'2',name:'B'},{id:'3',name:'C'},{id:'4',name:'D'}];
const arr2 = [{id:'1',name:'A',state:'healthy'},{id:'3',name:'C',state:'healthy'}];
const filterByReference = (arr1, arr2) => {
    let res = [];
    res = arr1.filter(el => {
        return !arr2.find(element => {
            return element.id === el.id;
        });
    });
    return res;
}
console.log(filterByReference(arr1, arr2));

実行結果

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

[ { id: '2', name: 'B' }, { id: '4', name: 'D' } ]

コードの解説

このコードでは、Array.prototype.filter()メソッドを使ってarr1の各要素を順番にチェックしています。各要素ごとにfind()メソッドでarr2の中に同じidを持つオブジェクトが存在するかを調べ、!(否定)演算子によって「存在しない」要素だけを結果の配列に残しています。

ポイントは以下の2点です。

• filter(): 条件を満たす(trueを返す)要素だけで構成される新しい配列を生成します。元の配列は変更されません。
• find(): 条件を満たす最初の要素を返し、見つからなければundefinedを返します。そのため、!をつけることで「見つからなかった場合」を簡単に判定できます。

大量データを扱う場合の最適化

上記の方法は直感的で分かりやすい一方、filter()の各要素ごとにfind()が配列全体を走査するため、計算量はO(n×m)になります。データ件数が多い場合は、Setを活用することでO(n+m)まで高速化できます。

const filterByReference = (arr1, arr2) => {
    const ids = new Set(arr2.map(el => el.id));
    return arr1.filter(el => !ids.has(el.id));
};
console.log(filterByReference(arr1, arr2));

あらかじめarr2のidをすべてSetに登録しておけば、has()による存在チェックはほぼ定数時間で完了します。そのため、大規模なデータセットを扱う際もパフォーマンスを大幅に向上させることが可能です。