Setオブジェクト、filter()、reduce()…JavaScriptで配列の重複を削除する3つの方法

JavaScriptで配列の重複を取り除く方法

Setオブジェクトは、重複を許さない要素の集合を表すオブジェクトです。Setオブジェクトに配列を渡すと、重複した要素が自動的に削除されます。

const arr = [1, 2, 3, 1, 2, 4];

const uniqueSet = new Set(arr);
const uniqueArr = Array.from(uniqueSet);

console.log(uniqueArr); // [1, 2, 3, 4]

filter()とindexOf()を使う方法では、配列内の各要素について、その要素がすでに配列内に存在するかどうかを確認します。すでに存在する場合は、その要素を削除します。

const arr = [1, 2, 3, 1, 2, 4];

const uniqueArr = arr.filter((element, index) => {
  return arr.indexOf(element) === index;
});

console.log(uniqueArr); // [1, 2, 3, 4]

reduce()を使う方法では、配列内の各要素を累積的に処理し、重複のない新しい配列を作成します。

const arr = [1, 2, 3, 1, 2, 4];

const uniqueArr = arr.reduce((acc, element) => {
  if (!acc.includes(element)) {
    acc.push(element);
  }
  return acc;
}, []);

console.log(uniqueArr); // [1, 2, 3, 4]

• Setオブジェクトを使う方法 は、最もシンプルでコードも短いため、多くの場合におすすめです。
• filter()とindexOf()を使う方法 は、Setオブジェクトが使えない場合や、処理内容を細かく制御したい場合に便利です。
• reduce()を使う方法 は、他の方法よりも処理速度が遅い場合があるため、あまり一般的ではありません。

JavaScriptで配列の重複を取り除く方法はいくつかあります。それぞれの方法のメリットとデメリットを理解して、状況に合わせて適切な方法を選択しましょう。

Setオブジェクトを使う

const arr = [1, 2, 3, 1, 2, 4];

const uniqueSet = new Set(arr);
const uniqueArr = Array.from(uniqueSet);

console.log(uniqueArr); // [1, 2, 3, 4]

filter()とindexOf()を使う

const arr = [1, 2, 3, 1, 2, 4];

const uniqueArr = arr.filter((element, index) => {
  return arr.indexOf(element) === index;
});

console.log(uniqueArr); // [1, 2, 3, 4]

reduce()を使う

const arr = [1, 2, 3, 1, 2, 4];

const uniqueArr = arr.reduce((acc, element) => {
  if (!acc.includes(element)) {
    acc.push(element);
  }
  return acc;
}, []);

console.log(uniqueArr); // [1, 2, 3, 4]

JavaScriptで配列の重複を取り除くその他の方法

forループとindexOf()を使う方法は、filter()とindexOf()を使う方法と似ていますが、forループを使用する点が異なります。

const arr = [1, 2, 3, 1, 2, 4];

const uniqueArr = [];

for (let i = 0; i < arr.length; i++) {
  if (uniqueArr.indexOf(arr[i]) === -1) {
    uniqueArr.push(arr[i]);
  }
}

console.log(uniqueArr); // [1, 2, 3, 4]

Object.keys()を使う方法は、オブジェクトのキーを取得する方法ですが、配列の重複を取り除くことにも使用できます。

const arr = [1, 2, 3, 1, 2, 4];

const uniqueArr = Object.keys(arr.reduce((acc, element) => {
  acc[element] = true;
  return acc;
}, {})).map(Number);

console.log(uniqueArr); // [1, 2, 3, 4]

Lodashなどのライブラリには、配列の重複を取り除くためのユーティリティ関数が用意されています。

const _ = require('lodash');

const arr = [1, 2, 3, 1, 2, 4];

const uniqueArr = _.uniq(arr);

console.log(uniqueArr); // [1, 2, 3, 4]