【JavaScript】配列から重複している値だけを抽出して1回ずつ表示する方法

問題の概要

JavaScriptでは、重複した値を含む配列から「複数回出現している要素だけ」を取り出し、それぞれ1回ずつ表示したいケースがあります。

例えば、次のような数値の配列を考えてみましょう。

const arr = [1, 4, 3, 3, 1, 3, 2, 4, 2, 1, 4, 4];

この配列には、1・4・3・2がそれぞれ複数回出現しています。そこで、重複している値のみを抽出し、結果として1回ずつ返す関数を作成します。

上記の配列に対する期待される出力は次のとおりです。

const output = [1, 4, 3, 2];

実装例

以下のコードでは、indexOf() と lastIndexOf() の結果を比較することで、その値が配列内で重複しているかどうかを判定しています。さらに includes() を併用することで、結果配列に同じ値が何度も追加されるのを防いでいます。

const arr = [1, 4, 3, 3, 1, 3, 2, 4, 2, 1, 4, 4];
const removeDuplicate = arr => {
    const res = [];
    for(let i = 0; i < arr.length; i++){
        if(arr.indexOf(arr[i]) !== arr.lastIndexOf(arr[i])){
            if(!res.includes(arr[i])){
                res.push(arr[i]);
            };
        };
    };
    return res;
};
console.log(removeDuplicate(arr));

コードの解説

この関数の仕組みは以下のとおりです。

• indexOf() と lastIndexOf() の比較: ある値が最初に出現する位置と最後に出現する位置が異なる場合、その値は配列内に複数存在する(= 重複している)ことを意味します。
• includes() による重複チェック: すでに結果配列 res に追加済みの値は、二度と push されないよう制御しています。

実行結果

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

[1, 4, 3, 2]

補足：Set を使ったより簡潔な書き方

モダンなJavaScriptでは、filter() と Set を組み合わせることで、同じ処理をより短く記述できます。

const arr = [1, 4, 3, 3, 1, 3, 2, 4, 2, 1, 4, 4];

const duplicated = [...new Set(arr.filter(v => arr.indexOf(v) !== arr.lastIndexOf(v)))];

console.log(duplicated); // [1, 4, 3, 2]

filter() で重複している要素だけを残し、new Set() によって一意な値に絞り込んでいます。スプレッド構文(...)を使えば、Setを簡単に配列へ戻すことも可能です。可読性とパフォーマンスの観点から、こちらの書き方を推奨する場面も多くなっています。