JavaScriptのfilter()メソッドを使って、別の配列に含まれる要素を配列から除外する方法

はじめに

JavaScriptでは、filter()メソッドを活用することで、ある配列から特定の要素だけを取り除いた新しい配列を簡単に作成できます。本記事では、「2つの配列を比較し、1つ目の配列から2つ目の配列に含まれていない要素だけを抽出する」というよくある課題の解決方法を解説します。

問題の概要

たとえば、次のような2つの数値の配列があるとしましょう。

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

このとき、arr2 に含まれていない要素のみを arr1 から抽出し、結果として次のような出力が得られる関数を作成する必要があります。

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

実装方法

この問題は、配列の filter() メソッドと indexOf() メソッドを組み合わせることでシンプルに解決できます。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));

コードのポイント

• filter()メソッドは、コールバック関数がtrueを返した要素だけを集めた新しい配列を返します。元の配列には影響を与えません。
• arr2.indexOf(el) === -1という条件により、「elがarr2に存在しない場合」のみ要素が残ります。
• ES6以降であれば、!arr2.includes(el)と書くことでより直感的に表現することも可能です。

実行結果

上記のコードを実行すると、コンソールには以下の出力が表示されます。

[ 7, 6, 3, 6, 3 ]

ご覧のとおり、arr2に含まれていた 4、23、56 が arr1 からすべて除外され、期待どおりの結果が得られました。

まとめ

filter()とindexOf()(またはincludes())を組み合わせれば、配列間の差分抽出をわずか数行のコードで実現できます。元の配列を変更せずに済むため、イミュータブルなデータ操作が求められるモダンなJavaScript開発でも安心して使えるテクニックです。ぜひ日々のコーディングに活用してみてください。