JavaScriptで複数の配列から重複しない一意な要素だけを抽出する方法

JavaScriptでは、「配列の中に配列が入った構造」を受け取り、元のデータに含まれるすべての要素を集めたうえで、重複している要素を取り除いた新しい配列を返す関数を作成できます。この記事では、その実装方法を具体的なコード例とともに解説します。

処理の流れ

たとえば、次のような入れ子になった配列を入力とした場合を考えてみましょう。

const arr = [
    [12, 45, 65, 76, 76, 87, 98],
    [54, 65, 98, 23, 78, 9, 1, 3],
    [87, 98, 3, 2, 123, 877, 22, 5, 23, 67]
];

この場合、期待される出力は「1回だけ登場する要素のみ」をまとめた単一の配列です。

[
    12, 45, 54, 78, 9,
    1, 2, 123, 877, 22,
    5, 67
]

複数のサブ配列にまたがって登場した値（65、98、87、3、23など）は除外され、全体で一度しか現れていない値だけが残ります。

実装例：indexOf と lastIndexOf を使う方法

まずは基本的なアプローチです。手順は以下の2ステップです。

1. forEachで各サブ配列を展開し、スプレッド構文を使ってすべての要素を1つの配列に結合する。
2. filterメソッドの中で indexOf と lastIndexOf を比較し、最初に出現する位置と最後に出現する位置が一致する（＝重複していない）要素だけを残す。

const arr = [
    [12, 45, 65, 76, 76, 87, 98],
    [54, 65, 98, 23, 78, 9, 1, 3],
    [87, 98, 3, 2, 123, 877, 22, 5, 23, 67]
];

const getUnique = (arr) => {
    const newArray = [];
    arr.forEach((el) => newArray.push(...el));
    return newArray.filter((item, index) => {
        return newArray.indexOf(item) === newArray.lastIndexOf(item);
    });
};

console.log(getUnique(arr));

出力結果

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

[
    12, 45, 54, 78, 9,
    1, 2, 123, 877, 22,
    5, 67
]

よりシンプルな代替案：flat() を活用する

ES2019以降で利用できる Array.prototype.flat() を使えば、ネストされた配列をワンステップで平坦化できます。コードは次のようにすっきり書けます。

const getUnique = (arr) => {
    const flattened = arr.flat();
    return flattened.filter(
        (item) => flattened.indexOf(item) === flattened.lastIndexOf(item)
    );
};

console.log(getUnique(arr));

注意点

この方法は「まったく重複していない要素」だけを抽出するものです。もし「重複を除いてすべての要素を1つずつ残したい」（いわゆるユニーク化）場合は、Setオブジェクトを使うのが一般的です。

const uniqueAll = [...new Set(arr.flat())];

目的に応じて、filter方式（完全に一意な要素のみ）とSet方式（重複を排除した全要素）を使い分けるとよいでしょう。