Underscore.js を使おう

投稿日時: 投稿者:

「Underscore.js」という便利なJavaScriptライブラリがあります。

このライブラリでは「_」という関数オブジェクトが提供されています。このオブジェクトに定義されている関数を直接使う方法（_.each(array, function(element) { … }); のようにする）と、引数へ対象オブジェクトを渡して使う方法（_(array).each(function(element) { … });）があります。

例として each, map, find, filter の使い方を示します。馴染みの関数ばかりなので、特別な説明もいらないでしょうが、eachは各要素に対して処理をしますし、mapは各要素に処理を適用して新しい配列をつくりますし、findは条件に一致する要素を見つけますし、filterは条件に一致する要素の新しい配列をつくります。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>sample16</title>
  <script src="underscore-min.js"></script>
</head>
<body>
  <div id="logtext" style="position:absolute;"></div><br />
<script>
function log(element) {
  var html = document.getElementById('logtext').innerHTML;
  document.getElementById('logtext').innerHTML = html + '<br>' + element;
}

log("_.each([1, 2, 3], log)");
_.each([1, 2, 3], log);

log("_.each({one : 1, two : 2, three : 3}, log)");
_.each({one : 1, two : 2, three : 3}, log);

var result0 = _.map([1, 2, 3], function(num){ return num * 3; });
log("_.map([1, 2, 3], function(num){ return num * 3; })");
_.each(result0, log);

var result1 = _.map({one : 1, two : 2, three : 3}, function(num, key){ return num * 3; });
log("_.map({one : 1, two : 2, three : 3}, function(num, key){ return num * 3; })");
_.each(result1, log);

var even = _.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
log("_.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }");
log(even);

var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
log("_.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; })");
_.each(evens, log);
</script>
</body>
</html>

JavaScriptについては、下記の書籍の参考になるでしょう。

プログラミング言語一般については、下記が参考になるでしょう。

同じタグの記事: JavaScript
同じカテゴリの記事: Program
関連書籍: JavaScript