JavaScriptで配列から重複する値だけを抽出して新しい配列を作成する方法

JavaScriptでは、元の配列の中で重複している要素（ユニークではない要素）だけを抽出し、新しい配列を作成したい場面があります。本記事では、リテラルの配列を受け取り、重複する値のみをまとめた新しい配列を返す関数の実装方法をわかりやすく解説します。

やりたいこと

たとえば、次のような入力配列があったとします。

const arr = [3, 6, 7, 5, 3];

この場合、重複している値は「3」だけなので、期待される出力は以下の通りです。

const output = [3];

実装コード

この処理を実現するコードは以下のようになります。

const arr = [3, 6, 7, 5, 3];
const makeDuplicatesArray = (arr = []) => {
    const res = [];
    for(let i = 0; i < arr.length; i++){
        if(i === arr.lastIndexOf(arr[i])){
            continue;
        };
        res.push(arr[i])
    };
return res;
};
console.log(makeDuplicatesArray(arr));

コードの解説

この関数の仕組みは非常にシンプルです。各要素について、その値が配列内で最後に出現するインデックス（lastIndexOf）と現在のインデックスが一致するかどうかを判定しています。

• 一致する場合：その値は配列内に1回しか出現していない（＝ユニークな要素）ため、スキップします。
• 一致しない場合：同じ値がまだ後ろにも存在する（＝重複している）ため、結果配列に追加します。

なお、同じ値が3つ以上存在する場合は、最後の出現位置以外のすべてが結果に含まれる点に注意してください。また、lastIndexOfは毎回配列全体を走査するため、要素数が非常に大きい配列ではパフォーマンスに影響が出る可能性があります。そのようなケースでは、Mapやオブジェクトを使って出現回数をカウントする方法も検討するとよいでしょう。

実行結果

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

[3]