JavaScript で配列から重複を削除する
-
ECMAScript 6 の
spread構文を使って JavaScript の重複を削除するにはSetを使用する -
Array.filter()を使って JavaScript の配列から重複を削除する -
JavaScript でプリミティブ配列から重複を削除するには
hashtableを使用する -
JavaScript で配列の重複を削除するために
underscoreとLoDashライブラリの_.uniq()関数を使用する
このチュートリアルでは、JavaScript で異なるメソッドを使って配列から重複を削除する方法を説明します。メソッドの一つは、クラス Set のコンストラクタに対象の配列を渡して、同等の重複しない配列を返すことです。もう一つの方法は、JavaScript の配列の filter() メソッドを使い、そのコールバック関数にテスト条件を実装することです。
ECMAScript 6 の spread 構文を使って JavaScript の重複を削除するには Set を使用する
数学では、集合は一意で重複しない要素のグループを含みます。JavaScript では、Set クラスは配列から重複しない要素をすべて取得することができます。
ECMAScript 6 では、Set クラスを使って Set() コンストラクタに送ることで、重複しない要素の新しい配列を取得することができます。
var arr = [1, 2, 3, 4, 1, 2, 3, 1, 2, 3]
var uniqueArr = [...new Set(arr)]
console.log(uniqueArr)
出力：
[1, 2, 3, 4]
Array.filter() を使って JavaScript の配列から重複を削除する
JavaScript の配列では、filter() と呼ばれる高次の関数が導入されています。このテスト条件はコールバック関数の内部で実装され、filter() メソッドの引数として渡されます。
ループ内の現在の要素のインデックスが配列内で最初に現れるかどうかを調べるテスト条件を設定することで、配列から重複を取り除くことができます。関数 filter() は追加の引数 pos を取り、これが実行中の要素の配列のインデックスを表します。
var arrTwo = ['Hello 1 ', ' Hello 2 ', 'Hello 1 ', ' Hello 2 ', 'Hello 1 again']
const filteredArray = arrTwo.filter(function(ele, pos) {
return arrTwo.indexOf(ele) == pos;
})
console.log('The filtered array ', filteredArray);
出力：
The filtered array (3) ["Hello 1 ", " Hello 2 ", "Hello 1 again"]
JavaScript の ECMAScript 6 の矢印構文を利用することができれば、重複削除操作をより良い方法で実装することができます。
var arrTwo =
['Hello 1 ', ' Hello 2 ', 'Hello 1 ', ' Hello 2 ', 'Hello 1 again'];
const filteredArray = arrTwo.filter((ele, pos) => arrTwo.indexOf(ele) == pos);
console.log('The filtered array', filteredArray);
出力：
The filtered array (3) ["Hello 1 ", " Hello 2 ", "Hello 1 again"]
JavaScript でプリミティブ配列から重複を削除するには hashtable を使用する
数値 [ 1, 2, 3, 4, 1, 2, 3 ] のようなプリミティブ型のみで構成される配列があり、その配列から重複を除去したい場合は [ 1, 2, 3, 4 ] を用いて filterArray() 関数を実装することができます。
重複していないすべての値を含む found という一時的なオブジェクトを作成します。関数 filter の内部では、要素が found オブジェクトに既に存在する場合は false を返し、そうでない場合は true という値を指定してその要素を found オブジェクトに追加します。
var arrThree =
[
'Hello 1 ', ' Hello 2 ', ' Hello 2 ', 'Welcome', 'Hello 1 again',
'Welcome', 'Goodbye'
]
function filterArray(inputArr) {
var found = {};
var out = inputArr.filter(function(element) {
return found.hasOwnProperty(element) ? false : (found[element] = true);
});
return out;
}
const outputArray = filterArray(arrThree);
console.log('Original Array', arrThree);
console.log('Filtered Array', outputArray);
出力：
Original Array ["Hello 1 ", " Hello 2 ", " Hello 2 ", "Welcome", "Hello 1 again", "Welcome", "Goodbye"]
Filtered Array ["Hello 1 ", " Hello 2 ", "Welcome", "Hello 1 again", "Goodbye"]
JavaScript で配列の重複を削除するために underscore と LoDash ライブラリの _.uniq() 関数を使用する
既に underscore ライブラリのメソッドを使っている場合は、_.uniq() メソッドを使用することができます。これは、入力配列から最初に出現する要素のみを返すためです。
var arrFive = [1, 2, 3, 1, 5, 2];
console.log('LoDash output', _.uniq(arrFive));
LoDash output [1, 2, 3, 5]
このライブラリはここからインポートすることができます。