JavaScriptで2つの配列の差分（共通しない要素）を取得する方法

はじめに

JavaScriptでは、2つの配列を比較して「片方にしか存在しない要素」（両方の配列に共通しない要素）を抽出したい場面があります。これは配列の差分（対称差）と呼ばれる処理です。

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

const arr1 = [12, 54, 2, 4, 6, 34, 3];
const arr2 = [54, 2, 5, 12, 4, 1, 3, 34];

この2つの配列を受け取って、どちらか一方にのみ存在する要素を返す関数を作成してみましょう。

実装例：forループとindexOfを使う方法

まずは基本的なアプローチとして、forループとindexOfメソッドを組み合わせたコードを見てみます。

const arr1 = [12, 54, 2, 4, 6, 34, 3];
const arr2 = [54, 2, 5, 12, 4, 1, 3, 34];

const difference = (first, second) => {
    const res = [];
    // 1つ目の配列のうち、2つ目に存在しない要素を追加
    for(let i = 0; i < first.length; i++){
        if(second.indexOf(first[i]) === -1){
            res.push(first[i]);
        }
    }
    // 2つ目の配列のうち、1つ目に存在しない要素を追加
    for(let j = 0; j < second.length; j++){
        if(first.indexOf(second[j]) === -1){
            res.push(second[j]);
        }
    }
    return res;
};

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

コードの解説

この関数の処理の流れは以下の通りです。

• 1つ目の配列の各要素について、2つ目の配列に存在しない場合（indexOfの戻り値が -1 の場合）は、結果配列 res に追加します。
• 同様に、2つ目の配列の各要素についても、1つ目の配列に存在しないものを res に追加します。
• 最終的に、共通しない要素だけが格納された配列を返します。

出力結果

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

[ 6, 5, 1 ]

arr1 にのみ存在する「6」と、arr2 にのみ存在する「5」「1」が正しく抽出されています。

filterとincludesを使ったより簡潔な書き方

ES6以降では、filterメソッドとincludesメソッド、そしてスプレッド構文を組み合わせることで、同じ処理をより簡潔に記述できます。

const difference = (first, second) => [
    ...first.filter(item => !second.includes(item)),
    ...second.filter(item => !first.includes(item))
];

console.log(difference(arr1, arr2)); // [ 6, 5, 1 ]

宣言的で読みやすく、モダンなJavaScriptらしい書き方なので、新規のコードではこちらのスタイルをおすすめします。

まとめ

2つの配列の差分を求める基本は、「相手側の配列にその要素が存在するかどうか」をindexOfやincludesで確認することです。要素数が非常に多い配列を扱う場合は、Setオブジェクトを使って存在確認を行うとパフォーマンスが大幅に向上するので、状況に応じて使い分けるとよいでしょう。