JavaScriptで2次元配列から重複する値を削除する方法

この記事では、リテラル値を含む2次元配列を引数として受け取り、配列全体に存在する重複する値を取り除いた新しい配列を返すJavaScript関数の実装方法を解説します。

ポイントは、すでに出現した値を記録しておく仕組みを作ることです。ここではオブジェクトをマップとして活用し、mapメソッドとfilterメソッドを組み合わせて処理を行います。

サンプルコード

以下のコードを見てみましょう。

const arr = [
    [1,2,3,4,5],
    [3,4,6,7,8,2],
    [7,2,4,9,11,15],
    [10,12,3,7,11]
];
const removeDuplicates = arr => {
    let map = {};
    let res = [];
    res = arr.map(el => {
        return el.filter(val => {
            if(map[val]){
                return false;
            };
            map[val] = 1;
            return true;
        });
    });
    return res;
};
console.log(removeDuplicates(arr));

コードの解説

まず、出現済みの値を記録するための空のオブジェクトmapを用意します。

外側のmapメソッドで各サブ配列を順番に処理し、内側のfilterメソッドで各要素をチェックします。

ある値がmapオブジェクトにすでに登録されている場合（つまり以前のサブ配列ですでに出現している場合）はfalseを返してその要素を除外します。初めて出現する値の場合は、mapオブジェクトに登録した上でtrueを返し、その要素を残します。

実行結果

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

[ [ 1, 2, 3, 4, 5 ], [ 6, 7, 8 ], [ 9, 11, 15 ], [ 10, 12 ] ]

最初のサブ配列[1,2,3,4,5]はすべての値が初出なのでそのまま残ります。2番目以降のサブ配列では、それまでに出現済みの値（3, 4, 2, 7, 11など）が除外され、初めて登場する値のみが残っていることが確認できます。

なお、この手法は時間計算量O(n)で動作するため、大規模なデータセットに対しても効率的に処理できます。Setオブジェクトを代わりに使うことでも同様の処理を実装可能です。