【徹底比較】JavaScriptの配列から重複を削除する3つの方法のメリットとデメリット

JavaScriptの配列から重複する値を削除するには、いくつかの方法があります。

方法 1: Set オブジェクトを使用する

最も簡単な方法は、Set オブジェクトを使用することです。Set オブジェクトは、重複を許容しない要素の集合を表します。

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

// 重複を除去した新しい配列を作成
const uniqueArr = new Set(arr);

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

filter メソッドと indexOf メソッドを使用して、重複する値を削除することもできます。

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

// 重複していない要素のみを抽出
const uniqueArr = arr.filter((element, index) => {
  return arr.indexOf(element) === index;
});

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

方法 3: reduce メソッドを使用する

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

// 重複していない要素のみを抽出
const uniqueArr = arr.reduce((acc, element) => {
  if (!acc.includes(element)) {
    acc.push(element);
  }
  return acc;
}, []);

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

方法 4: ライブラリを使用する

lodash などのライブラリを使用すると、重複する値を削除する関数が提供されます。

const _ = require('lodash');

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

// 重複を除去した新しい配列を作成
const uniqueArr = _.uniq(arr);

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

• シンプルで効率的な方法が必要な場合は、Set オブジェクトを使用するのがおすすめです。
• 配列の要素の順序を維持したい場合は、filter メソッドと indexOf メソッドを使用する必要があります。
• オブジェクトの配列など、より複雑なケースでは、reduce メソッドを使用する方が効率的かもしれません。
• ライブラリを既に使用している場合は、ライブラリの提供する関数を使用するのが便利です。

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

// 重複を除去した新しい配列を作成
const uniqueArr = new Set(arr);

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

方法 2: filter メソッドと indexOf メソッドを使用する

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

// 重複していない要素のみを抽出
const uniqueArr = arr.filter((element, index) => {
  return arr.indexOf(element) === index;
});

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

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

// 重複していない要素のみを抽出
const uniqueArr = arr.reduce((acc, element) => {
  if (!acc.includes(element)) {
    acc.push(element);
  }
  return acc;
}, []);

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

const _ = require('lodash');

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

// 重複を除去した新しい配列を作成
const uniqueArr = _.uniq(arr);

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

上記以外にも、以下の方法で重複する値を削除することができます。

• forループを使用して、配列を反復処理し、重複する要素を削除する
• オブジェクトを使用して、重複する要素を検出する

JavaScriptの配列から重複する値を削除するその他の方法

forループを使用する

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

// 重複する要素を削除
for (let i = 0; i < arr.length; i++) {
  for (let j = i + 1; j < arr.length; j++) {
    if (arr[i] === arr[j]) {
      arr.splice(j, 1);
      j--;
    }
  }
}

// 結果: [1, 2, 3, 4]
console.log(arr);

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

// 重複する要素を検出するためのオブジェクト
const obj = {};

// 配列を反復処理し、オブジェクトに要素を追加
for (const element of arr) {
  if (obj[element]) {
    // すでに存在する要素
    continue;
  }
  obj[element] = true;
}

// オブジェクトのキーを新しい配列に格納
const uniqueArr = Object.keys(obj).map(Number);

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

const _ = require('lodash');

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

// 重複を除去した新しい配列を作成
const uniqueArr = _.uniq(arr);

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