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

JavaScriptでは、同じ値が何度も出現する配列を扱うことがよくあります。たとえば、次のような配列には、複数回登場する重複値が含まれています。

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

ここで求められるのは、この配列を受け取って、元の配列の中で「重複している値」だけを取り出し、それぞれ1回だけ出力するJavaScript関数を作成することです。

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

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

実装例

それでは、この関数のコードを見ていきましょう。ポイントは、indexOf()とlastIndexOf()を組み合わせて「その値が配列内で複数回出現しているか」を判定し、さらにincludes()で結果への追加済みチェックを行うことです。

const arr = [1, 4, 3, 3, 1, 3, 2, 4, 2, 1, 4, 4];
const pickDuplicate = 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(pickDuplicate(arr));

コードの解説

• indexOf() と lastIndexOf() の比較： ある要素が最初に出現する位置（indexOf）と最後に出現する位置（lastIndexOf）が異なる場合、その値は2回以上登場している＝重複していると判断できます。
• includes() による重複チェック： 結果用の配列 res に同じ値がすでに存在する場合は push を行わないことで、各重複値を1回だけ抽出しています。

出力結果

コンソールへの出力は次のようになります。

[1, 4, 3, 2]

補足：Set を使った別のアプローチ

ES6以降では、filter()とSetを組み合わせることで、より簡潔に記述することも可能です。

const pickDuplicate = arr => {
    return [...new Set(arr.filter((v, i) => arr.indexOf(v) !== arr.lastIndexOf(v)))];
};
console.log(pickDuplicate(arr)); // [1, 4, 3, 2]

この手法を使えば、重複している値だけを短いコードで効率的に抽出できます。データのクレンジングや集計処理などで役立つテクニックなので、ぜひ覚えておきましょう。