JavaScriptで配列の減算を行う方法：2番目の配列に含まれる要素を最初の配列から削除する

JavaScriptにおける配列の減算とは

JavaScriptでは、2つの配列を受け取り、1つ目の配列から2つ目の配列にも含まれている要素をすべて取り除く「配列の減算（差分）」処理が必要になることがあります。

例として、次のような2つのリテラル配列があるとします。

const arr1 = ['uno', 'dos', 'tres', 'cuatro'];
const arr2 = ['dos', 'cuatro'];

このとき、1つ目の配列から2つ目の配列に含まれる要素（'dos' と 'cuatro'）をすべて削除し、残りの要素だけを返す関数を作成する必要があります。

期待される出力は以下のとおりです。

const output = ['uno', 'tres'];

実装例

この処理は、Array.prototype.filter() メソッドと indexOf() を組み合わせることで簡単に実装できます。filterメソッドは、条件を満たす要素のみで構成された新しい配列を返すため、元の配列を変更せずに済むのもメリットです。

const arr1 = ['uno', 'dos', 'tres', 'cuatro'];
const arr2 = ['dos', 'cuatro'];

const findSubtraction = (arr1 = [], arr2 = []) => {
    let filtered = [];
    filtered = arr1.filter(el => {
        if(arr2.indexOf(el) === -1){
            return true;
        };
    });
    return filtered;
};

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

コードの解説

findSubtraction 関数は、デフォルト引数として空の配列を設定することで、引数が渡されなかった場合でもエラーが発生しないようにしています。内部では filter() を使って arr1 の各要素を走査し、indexOf(el) === -1（つまり arr2 にその要素が存在しない場合）にだけ true を返すことで、結果の配列に要素が残されます。

出力結果

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

[ 'uno', 'tres' ]

よりモダンな書き方

ES7以降では、includes() メソッドを使うことで、さらに直感的に記述できます。

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

また、パフォーマンスが重要な大きな配列を扱う場合は、Set を利用すると検索が高速になります。

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

どの方法でも同じ結果が得られますが、データサイズや可読性の要件に応じて最適な手法を選択しましょう。