JavaScriptで配列の重複を除去する方法について説明します。この手法は重複を取り除いたテーブルなどを表示するときに使うことができます。独自に重複を除外する処理を書くこともできますが、filterメソッドを使うと簡潔に記述することができます。
filterメソッドを用いた重複の除去
filterメソッドは、配列の全要素について任意の関数を順番に適用していき、true が返された要素のみからなる新しい配列を返します。つまり、配列の全要素から条件に一致した要素のみを抽出することができます。
次の例は、filterメソッドを使って重複する要素を除外した配列を新規生成するサンプルプログラムです。
|
1 2 3 4 5 6 7 8 9 |
var array1 = [1,2,2,3,3,3,4,4,5]; // 重複を除去した配列を返す var array2 = array1.filter(function (x, i, self) { return self.indexOf(x) === i; }); console.log(array1); // 1,2,2,3,3,3,4,4,5 console.log(array2); // 1,2,3,4,5 |
ここでは、引数に指定したコールバック関数を array1 の要素に順番に一度ずつ適用していき、true を返す要素のみを要素とした配列を生成して返します。
コールバック関数には３つの引数を指定でき、ここでは x は現在関数を適用している配列要素の値が代入されます。i は現在関数を適用している配列要素のインデックス番号を表しています（例えば、要素「１」のインデックス番号は０となります）。selfは要素を持つ配列自体です。また、indexOf(x) は、配列の要素が初めて現れるインデックス番号を返します。
例えば、array1 の重複要素である「２」がはじめに出現するインデックス番号（ indexOf(2) ）は１となります。「２」という要素のインデックス番号は１あるいは２なので、このうちインデックス番号１の要素である「２」のみが新しい配列の要素として抽出されます（ self.indexOf(2) === i; がtrueとなるのは最初に出現した「２」となります）。
同様に、重複要素である「３」のうち self.indexOf(x) === i; が true を返すのはインデックス番号が３の要素である「３」となり、新しい配列の要素として抽出されます。
