配列操作などでとても便利なJavaScriptのライブラリUnderscore.js

JavaScriptのユーティリティライブラリUnderscore.jsをやってみたいと思います。
 配列操作などをとても簡潔にコーディングできるので便利です。

JavaScriptで配列を扱うのに標準関数では物足りないので自作していましたが、Underscore.jsが全て解決してくれました。



#####Underscore.jsとは？ * JavaScriptのユーティリティライブラリ * 配列、オブジェクトの操作や便利な関数が100近く定義されている * Backborn.jsなどで使用されている * 軽量 minは20KB未満 * 簡単にコーディングできるため学習コストが低い Underscore.jsを使うことで、今まで冗長だったコードをスッキリ記述できます！ <br> #####Underscore.jsの準備 Underscore.jsは、<a href="http://underscorejs.org/">公式サイト</a>からダウンロードするかGitHubからクローンして調達できます。 CDNも使用できるのでそちらでも大丈夫です。ちゃんと最新版(現時点1.5.2)が使用できます。 <pre class='brush: bash'> <script type='text/javascript' src='http://underscorejs.org/underscore-min.js'></script> </pre> <br> #####コーディングしてみる jQueryは$を使用しますが、Underscore.jsは名前通り_(アンダースコア)を使用します。 あとはリファレンス見ながら使っていくってかんじですね。 リファレンスがかなり充実していて嬉しいですね（＾＾ <br> each関数で1、2、3とアラートで表示させています。 Underscore.jsは２通りの書き方があり関数的又はオブジェクト的に書けるそうです。 <pre class='brush: javascript'> (function() { //関数的 _.each([1, 2, 3], alert); //オブジェクト的 _([1, 2, 3]).each(alert); })(); </pre> コードの書き方で揉めそうなので、個人的にはどちらか統一して欲しい。 <br> each関数で連想配列のキーと値を受け取るときはこんな感じになります。 <pre class='brush: javascript'> //配列 _.each([1, 2, 3], function(value) { console.log(value); }); //連想配列 _.each({one: 1, two: 2, three: 3}, function(key, value) { console.log(key + ': ' + value); }); </pre> 他にもSQL文のような関数があるので、配列操作に困ることはなさそうです。 <br> #####最近読んだ本 <table cellpadding="0" cellspacing="0" border="0" style=" border:1px solid #ccc; width:170px;"> <tr style="border-style:none;"><td style="vertical-align:top; border-style:none; padding:10px 10px 0pt;"><a href="http://px.a8.net/svt/ejp?a8mat=264I8U+BAN2YA+249K+BWGDT&a8ejpredirect=http%3A%2F%2Fwww.amazon.co.jp%2Fdp%2F4774159905%2F%3Ftag%3Da8-affi-163528-22" target="_blank"><img border="0" alt="" src="http://ecx.images-amazon.com/images/I/61XZA+RKxOL._SS160_.jpg" /></a></td></tr> <tr style="border-style:none;"><td style="font-size:12px; vertical-align:middle; border-style:none; padding:10px;"><p style="padding:0; margin:0;"> <a href="http://px.a8.net/svt/ejp?a8mat=264I8U+BAN2YA+249K+BWGDT&a8ejpredirect=http%3A%2F%2Fwww.amazon.co.jp%2Fdp%2F4774159905%2F%3Ftag%3Da8-affi-163528-22" target="_blank">WEB DB PRESS Vol.77</a></p> <p style="color:#cc0000; font-weight:bold; margin-top:10px;"> 新品価格<br/>￥1,554<span style="font-weight:normal;">から</span><br/><span style="font-size:10px; font-weight:normal;">(2014/1/5 07:07時点)</span></p> </td></tr> </table> <img border="0" width="1" height="1" src="http://www19.a8.net/0.gif?a8mat=264I8U+BAN2YA+249K+BWGDT" alt=""> <table cellpadding="0" cellspacing="0" border="0" style=" border:1px solid #ccc; width:170px;"> <tr style="border-style:none;"><td style="vertical-align:top; border-style:none; padding:10px 10px 0pt;"><a href="http://px.a8.net/svt/ejp?a8mat=264I8U+BAN2YA+249K+BWGDT&a8ejpredirect=http%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB00D624AQO%2F%3Ftag%3Da8-affi-163528-22" target="_blank"><img border="0" alt="" src="http://ecx.images-amazon.com/images/I/51J94jnFKIL._SS160_.jpg" /></a></td></tr> <tr style="border-style:none;"><td style="font-size:12px; vertical-align:middle; border-style:none; padding:10px;"><p style="padding:0; margin:0;"> <a href="http://px.a8.net/svt/ejp?a8mat=264I8U+BAN2YA+249K+BWGDT&a8ejpredirect=http%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB00D624AQO%2F%3Ftag%3Da8-affi-163528-22" target="_blank">Functional JavaScript: Introducing Functional Programming with Underscore.js</a></p> </td></tr> </table> <img border="0" width="1" height="1" src="http://www15.a8.net/0.gif?a8mat=264I8U+BAN2YA+249K+BWGDT" alt="">