underscore.jsの使い方

underscore.jsの使い方

underscore.jsはjavascriptの配列やJSON形式のデータを操作するのを簡単にしてくれるライブラリです。

シンプルなライブラリなのでソースを解読することが容易です。

underscore.jsのソース

以下のようにプリロードして使います。

<script type="”text/javascript”" src="”http://underscorejs.org/underscore-min.js”"></script>

100くらいメソッドがあるようですが、代表的なものを紹介します。

_.each(別名:_.foreach)

Arrayをイテレートします。以下は配列要素を順次、無名関数に渡してalertしています。

_.each([1,2,3],function(v){alert(v);})

デモです。

上記は以下のように関数を省くことも可能です。

_.each([1,2,3],alert)

デモです。

_.sortBy

JSON形式のデータをソートします。ソートするデータは以下ではnoの昇順です。

var json = [{"no":3,"age":24},{"no":2,"age":29},{"no":1,"age":27}];
alert(JSON.stringify(_.sortBy(json,function(v){return v.no;})));

デモです。

_.times

第一引数で指定した回数無名関数を実行します。

_.times(3,function(v){alert("test");})

デモです。

_.contains(別名:_.include)

第一引数の配列要素に、第二引数が含まれていればtrue、そうでなければfalseを返します。

alert(_.contains([1,2,3,6],6));

デモです。

_.pairs

引数にJSON形式のデータを渡すと以下のデモのようになります。

alert(JSON.stringify(_.pairs([{a:1,b:2,c:3},{d:4,e:5,f:6}])));

デモです。

{}でデータを渡すと配列に変換します。

alert(_.pairs({a:1,b:2,c:3}));

デモです。

上記を_.eachの第一引数に配列として渡して、イテレートすると配列であることがわかりやすいです。

_.each(_.pairs({a:1,b:2,c:3}),function(v){
  alert(v[0] + ":" + v[1]);
})

デモです。

_.map

.mapは.eachと非常によく似ています。

配列をイテレートし、順次処理して、その結果を配列として返します。

alert(_.map([1,2,3],function(v){
  return v * 10;
}))

デモです。

上記のデモでは配列自体がアラートされますが、.eachを使用して配列要素を順次アラートすることができます。これで.mapが返すのは配列であるとわかりやすいと思います。

_.each(_.map([1,2,3],function(v){
return v * 10;
}),function(v){alert(v);})

デモです。

_.filter

配列要素を順次、第二引数の関数で処理し、戻り値が真の配列要素のみを配列として返します。

alert(_.filter([1,2,3,4],function(v){
return v % 2 != 0;
}))

デモです。

_.find(別名:detect)

.filterと同じく配列要素を順次、第二引数の関数で処理し、戻り値が真の配列要素を、最初の一つだけ返します。ここが.filterと_.findの違いです。

alert(_.find([1,2,3,4],function(v){
return v % 2 != 0;
}))

デモです。

_.reject

_.findの逆で、第二引数の関数で処理し、戻り値が偽の配列要素のみを配列として返します。

alert(_.reject([1,2,3,4],function(v){
return v % 2 != 0;
}))

デモです。

_.reduce(別名:_.foldl,_.inject)

説明しづらいメソッドですが、配列要素を一つの結果にまとめるメソッドです。

以下は配列要素を全部掛け算している例です。第二引数の無名関数の第一引数が戻り値、第二引数に配列要素が順次割り当てられるようです。

alert(_.reduce([1,2,3,4],function(ret,v){
ret = ret * v;
return ret;
}))

デモです。

_.every(別名:_.all)

配列要素を順次、第二引数の関数で処理し、全ての戻り値が真の配列要素のみ、true、一つでもfalseがあればfalseを返します。

alert(_.every([1,3],function(v){
return v % 2 != 0;
}))

デモです。

falseとなる例です。

alert(_.every([1,3,4],function(v){
return v % 2 != 0;
}))

デモです。

_.max

このメソッドは最大値を返します。第一引数に配列を渡し、第二引数の戻り値に比較する配列要素を指定します。

var arr = [{name:"tom",age:24},{name:"bob",age:23},{name:"mary",age:40}];
var ret = _.max(arr,function(v){
return v.age;
})
alert(JSON.stringify(ret));

デモです。

_.min

_.maxの逆で、配列内の最小値のオブジェクトが返ってきます。

var arr = [{name:"tom",age:24},{name:"bob",age:23},{name:"mary",age:40}];
var ret = _.min(arr,function(v){
return v.age;
})
alert(JSON.stringify(ret));

デモです。

コメント

タイトルとURLをコピーしました