ES6で配列内の要素を重複なしにする方法は？

2年 ago
優斗, 朝陽
1 minute

ES6配列オブジェクトの重複除去には、以下のような一般的に使用される方法がいくつかあります。

  1. Setを使った方法: 配列をSetに変換することで一意化できます。SetはES6で追加されたデータ構造で、一意な値をどんなタイプでも格納できます。スプレッド構文（…）を使って配列をSetに変換し、再度Setから配列に戻します。
const arr = [1, 2, 3, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]
  1. Array.filter()を使用する: Array.filter()メソッドとindexOf()メソッドを組み合わせて重複排除を行うことができます。Array.filter()メソッドは、条件を満たす全ての要素を含む新しい配列を作成します。indexOf()メソッドを使用して、配列内での要素のインデックスを確認することができます。インデックスが現在処理しているインデックスと等しい場合、その要素は配列内でユニークであることを示します。
const arr = [1, 2, 3, 3, 4, 4, 5];
const uniqueArr = arr.filter((value, index, self) => {
  return self.indexOf(value) === index;
});
console.log(uniqueArr); // [1, 2, 3, 4, 5]
  1. Array.reduce()メソッドを利用する: Array.reduce()メソッドとincludes()メソッドを組み合わせて重複除去を実現できます。Array.reduce()メソッドは配列の各要素を順番にコールバック関数に渡して、コールバック関数の戻り値を次の呼び出しの累積器として使用します。コールバック関数でincludes()メソッドを使用して、累積器に現在要素が含まれているかどうかを確認でき、含まれていない場合は累積器に追加できます。
const arr = [1, 2, 3, 3, 4, 4, 5];
const uniqueArr = arr.reduce((accumulator, currentValue) => {
  if (!accumulator.includes(currentValue)) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);
console.log(uniqueArr); // [1, 2, 3, 4, 5]

以下に、よく使われている ES6 配列オブジェクトの重複除去方法を示します。具体的なニーズとパフォーマンスの要件に応じて、適切な方法を選択してください。

bannerAds