JavaScriptで配列を別の配列を使ってフィルタリングする方法

JavaScriptでは、2つの配列を受け取り、1つ目の配列から2つ目の配列に含まれていない要素だけを抽出した新しい配列を返す関数が必要になる場面がよくあります。これはいわゆる「差集合」の計算であり、データの絞り込みや比較処理で非常に役立ちます。

この処理を実現するには、Array.prototype.filter() メソッドを使って1つ目の配列を走査し、各要素が2つ目の配列に存在するかどうかを Array.prototype.includes() メソッド（または indexOf()）で判定するのが最もシンプルで読みやすいアプローチです。

実装例

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

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [1, 3, 5];

const filterUnwanted = (arr1 = [], arr2 = []) => {
  let filtered = [];
  filtered = arr1.filter(el => {
    const index = arr2.indexOf(el);
    // index が -1 の場合、その要素は2つ目の配列に存在しない
    return index === -1;
  });
  return filtered;
};

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

実行結果

コンソールに出力される結果は以下のとおりです。

[2, 4]

コードの解説

このコードでは、filter() が arr1 の各要素に対してコールバック関数を実行します。コールバック内では indexOf() を使って、その要素が arr2 内に存在するかを確認しています。戻り値が -1 であれば要素は arr2 に存在しないため、その要素は結果の配列に残ります。

なお、より現代的な書き方としては includes() を使うこともできます。

const filterUnwanted = (arr1 = [], arr2 = []) =>
  arr1.filter(el => !arr2.includes(el));

console.log(filterUnwanted([1, 2, 3, 4, 5], [1, 3, 5])); // [2, 4]

どちらの方法でも元の配列は変更されず、常に新しい配列が返されるため、安全に利用できます。大量のデータを扱う場合は、検索対象となる2つ目の配列を Set に変換しておくと、判定処理のパフォーマンスを大幅に向上させることができます。