【JavaScript】配列の長さを保ったまま重複要素を削除する方法

この記事では、配列を受け取り、重複する要素をすべて削除し、削除した数と同じ数の空文字列（''）を末尾に追加することで、配列全体の長さを元のまま維持する関数をJavaScriptで実装する方法を解説します。

たとえば、重複した値が4つ見つかった場合は、その4つをすべて取り除き、代わりに4つの空文字列を配列の末尾に挿入します。こうすることで、処理後も配列の要素数はまったく変わりません。

reduce() を使った実装例

const arr = [1, 2, 3, 1, 2, 3, 2, 2, 3, 4, 5, 5, 12, 1, 23, 4, 1];

const deleteAndInsert = arr => {
  // 重複していない要素(res)と重複の個数(count)を集計する
  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(Array(count).fill(''));
};

console.log(deleteAndInsert(arr));

コードのポイント

• lastIndexOf(val) === ind：現在のインデックスが、その値が配列内で最後に出現する位置と一致しているかを判定します。一致すれば重複していない要素として結果に残します。
• 一致しない場合は重複とみなし、カウンター count を1つ増やします。
• Array(count).fill('') で空文字列を指定個数だけ生成し、concat() でユニークな要素の配列の末尾に連結しています。

出力結果

コンソールには以下のように表示されます。

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

重複が取り除かれた数値7つのあとに、削除された重複の数（10個）と同じ数の空文字列が並び、全体の要素数は元の配列と同じ17個のままになっています。

よりシンプルな実装：Set を使う方法

同じ処理は、Set を使うことでより簡潔かつ高速（線形時間 O(n)）に実装できます。

function deleteAndInsert(arr) {
  const seen = new Set();
  const unique = [];
  let dupCount = 0;

  for (const value of arr) {
    if (seen.has(value)) {
      dupCount++;           // 重複を見つけたらカウント
    } else {
      seen.add(value);
      unique.push(value);   // 初めて登場した値だけ残す
    }
  }

  // 重複の数だけ空文字列を追加して長さを維持
  return [...unique, ...Array(dupCount).fill('')];
}

console.log(deleteAndInsert([1, 2, 3, 1, 2, 3, 2, 2, 3, 4, 5, 5, 12, 1, 23, 4, 1]));

reduce() と lastIndexOf() を組み合わせた最初の実装は計算量が O(n²) になるのに対し、Set を使った実装は要素の検索が高速に行えるため、大きな配列を扱う場合により有利です。

まとめ

どちらの方法でも、元の配列の長さを保ちながら重複要素だけを取り除くことができます。コードの意図に合わせて、読みやすさとパフォーマンスのバランスを考えて実装を選びましょう。