Xeebi

home categories feeds

ECMAScript 5 の新しい array methods

5 Array Methods That You Should Be Using Now | colintoh.com という記事に Array.indexOf(), Array.filter(), Array.forEach(), Array.map(), Array.reduce()(!) が紹介されていて, そこで参照されていた ECMAScript 5 compatibility table を見ると, 一般的なブラウザで案外いろんな array の method がサポートされてるのに気付いたのでメモ. ECMAScript 5 の機能は IE9+ を始め殆どのブラウザで実装されているようで1,この感じだと状況によってはガンガン使えるのではないでしょうか.

Array.prototype.indexOf()

arr.indexOf(searchElement [, fromIndex = 0]). fromIndexarr.length より大きければ常に -1 が返り, fromIndex に負の値を与えると array の最後からの offset として解釈される.

var a = ["Tofu", "Penguin", "Hummingbird"];
a.indexOf("Penguin")
// => 1
a.indexOf("Dragon")
// => -1

Array.prototype.lastIndexOf()

indexOf と同様に fromIndex (= arr.length) を指定できる.最後のを探すんじゃなくて逆から走査するつもりでいいと思う.

var a = [5,3,1,2,1];
a.lastIndexOf(1)
// => 4
a.lastIndexOf(5)
// => 0
a.lastIndexOf('foo')
// => -1

Array.prototype.every()

var a = [1,3,5];
a.every( function(e){ return e%2 === 1; } )
// => true
var b = [1,4,5];
b.every( function(e){ return e%2 === 1; } )
// => false

callback function は currentValue, index, array の3つの引数を受け取る.また every に optional で thisArg を渡せて, これは callback を実行するときにこれが this になるよ,という値.これだからjsは

Array.prototype.some()

var a = [1,3,5];
a.some( function(e){ return e%2 === 0; } )
// => false
var b = [1,4,5];
b.some( function(e){ return e%2 === 0; } )
// => true

だいたい every と同じ.

Array.prototype.forEach()

これの callback も element, index, array being traversed を受け取れる.

var a = [2,5,3];
a.forEach(function(e,i,a){ console.log(e,i,a); return e*i;})
// 2 0 [ 2, 5, 3 ]
// 5 1 [ 2, 5, 3 ]
// 3 2 [ 2, 5, 3 ]
// => undefined (or [ 0, 5, 6 ])

developer.mozilla.org の docs には「常に undefined を返す」と書いてあり,firefox もそのとおりの動作をする. node.js の v0.10.30 で試すと [0,5,6] が返ってきた. -> mapforEach を打ち間違えてたっぽい,すみません.

thisArg もある.

Array.prototype.map()

わーーーい

var a = [1,2,3];
a.map(function(e){ return e*2; })
// => [2,4,6];

callback が受け取れるものや thisArg についてはこれまでと同様.もう省略するね.

Array.prototype.filter()

var a = [1,2,3,4,5];
a.filter(function(e){ return e%2 === 0; })
// => [2,4]

Array.prototype.reduce()

どんどん函数型っぽくなってくるね,よい.

var a = [1,2,3,4,5];
a.reduce(function(acc,e) { return acc*e; })
// => 120
a.reduce(function(acc,e) { return acc*e; }, 3) // specify initial value
// => 360

この場合函数は previousValue, currentValue, index, array を受け取る.thisArg の指定はない.mozilla のドキュメントの解説が 親切なので慣れない場合は読んでみると良い.

Array.prototype.reduceRight()

foldr ですね.正格評価だしどっちにしろという感じもあるが,使いたい時もあろう.例は省略.

 

というわけでこんなもんだ.javascript もだんだん使いやすくなっていく(…のか,prototype が複雑化していって死ぬのかはわからないけれど)ということだろうか. Javascript の ruby 化というのも面白い気がするね.個人的には haste-compiler 推しだけれども.

  1. ECMAScript 6 になるとまだサポートしてないブラウザもちょくちょくある(主にIE)っぽい.