JavaScriptの配列で重複要素をサクッと取得！Setオブジェクトとfilter関数でスマート処理
2024-06-18
JavaScriptの配列における重複要素の取得方法
Set オブジェクトを利用する方法
最も簡潔で効率的な方法は、Set オブジェクトを利用する方法です。
const array = [1, 2, 3, 2, 4, 3];
const uniqueValues = [...new Set(array)];
console.log(uniqueValues); // [1, 2, 3, 4]
このコードは以下の処理を実行します。
new Set(array)で、arrayの要素をすべて含むSetオブジェクトを作成します。Setオブジェクトは、重複要素を自動的に排除し、順序を保持しない集合型データ構造です。...演算子を使ってSetオブジェクトをスプレッドし、新しい配列uniqueValuesに格納します。
この方法は、ES6以降 で利用可能です。
filter 関数と indexOf 関数を利用する方法
従来の方法としては、filter 関数と indexOf 関数を利用する方法があります。
const array = [1, 2, 3, 2, 4, 3];
const uniqueValues = [];
array.forEach(element => {
if (uniqueValues.indexOf(element) === -1) {
uniqueValues.push(element);
}
});
console.log(uniqueValues); // [1, 2, 3, 4]
- 空の配列
uniqueValuesを用意します。 arrayの各要素elementについて、uniqueValuesにまだ存在しない場合はpushで追加します。indexOf関数は、uniqueValues内でelementが最初に存在するインデックスを返します。インデックスが -1 である場合は、要素が存在しないことを意味します。
この方法は、すべてのブラウザで動作しますが、Set オブジェクトを利用する方法よりも冗長な記述となります。
その他の方法
上記以外にも、以下のような方法で重複要素を取得することができます。
- オブジェクトをキーとして利用するハッシュマップ
reduce関数を利用した方法
それぞれの方法には、利点と欠点があります。状況に応じて適切な方法を選択してください。
JavaScriptで配列の重複要素を取得するには、主に以下の3つの方法があります。
Setオブジェクトを利用する方法（ES6以降）- その他の方法（オブジェクトのキー、
reduce関数など）
それぞれの方法の利点と欠点を理解し、状況に応じて適切な方法を選択することが重要です。
サンプルコード：重複要素を含む配列から重複要素を取り除く
Set オブジェクトを利用する方法
const originalArray = [1, 2, 3, 2, 4, 3];
// Setオブジェクトを使って重複要素を取り除く
const uniqueSet = new Set(originalArray);
const uniqueArray = [...uniqueSet];
console.log(originalArray); // [1, 2, 3, 2, 4, 3]
console.log(uniqueArray); // [1, 2, 3, 4]
originalArrayを新しい変数uniqueSetにコピーします。Setオブジェクトは、重複要素を自動的に排除します。originalArrayとuniqueArrayをコンソールに出力します。
filter 関数を利用する方法
const originalArray = [1, 2, 3, 2, 4, 3];
// filter関数を使って重複要素を取り除く
const uniqueArray = originalArray.filter((element, index) => {
return originalArray.indexOf(element) === index;
});
console.log(originalArray); // [1, 2, 3, 2, 4, 3]
console.log(uniqueArray); // [1, 2, 3, 4]
filter関数を使って、originalArrayの各要素elementについて以下の処理を実行します。originalArray.indexOf(element)で、originalArray内におけるelementの最初のインデックスを取得します。- インデックスが
indexと等しい場合、つまりその要素が初めて出現した場合は、trueを返します。
filter関数は、trueを返した要素のみを含む新しい配列を返します。- 新しい配列を
uniqueArrayに格納します。
説明
- 元の配列
originalArrayを用意します。 - 重複要素を取り除いた新しい配列
uniqueArrayを作成します。 - 元の配列と新しい配列をコンソールに出力して、重複要素が取り除かれていることを確認します。
それぞれの方法における主な違いは、以下の通りです。
- Set オブジェクトを利用する方法:
- より簡潔で、コードが読みやすい。
ES6以降でのみ利用可能。
- filter 関数を利用する方法:
- すべてのブラウザで動作する。
- コードが少し冗長になる。
上記以外にも、オブジェクトのキーとして利用するハッシュマップや、reduce 関数を利用した方法など、様々な方法で重複要素を取得することができます。
JavaScriptで配列の重複要素を取得するその他の方法
オブジェクトのキーとして利用するハッシュマップ
この方法は、オブジェクトのキーとして値を格納し、キーの重複を排除することで、重複要素を取得する方法です。
const originalArray = [1, 2, 3, 2, 4, 3];
const uniqueMap = {};
const uniqueArray = [];
for (const element of originalArray) {
if (!uniqueMap[element]) {
uniqueMap[element] = true;
uniqueArray.push(element);
}
}
console.log(originalArray); // [1, 2, 3, 2, 4, 3]
console.log(uniqueArray); // [1, 2, 3, 4]
- 空のオブジェクト
uniqueMapを用意します。 originalArrayの各要素elementについて、以下の処理を実行します。uniqueMap[element]で、uniqueMapにelementキーが存在するかどうかを確認します。- 存在しない場合、
uniqueMap[element] = trueでelementをキーとしてuniqueMapに追加し、uniqueArrayにelementをプッシュします。
この方法は、オブジェクトのキーと値のペアを扱う場合に適しています。
reduce 関数を利用する方法
この方法は、reduce 関数を用いて、配列を順に処理しながら重複要素を排除していく方法です。
const originalArray = [1, 2, 3, 2, 4, 3];
const uniqueArray = originalArray.reduce((uniqueArray, element) => {
if (!uniqueArray.includes(element)) {
uniqueArray.push(element);
}
return uniqueArray;
}, []);
console.log(originalArray); // [1, 2, 3, 2, 4, 3]
console.log(uniqueArray); // [1, 2, 3, 4]
originalArrayをreduce関数に渡します。reduce関数は、配列の各要素elementと、前回の処理で生成された中間結果uniqueArrayを引数として受け取ります。- 存在しない場合、
uniqueArray.push(element)でelementをuniqueArrayにプッシュします。 - 上記の処理を
originalArrayのすべての要素に対して繰り返し、最終的なuniqueArrayを返します。
この方法は、関数型プログラミングの技法を用いた方法です。
比較関数を利用する filter 関数
この方法は、filter 関数と比較関数を利用して、重複要素を判定する方法です。
const originalArray = [1, 2, 3, 2, 4, 3];
const uniqueArray = originalArray.filter((element, index) => {
return originalArray.slice(0, index).indexOf(element) === -1;
});
console.log(originalArray); // [1, 2, 3, 2, 4, 3]
console.log(uniqueArray); // [1, 2, 3, 4]
filter関数を使って、originalArrayの各要素elementと、その要素のインデックスindexを引数として以下の処理を実行します。originalArray.slice(0, index)で、indexまで(ただしindexを含めない)の要素を含む新しい配列を作成します。indexOf関数を使って、elementがoriginalArray.slice(0, index)内に存在する
javascript arrays
