JavaScript - 配列から重複排除、4つの方法

JavaScriptの配列から重複する要素を削除する方法を紹介します。

1. Setを使用して重複を削除

Setは重複データの保存を許可しないデータ構造です。この属性を使用して配列のすべての要素をSetに追加すると、重複が自然に削除されます。 new Set(arr) は配列のデータが追加された Set オブジェクトが生成され、重複は許可されないため 1 つの要素だけが追加されます。 Set を Array に変更するときは、Spread operator を利用すれば [...set] のように簡単に変換できます。

const arr = ['A', 'B', 'C', 'A', 'B'];

const set = new Set(arr);
const newArr = [...set];
console.log(newArr)

Output:

[ 'A', 'B', 'C' ]

Set を Array に変換するときは、以下のように Array.from() を利用することもできます。

const arr = ['A', 'B', 'C', 'A', 'B'];
const newArr = Array.from(new Set(arr));
console.log(newArr)

2. filter(), indexOf() を使用して重複を削除する

filter() と indexOf() を使って重複を削除することもできます。 indexOf(element) は配列内の要素のインデックスを返し、重複した値がある場合は低いインデックスを返します。 したがって、 indexOf(element) === index が true になる場合は 1 つだけであり、他の重複した値は false が返され、 filter() によってフィルタリングされます。ちなみに、 filter(lambda)はlambdaがtrueのときにその要素を結果に含めます。

const arr = ['A', 'B', 'C', 'A', 'B'];

const newArr = arr.filter((element, index) => arr.indexOf(element) === index);
console.log(newArr);

Output:

[ 'A', 'B', 'C' ]

3. reduce() を使用した重複排除

reduce() は配列要素の値を順次巡回しながら一つの値を作る関数です。 初期値 initialValue が与えられると、配列の 0 番 index から演算を行い、その結果を次の演算の引数 (accumulator) に渡します。

以下の例はreduce()で重複を削除する方法ですが、accumulatorに追加されていない要素であれば追加し、それ以外は追加しません。これを最初の要素から最後の要素まで巡回しながら行います。

const arr = ['A', 'B', 'C', 'A', 'B'];

const initialValue = []
const newArr = arr.reduce((acc, obj) => acc.includes(obj) ? acc : [...acc, obj], initialValue)
console.log(newArr)

Output:

[ 'A', 'B', 'C' ]

4. for ループを使用した重複排除

繰り返しステートメントを使用してすべての要素を巡回し、重複した値を削除するように直接実装できます。 以下の例はforEachを使用して実装されています。

const arr = ['A', 'B', 'C', 'A', 'B'];

const newArr = [];
arr.forEach((element) => {
  if (!newArr.includes(element)) {
    newArr.push(element);
  }
});
console.log(newArr);

Output:

[ 'A', 'B', 'C' ]

References

• Mozilla - Array.reduce()
• Mozilla - Array.filter()