オブジェクト配列の重複排除もおまかせ！JavaScriptでスマートな重複削除

2024-05-01

JavaScriptの配列から重複した値を削除する方法について、いくつか代表的な方法をご紹介します。

Setオブジェクトを使う

Setオブジェクトは、重複のない要素の集合を保持するデータ構造です。Setオブジェクトに配列を渡すと、重複した要素が自動的に削除され、新しいSetオブジェクトが生成されます。その後、このSetオブジェクトを配列に変換することで、重複のない値の配列を取得できます。

const originalArray = [1, 2, 3, 4, 1, 2, 3];
const uniqueSet = new Set(originalArray);
const uniqueArray = Array.from(uniqueSet);
console.log(uniqueArray); // [1, 2, 3, 4]

filter関数とindexOf関数を使う

filter関数とindexOf関数を組み合わせることで、重複した値を削除することもできます。filter関数は、条件に合致する要素のみを含む新しい配列を生成します。indexOf関数は、指定した値が配列内に最初に存在するインデックスを返します。

const originalArray = [1, 2, 3, 4, 1, 2, 3];
const uniqueArray = originalArray.filter(value => originalArray.indexOf(value) === originalArray.lastIndexOf(value));
console.log(uniqueArray); // [1, 2, 3, 4]

reduce関数を使う

reduce関数は、配列の要素を1つずつ処理し、最終的な値を返す関数です。reduce関数を使用して、重複した値を削除するには、以下のコードのように、処理済みの要素を格納する配列と、現在の要素を比較する必要があります。

const originalArray = [1, 2, 3, 4, 1, 2, 3];
const uniqueArray = originalArray.reduce((result, value) => {
  if (!result.includes(value)) {
    result.push(value);
  }
  return result;
}, []);
console.log(uniqueArray); // [1, 2, 3, 4]

const originalArray = [1, 2, 3, 4, 1, 2, 3];
const uniqueArray = [];
originalArray.forEach(value => {
  if (uniqueArray.indexOf(value) === -1) {
    uniqueArray.push(value);
  }
});
console.log(uniqueArray); // [1, 2, 3, 4]

上記以外にも、様々な方法でJavaScriptの配列から重複を削除することができます。自分に合った方法を見つけて、ぜひ活用してみてください。

補足

上記のコード例は、単純な配列の重複削除を想定しています。オブジェクトの配列など、より複雑なデータ構造の場合は、適切な処理を行う必要があります。
性能を考慮する場合は、Setオブジェクトを使用するのがおすすめです。

以下に、JavaScriptで配列から重複を削除する3つの方法のサンプルコードを紹介します。

Setオブジェクトを使う

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

const uniqueSet = new Set(originalArray);
const uniqueArray = Array.from(uniqueSet);

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

解説:

originalArray という名前の配列を定義します。この配列には、重複した値が含まれています。
new Set(originalArray) を使用して、originalArray の要素をすべて含む新しい Set オブジェクトを作成します。Set オブジェクトは、重複した要素を自動的に削除します。
Array.from(uniqueSet) を使用して、uniqueSet の要素をすべて含む新しい配列を作成します。
console.log(uniqueArray) を使用して、uniqueArray の内容を出力します。

filter関数とindexOf関数を使う

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

const uniqueArray = originalArray.filter(value => originalArray.indexOf(value) === originalArray.lastIndexOf(value));

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

originalArray.filter(value => originalArray.indexOf(value) === originalArray.lastIndexOf(value)) を使用して、originalArray の各要素について、その要素が配列内に最後に登場するかどうかを調べます。
- originalArray.indexOf(value) は、value が originalArray 内に最初に登場するインデックスを返します。
- originalArray.indexOf(value) === originalArray.lastIndexOf(value) は、value が originalArray 内に1回しか登場していないことを意味します。
上記の条件を満たす要素のみを含む新しい配列を生成します。

reduce関数を使う

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

const uniqueArray = originalArray.reduce((result, value) => {
  if (!result.includes(value)) {
    result.push(value);
  }
  return result;
}, []);

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

originalArray.reduce((result, value) => {...}, []) を使用して、originalArray の各要素を処理します。
- result は、処理済みの要素を格納する配列です。
- value は、現在処理している要素です。
if (!result.includes(value)) { result.push(value); } は、value が result にまだ含まれていない場合は、result に value を追加します。
上記の処理を originalArray のすべての要素に対して実行します。

これらのコード例は、基本的な方法を示しています。状況に応じて、より効率的な方法を選択することもできます。

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

上記で紹介した方法以外にも、JavaScriptで配列から重複を削除する方法はいくつかあります。以下に、いくつかの例を紹介します。

const originalArray = [1, 2, 3, 4, 1, 2, 3];
const uniqueArray = [];

for (let i = 0; i < originalArray.length; i++) {
  if (!uniqueArray.includes(originalArray[i])) {
    uniqueArray.push(originalArray[i]);
  }
}

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

for ループを使用して、originalArray の各要素を処理します。
if (!uniqueArray.includes(originalArray[i])) は、originalArray[i] が uniqueArray にまだ含まれていないかどうかを調べます。

オブジェクトのキーとして使用する

const originalArray = [1, 2, 3, 4, 1, 2, 3];
const uniqueObject = {};
const uniqueArray = [];

for (const value of originalArray) {
  if (!uniqueObject[value]) {
    uniqueObject[value] = true;
    uniqueArray.push(value);
  }
}

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

uniqueObject という空のオブジェクトを定義します。このオブジェクトは、originalArray の各要素をキーとして使用します。
!uniqueObject[value] は、value が uniqueObject のキーとしてまだ存在していないかどうかを調べます。

ライブラリを使用する

JavaScriptには、配列から重複を削除する機能を提供するライブラリがいくつかあります。以下に、2つの例を紹介します。

これらのライブラリを使用するには、まずライブラリをインストールする必要があります。その後、以下のコードのようにライブラリの関数を使用して、配列から重複を削除することができます。

const originalArray = [1, 2, 3, 4, 1, 2, 3];
const uniqueArray = _.uniq(originalArray); // lodashを使用する場合
const uniqueArray = _.unique(originalArray); // underscoreを使用する場合

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