underscore.jsの使い方
underscore.jsはjavascriptの配列やJSON形式のデータを操作するのを簡単にしてくれるライブラリです。
シンプルなライブラリなのでソースを解読することが容易です。
以下のようにプリロードして使います。
<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));
デモです。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント