JavaScriptで配列内の重複要素をすべて削除する方法

リテラル値を要素とする配列を受け取り、重複している値をすべて削除するJavaScript関数を作成する必要があります。

配列には同じ値が複数回含まれている場合があります。この関数では、そのような繰り返しの値を配列からすべて取り除きます。つまり、重複している要素のインスタンスは1つ残らず削除しなければなりません。

アプローチ

この問題は、filter()メソッドとindexOf()・lastIndexOf()メソッドを組み合わせることで解決できます。

ある要素について、indexOf()が返す「最初の出現位置」と、lastIndexOf()が返す「最後の出現位置」が一致していれば、その要素は配列内に1回しか存在しないことを意味します。逆に位置が異なる場合は、その要素が重複していると判断できます。

コード例

実際のコードは以下の通りです。

const arr = [1, 2, 3, 2, 4];
const removeAllInstances = (arr = []) => {
   filtered = arr.filter(val => {
      const lastIndex = arr.lastIndexOf(val);
      const firstIndex = arr.indexOf(val);
      return lastIndex === firstIndex;
   });
   return filtered;
};
console.log(removeAllInstances(arr));

出力結果

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

[ 1, 3, 4 ]

コードの解説

上記の例では、入力配列[1, 2, 3, 2, 4]の中で「2」だけが2回出現しているため、重複要素と判定され削除されます。その結果、[1, 3, 4]という配列が返されます。

なお、この実装では各要素に対してindexOf()とlastIndexOf()を呼び出すため、計算量はO(n²)になります。大きな配列を扱う場合は、Mapを使って各要素の出現回数を先に数えておく方法が効率的です。

パフォーマンスを改善した例

const removeAllInstancesOptimized = (arr = []) => {
   const countMap = new Map();
   arr.forEach(val => {
      countMap.set(val, (countMap.get(val) || 0) + 1);
   });
   return arr.filter(val => countMap.get(val) === 1);
};
console.log(removeAllInstancesOptimized([1, 2, 3, 2, 4])); // [ 1, 3, 4 ]

この方法なら、配列を2回走査するだけで済むため、計算量はO(n)となり、大規模なデータでも高速に動作します。