JavaScript - 配列で、重複した要素を削除する filter()

JavaScriptの配列で、重複した値が入っている要素を削除する方法を紹介します。

filter() メソッドと indexOf() メソッドを使うと、重複除去が簡単にできます。

重複した要素を削除するサンプルコード

次のコードは、filter() メソッドと indexOf() メソッドを使って、 重複要素を削除しています。

"b"と"c"の重複している分が、取り除かれているのがわかります。


var arr = ["a", "b", "b", "c", "c", "c"];

var new_arr = arr.filter(function(val, i, self){
	return i === self.indexOf(val);
});

console.log(new_arr); // Array [ "a", "b", "c" ]

filter() メソッドの概要

filter() メソッドは、配列の各要素に対して、引数として与えられたテスト関数を実行します。

そして、テストに合格した要素から成る、新しい配列を生成します。


var arr = [1, 2, 3, 4, 5];

var arr2 = arr.filter(function(x){return x >= 3;});

console.log(arr2);  // Array [ 3, 4, 5 ]

indexOf() メソッドの概要

indexOf() メソッドは、指定した値を配列中から検索し、 最初に見つかったインデックスを返します。

見つからなかった場合は -1 を返します。


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

console.log([1,2,3].indexOf(5)); // -1

重複データを除去するプロセス

filter() メソッドと、indexOf() メソッドの概要を押えた上で、 もう一度サンプルコードを見てみます。 

var arr = ["a", "b", "b", "c", "c", "c"];

var new_arr = arr.filter(function(val, i, self){
	return i === self.indexOf(val);
});

console.log(new_arr); // Array [ "a", "b", "c" ]

下の表は、「i」、「val」、「self.indexOf(val)」、「i === self.indexOf(val)」の値の対応表です。

この表を見ると、「i」と「self.indexOf(val)」が同じ場合にデータが抽出され、 それ以外は削除されることがわかります。

　i　　val　self.indexOf(val) i === self.indexOf(val)抽出するかどうか
0a0true○
1b1true○
2b1false
3c3true○
4c3false
5c3false