JavaScriptで2つの配列を比較し、共通しない要素を取得する方法

はじめに

共通の値を一部含む2つの配列があるとき、「どちらか一方にしか存在しない要素」だけを抽出した新しい配列を返す関数を作成する方法を解説します。

例を見てみましょう。

// 2つの配列が以下の場合:
const first = ['cat', 'dog', 'mouse'];
const second = ['zebra', 'tiger', 'dog', 'mouse'];
// 期待される出力:
const output = ['cat', 'zebra', 'tiger']
// この3つの要素だけが両方の配列に共通しないためです

実装方法

この問題は、スプレッド構文(...)を使って2つの配列を結合し、filter()メソッドで「両方の配列に存在する要素」を除外することで解決できます。

それでは、実際のコードを書いてみましょう。

コード例

const first = ['cat', 'dog', 'mouse'];
const second = ['zebra', 'tiger', 'dog', 'mouse'];

const removeCommon = (first, second) => {
    const spreaded = [...first, ...second];
    return spreaded.filter(el => {
        return !(first.includes(el) && second.includes(el));
    })
};

console.log(removeCommon(first, second));

処理の流れ

1. スプレッド構文 [...first, ...second] で2つの配列を1つに結合します。
2. filter() メソッドで結合した配列の各要素を順番にチェックします。
3. first.includes(el) && second.includes(el) が true(=両方の配列に存在する)の場合、その要素を除外します。

出力結果

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

[ 'cat', 'zebra', 'tiger' ]

まとめ

スプレッド構文と filter() メソッドを組み合わせることで、2つの配列の対称差(共通しない要素)をシンプルに求めることができます。なお、配列のサイズが大きい場合は、includes() の代わりに Set を使って判定するとパフォーマンスを向上させられるので、覚えておくと便利です。