【JavaScript】配列の重複を削除しつつ、末尾に空文字列を追加して元の長さを保つ方法

今回は、配列を受け取って重複する要素をすべて取り除き、その分だけ空文字列（''）を末尾に追加することで、元の配列と同じ長さを維持する関数を作成します。

例えば、重複した値が4つ見つかった場合には、それらをすべて削除し、代わりに4つの空文字列を配列の末尾に挿入します。

実装の考え方

この処理では、reduce() メソッドを使って配列を1回走査します。各要素について lastIndexOf() を呼び出し、現在のインデックスと一致するかどうか（＝その値が最後に出現する位置かどうか）を判定します。

• 最後の出現であれば、結果用の配列にその値を残す
• そうでなければ重複とみなし、カウンターを1つ増やす

最後に、カウントされた重複の数だけ空文字列を生成し、concat() で結果配列の末尾に連結すれば完成です。

サンプルコード

const arr = [1,2,3,1,2,3,2,2,3,4,5,5,12,1,23,4,1];
const deleteAndInsert = arr => {
    const creds = arr.reduce((acc, val, ind, array) => {
        let { count, res } = acc;
        if(array.lastIndexOf(val) === ind){
            res.push(val);
        }else{
            count++;
        };
        return {res, count};
    }, {
        count: 0,
        res: []
    });
    const { res, count } = creds;
    return res.concat(" ".repeat(count).split(" "));
};
console.log(deleteAndInsert(arr));

実行結果

上記のコードをコンソールで実行すると、次のような出力が得られます。

[
    2,  3,  5,  12, 23, 4,  1,
    '', '', '', '', '', '', '',
    '', '', '', ''
]

解説

この例では、元の配列の長さは17でした。ユニークな要素は7つ（2, 3, 5, 12, 23, 4, 1）なので、10個の重複が検出され、結果として7つの実データ＋10個の空文字列からなる、合計17要素の配列が出力されます。このように、重複を削除しても配列全体の長さは変わりません。