JavaScriptで配列の重複を削除し、1つのインスタンスだけを残す方法

配列の重複を削除して1つだけ残す

JavaScriptでは、数値や文字列などのリテラル値を格納した配列から、重複する要素を取り除いて各値を1つだけ残したい場面がよくあります。ここでは、配列を受け取って重複した値を削除する関数の実装方法を解説します。

紹介する方法では、配列を先頭から順に走査しながら、同じ値が後ろにも存在するかどうかをlastIndexOf()で判定します。後ろに同じ値が存在する場合は現在の要素を削除し、存在しない場合のみ次の要素へ進みます。その結果、各値のインスタンスが1つだけ残った配列が得られます。

サンプルコード

const arr = [1, 5, 7, 4, 1, 4, 4, 6, 4, 5, 8, 8];
const deleteDuplicate = (arr = []) => {
  for(let i = 0; i < arr.length; ){
    const el = arr[i];
    if(i !== arr.lastIndexOf(el)){
      arr.splice(i, 1);
    } else {
      i++;
    }
  }
};
deleteDuplicate(arr);
console.log(arr);

実行結果

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

[ 7, 1, 6, 4, 5, 8 ]

コードの仕組み

• lastIndexOf(el)は、配列内で値elが最後に出現するインデックスを返します。
• 現在のインデックスiがそのインデックスと異なる場合、同じ値が後ろにも存在するため、splice(i, 1)で現在の要素を削除します。
• 削除を行った場合はインデックスを進めずに同じ位置を再チェックし、その値の最後の出現に到達した時点でiを1つ進めます。

この仕組みにより、元の配列[1, 5, 7, 4, 1, 4, 4, 6, 4, 5, 8, 8]から重複が取り除かれます。なお、この方法は各値の「最後の出現」が残る動作になる点に注意してください。

よりシンプルな代替方法：Setを活用する

実務では、Setオブジェクトを使うとより簡潔に重複を除去できます。Setは重複する値を自動的に無視するため、次のように書けます。

const arr = [1, 5, 7, 4, 1, 4, 4, 6, 4, 5, 8, 8];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [ 1, 5, 7, 4, 6, 8 ]

Setを使う方法は各値の「最初の出現」を残しつつ元の順序も維持し、計算量もO(n)と効率的です。パフォーマンスが求められる場面ではこちらの方法がおすすめです。