Underscore.js

【Underscore.js】2つのオブジェクトを比較して内容が同等であるか判定する。

Javascriptにおいて別オブジェクトは内容が同等であっても比較演算子によってtrueを得ることはできないが、_.isEqual()メソッドを用いると2オブジェクトの内容を深くまで精査し、同等とみなせるか否かをブーリアンで返却してくれる。

以下例。

var obj1 = {foo: 'bar', baz: {hoge: 'fuga'}};
var obj2 = {foo: 'bar', baz: {hoge: 'fuga'}};

console.log(_.isEqual(obj1, obj2)); // true
console.log(obj1 == obj2); // false

 

【Underscore.js】オブジェクトのプロパティを別オブジェクトに引き継ぐ。

めも。

var obj1 = {hoge: 'foo'};
var obj2 = {fuga: 'bar'};

_.extend(obj1, obj2);

=> {hoge: 'foo', fuga: 'bar'}

 

【Underscore.js】配列の先頭を取得する。

めも。

var arr = [5, 4, 3, 2, 1];

_.first(arr);

=> 5

 

【Underscore.js】配列の最後を取得する。

めも。

var arr = [5, 4, 3, 2, 1];

_.last(arr);

=> 1

 

【Underscore.js】配列の要素をシャッフルする。

めも。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

_.shuffle(arr);

=> [4, 7, 1, 6, 3, 8, 5, 2, 9]

【Underscore.js】連想配列の指定プロパティの値を羅列した配列を生成する。

めも。

var arr = [
	{name: 'test1', email: 'test1@example.com', memo: 'test1memo'},
	{name: 'test2', email: 'test2@example.com', memo: 'test2memo'},
	{name: 'test3', email: 'test3@example.com', memo: 'test3memo'},
	{name: 'test4', email: 'test4@example.com', memo: 'test4memo'},
	{name: 'test5', email: 'test5@example.com', memo: 'test5memo'}
]

var r = _.pluck(arr, 'email');

console.log(r);

// ["test1@example.com", "test2@example.com", "test3@example.com", "test4@example.com", "test5@example.com"] 

_.pluck()の第1引数は連想配列、第2引数は引き抜きたいプロパティを指定する。

 

【Underscore.js】オブジェクトにイテレーターを適用した新しい配列を生成する。

めも。

var obj = {
	hoge: 'foo',
	fuga: 'bar',
	piyo: 'baz'
}

var r = _.map(obj, function(v, k, l){
	return k+v;
})

console.log(r);

// ["hogefoo", "fugabar", "piyobaz"]

例のごとく、第1引数はバリュー、第2引数はキー、第3引数は自分自身のオブジェクトを指す。

 

【Underscore.js】_.each()メソッド使い方メモ。

今日からunderscoreデビュー。

ということで軽く使うまでの手順と合わせて便利メソッドを一つめも。

まずはunderscore.jsを読み込み

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>

あとはjQueryと同じ感じで使うだけ。

試しにかの有名な_.each()メソッドを使ってみる。

var obj = {
	hoge: 'foo',
	fuga: 'bar',
	piyo: 'baz'
}

_.each(obj, function(v){
	console.log(v);
})

// foo
// bar
// baz 


_.each(obj, function(v, k){
	console.log(k);
})

// hoge
// fuga
// piyo 


_.each(obj, function(v, k, l){
	console.log(l);
})

// Object {hoge: "foo", fuga: "bar", piyo: "baz"}
// Object {hoge: "foo", fuga: "bar", piyo: "baz"}
// Object {hoge: "foo", fuga: "bar", piyo: "baz"}

第1引数にはバリューが渡され、第2引数にはキーが渡される。第三引数は自分自身のオブジェクトが渡される。

バリューを取り出したい場合、jQueryのeachメソッドのようにキーまで受け取ってやらなくて良いのでスマートに記述可能。