JavaScriptのsplice()メソッドで配列の重複要素をその場で削除する方法

数値や文字列のリテラルを含む配列に重複した値が存在する場合、新しい配列を作成せず、また重複値を別の場所に保存することなく、元の配列から直接それらを取り除きたいケースがあります。

このような場合は、Array.prototype.splice() メソッドを使えば、配列をその場（in-place）で編集しながら要素を削除できます。さらに、Array.prototype.indexOf() と Array.prototype.lastIndexOf() を組み合わせることで、ある要素が配列内で重複しているかどうかを判定します。

判定ロジックの仕組み

indexOf() は指定した要素が最初に見つかった位置のインデックスを返し、lastIndexOf() は最後に見つかった位置のインデックスを返します。この2つの結果が異なる場合、その要素は配列内に複数存在することになります。そこで、該当インデックスの要素を splice() で1件ずつ削除していきます。

コード例

const arr = [1, 4, 6, 1, 2, 5, 2, 1, 6, 8, 7, 5];
arr.forEach((el, ind, array) => {
    if(array.indexOf(el) !== array.lastIndexOf(el)){
        array.splice(ind, 1);
    }
});
console.log(arr);

実行結果

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

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

ご覧のとおり、重複していた「1」「2」「5」「6」がそれぞれ1件だけ残り、それ以外の重複分が元の配列から直接削除されました。この手法のポイントは、フィルター処理で新たな配列を生成するのではなく、既存の配列自体を書き換えている点です。メモリの確保を抑えたい場合や、配列への参照を保持したまま重複を除去したい場合に有効なアプローチといえます。