配列の重複する要素を削除する方法
JavaScriptで、PHPのarray_unique()のように配列の重複した要素を削除するには、indexOf()とfilter()を利用しましょう。
サンプルコード
下記関数は、受け取った配列の、自身のインデックス番号がindexOf()の結果と一致しない要素を除外します。重複する場合は一番左側にある要素が残されます。
function arrayUnique ( array ) {
return array.filter( function( value, index ) {
return index === array.indexOf( value ) ;
} ) ;
}
重複する場合に一番右側にある要素を残したい場合は、indexOf()ではなく、lastIndexOf()を利用しましょう。
function arrayUnique ( array ) {
return array.filter( function( value, index ) {
return index === array.lastIndexOf( value ) ;
} ) ;
}
デモ
配列の重複した要素が削除されているのを確認しましょう。
function arrayUnique( array ) {
return array.filter( function( value, index ) {
return index === array.indexOf( value ) ;
} ) ;
}
var a = arrayUnique( [ "a", "b", "c", "d", "a", "c", "e" ] ) ;
a =
lastIndexOf()を利用すると、重複した場合に末尾側の要素が残されます。同じ配列を引数にしていますが、結果が違いますね。
function arrayUnique( array ) {
return array.filter( function( value, index ) {
return index === array.lastIndexOf( value ) ;
} ) ;
}
var a = arrayUnique( [ "a", "b", "c", "d", "a", "c", "e" ] ) ;
a =
関連記事
- 指定文字を置換、削除する方法
- 文字列の中の指定した部分を置換したり削除します。
- ピンチイン・ピンチアウトでズームする方法
- タッチデバイスのピンチイン、ピンチアウトで画像を縮小、拡大します。
- 配列に要素を追加する方法
- 配列の先頭、末尾、または指定位置に要素を追加します。
- 静的なクリックを検出する方法
- 静的なクリック(static click)を検出するには、onmousedown、onmousemove、onmouseupのイベントを組み合わせましょう。
- 何番目の要素か確認する方法
- 要素が何番目にあるのかを確認するには、配列系メソッドのindexOf()を利用しましょう。
- 文字の登場回数を取得する方法
- あるテキストに含まれる文字の数を調べるには、match()を応用します。