JavaScriptで配列の重複値を削除し、代わりに末尾へ空文字列を挿入する方法

はじめに

本記事では、配列を受け取り、その中から重複する値をすべて取り除き、取り除いた数と同じ数の空文字列を配列の末尾に挿入する関数をJavaScriptで実装します。

例えば、重複する値が4つ見つかった場合は、それらをすべて削除し、代わりに4つの空文字列を末尾に追加するイメージです。

実装の考え方

この処理は、Array.prototype.reduce() と Array.prototype.lastIndexOf() を組み合わせることで簡潔に実装できます。各要素について lastIndexOf() の結果と現在のインデックスを比較し、その要素が同じ値の「最後の出現」であれば結果配列に残し、そうでなければ重複としてカウントします。

コード例

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,
    '', '', '', '', '', '', '',
    '', '', '', ''
]

コードの解説

処理の流れは以下のとおりです。

• 重複の検出：array.lastIndexOf(val) === ind が成り立つとき、その要素は同じ値の中で最後に現れたものです。この場合、値を結果配列 res に追加します。
• 重複のカウント：上記の条件を満たさない要素は重複とみなし、カウンター count を1つ増やします。
• 空文字列の生成と結合：最後に、重複を除去した配列 res と空文字列の配列を concat() で連結し、末尾に空文字列が追加された結果を返します。

注意点

" ".repeat(count).split(" ") の部分では、n個の空白文字を分割すると n+1 個の空文字列が生成される点に注意してください。厳密に「削除した数と同じ数」の空文字列を挿入したい場合は、Array(count).fill("") を使うとより意図に沿った動作になります。

まとめ

reduce() と lastIndexOf() を組み合わせることで、重複の削除と空文字列の挿入を1回の走査で実現できます。配列操作の実務でも応用の効くテクニックなので、ぜひ参考にしてください。