Underscore.jsを使ってみる

JavaScriptの配列やオブジェクトなどを扱うのに便利な関数がまとめられたライブラリ「Underscore.js」を使ってみます。

使い方

公式サイトからダウンロードします。

ダウンロードしたファイルを読み込めばOKです。

<script src="./underscore-min.js"></script>

Underscore.jsの関数をいくつか試してみます。
　

Collections

eachは第一引数に指定した配列/オブジェクトの数だけループして、第二引数の関数を実行します。

JavaScript

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

eachのデモページ

mapはeachと少し似ていますが、第二引数の関数のreturnをまとめて配列で返します。

JavaScript

var sample1 = _.map([1, 2, 3], function(num){ return num * 3; });
console.log(sample1); // [3, 6, 9]

mapのデモページ

findは第二引数の関数に一致する最初の値、filterは一致するすべてを返します。

JavaScript

var arr = [1, 2, 3, 4, 5, 6];
var sample = _.find(arr, function(num){ return num % 2 == 0; });
console.log(sample); // 2
var sample = _.filter(arr, function(num){ return num % 2 == 0; });
console.log(sample); // [2, 4, 6]

find/filterのデモページ

shuffleは配列の値をシャッフルして返します。

JavaScript

var sample = _.shuffle([1, 2, 3, 4, 5, 6]);
console.log(sample);

shuffleのデモページ

Arrays

firstは配列の先頭、lastは配列の最後を返します。

JavaScript

var arr = [5, 4, 3, 2, 1];
var sample1 = _.first(arr);
console.log(sample1); // 5
var sample2 = _.last(arr);
console.log(sample2); // 1

first/lastのデモページ

compactは配列からfalse,null,0,””,undefined,NaNを除外して返します。

JavaScript

var sample = _.compact([0, 1, false, 2, '', 3]);
console.log(sample); // [1, 2, 3]

compactのデモページ

Functions

bindはオブジェクトに関数をバインドします。

JavaScript

var func = function(greeting){
	return greeting + ': ' + this.name
};
func = _.bind(func, {name: 'Nene'}, 'Hello');
console.log(func()); // Hello: Nene

bindのデモページ

Objects

keysはオブジェクトのキーを、valuesはオブジェクトの値を配列にまとめて返します。

JavaScript

var obj = {one: 1, two: 2, three: 3};
var sample1 = _.keys(obj);
console.log(sample1); // ["one", "two", "three"]
var sample2 = _.values(obj);
console.log(sample2); // [1, 2, 3]

keys/valuesのデモページ

Utility

randomは指定範囲内からランダムな整数を返します。

JavaScript

var sample = _.random(0, 100);
alert(sample);

randomのデモページ

escapeは&,<,>,”,`,’をエスケープ、unescapeはその逆になります。

JavaScript

var sample = _.escape('Curly, Larry & Moe');
console.log(sample); // Curly, Larry & Moe
sample = _.unescape(sample);
console.log(sample); // Curly, Larry & Moe

escape/unescapeのデモページ

【参考サイト】

• Underscore.js