JavaScriptで別の配列を基準に配列をフィルタリングする方法

JavaScriptでは、ある配列から別の配列に含まれている要素を除外したい場面がよくあります。例えば、次のような2つの配列があるとします。

const arr1 = [4, 23, 7, 6, 3, 6, 4, 3, 56, 4];
const arr2 = [4, 56, 23];

ここで求められているのは、これら2つの配列を受け取り、1つ目の配列から2つ目の配列に存在しない要素だけを残すフィルタリング処理を行う関数を作成することです。そして、その結果の配列を返します。

したがって、期待される出力は次のようになります。

const output = [7, 6, 3, 6, 3];

実装例：filter()とindexOf()を使う方法

この処理は、配列のfilter()メソッドとindexOf()メソッドを組み合わせることで簡単に実装できます。filter()は各要素に対してコールバック関数を実行し、trueを返した要素のみで構成される新しい配列を生成します。要素がarr2に存在しない場合、indexOf()は-1を返すため、それを条件として利用します。

const arr1 = [4, 23, 7, 6, 3, 6, 4, 3, 56, 4];
const arr2 = [4, 56, 23];

const filterArray = (arr1, arr2) => {
    const filtered = arr1.filter(el => {
        return arr2.indexOf(el) === -1;
    });
    return filtered;
};

console.log(filterArray(arr1, arr2));

出力結果

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

[ 7, 6, 3, 6, 3 ]

より簡潔な書き方：includes()を使う

ES2016以降では、includes()メソッドを使うことで、より読みやすいコードになります。includes()は要素が配列に含まれていればtrueを返すため、コードの意図が直感的に伝わります。

const filterArray = (arr1, arr2) => arr1.filter(el => !arr2.includes(el));

console.log(filterArray(arr1, arr2)); // [ 7, 6, 3, 6, 3 ]

大量データ向けの最適化：Setを活用する

配列が大きい場合は、Setオブジェクトを使うとパフォーマンスが向上します。indexOf()やincludes()は線形探索（O(n)）であるため、要素数が多いと処理が遅くなります。一方、Setによる検索はほぼ定数時間（O(1)）で行えます。

const filterArray = (arr1, arr2) => {
    const excludeSet = new Set(arr2);
    return arr1.filter(el => !excludeSet.has(el));
};

console.log(filterArray(arr1, arr2)); // [ 7, 6, 3, 6, 3 ]

まとめ

• 小規模な配列なら、filter() + indexOf() / includes() の組み合わせで十分です。
• コードの可読性を重視するなら、includes()を使うのがおすすめです。
• 大規模データを扱う場合は、Setに変換してからhas()で判定すると高速に処理できます。

状況に応じて適切な方法を選択することで、効率的かつ保守しやすいコードを書くことができます。