LotosLabo

プログラミング技術とか気になった情報を載せていきます

Underscore.jsについて



開発環境


配列やオブジェクトの操作を始め、関数、オブジェクトなどを扱う際の関数が揃っており、簡潔にシンプルで変えるための便利なライブラリです。


開発環境

Githubよりインストールして使うことが出来ます。
https://github.com/jashkenas/underscore

また、CDNもあるので、どちらでもいいです。
http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js

今回はCDNの方を使っていきます。
型はこんなかんじで作っていきます。

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Underscore.js</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
</head>
<body>
	<h1>UNDERSCORE.JS</h1>
	<script>
		
	</script>
</body>
</html>


Underscore.jsを使っていく

値をシャッフルして並び替え

.shuffle

<script>
(function() {
	var x;
	x= _.shuffle([2,8,10,3]);
	console.log(x);
})();
</script>



コンソール画面になりますが、更新すると配列の値がシャッフルします。

f:id:lo25131:20140402033944g:plain

eachを使う

each
これはそれぞれの要素に処理を与えるというものです。

例:

<script>
  (function() {
   _.each([2,5,8], function(num) {
   console.log(num * 2);
});
})();
</script>



こうするとそれぞれの数値が二倍されます。

f:id:lo25131:20140402034357j:plain


mapを使う

map
配列にするという機能があります。

例:

<script>
  var x = _.map([2,5,8], function(num) {
  return num*2;
  });
  console.log(x);
</script>



こうすると配列化されます。
配列にして二倍にしました。

f:id:lo25131:20140402034650j:plain


find,filter,containsを使う

この3つはある集合要素に対して判定をつけるという機能があります。

find は一つのみ出力

例:

(function() {
	var a = [2,5,8,42,12];
	var x;
	x = _.find(a, function(num) {
	return num > 5;
	});
        console.log(x);
})();



これでは8を出力します。
配列の小さい順から見ていって5より大きい値に一番最初にマッチするのが8だからです。


filter はすべてを出力

例:

(function() {
	var a = [2,5,8,42,12];
	var x;
	x = _.filter(a, function(num) {
	return num > 5;
	});
       console.log(x);
})();



こちらは8,42,12をすべて出力します。


contains は値が入っているか確認

例:

(function() {
	var a = [2,5,8,42,12];
	var x;
	x = _.contains(a, 10);
	console.log(x);
})();



ここでは10があるかどうかの判断です。
10がないので、falseと出力されます。
ある場合はtrueです。


groupbyを使う

groupby 計算結果をグループ化します

例:

var a = [2,5,8,42,12];
	var x;
	x = _.groupBy(a, function(num) {
	return num % 3;
	});
	console.log(x);



これは配列の数字を3で割り、余りをグループ化します。

f:id:lo25131:20140402095556j:plain

見方としては、余りが0のものが2つ、余りが2のものが3つになります。

countbyを使う

countby 計算結果の数を取得

例:

var a = [2,5,8,42,12];
	var x;
x = _.countBy(a, function(num) {
	return num %2 == 0 ? 'even' : 'odd';
	});
	console.log(x);
})();



配列の数を2で割り、その余りが0であるか、否かを判断しています。
0の場合は、even、0でない場合はoddです。

f:id:lo25131:20140402100028j:plain


sortbyを使う

sortby 計算結果の数を並び替え

例:

var a = [2,5,8,42,12];
	var x;
x = _.sortBy(a, function(num) {
	return Math.sin(num);
	});
	console.log(x);
})();



配列の数をsinで並び替えします。
[5,42,12,2,8]となります。

またこれを応用して、文字列の長さで並び替えします。

x = _.sortBy(["me", "i", "and"], 'length');
	console.log(x);
	})();



lengthで文字列の長さの昇順で並び替えします。
i me and となります。

unionとuniqを使う

集合部分を取得します。

union 和集合

例:

(function() {
	var a = [2,5,8,42,12];
	var b = [3,5,13,22,42];
	var x;
	x = _.union(a,b);
	console.log(x);
	})();



aとb二つの数字を和集合で判断します。
同じ値はひとつになります。

出力結果は [2,5,8,42,12,3,13,22] となります。


intersection 共通部分

例:

(function() {
	var a = [2,5,8,42,12];
	var b = [3,5,13,22,42];
	var x;
	x = _.intersection(a,b);
	console.log(x);
	})();



aとb二つの数字の共通部分をとります。

出力結果は [5,42] となります。

difference 差要素

例:

(function() {
	var a = [2,5,8,42,12];
	var b = [3,5,13,22,42];
	var x;
	x = _.difference(a,b);
	console.log(x);
	})();



bにはないaの要素を取ります。

出力結果は [2,8,12] となります。

uniq 重複しない値

例:

 (function() {
	var x;
	x = _.uniq([2,5,2,10,5]);
	console.log(x);
	})();



xの要素を左から順に重複しない値をとります。

出力結果は [2,5,10] となります。


key,value,hasを使う

それぞれ配列の値を取得します。

key キーの値だけ出力

例:

(function() {
	var x;
	var user = {
		name: 'lotos',
		score: 80,
		web: 'http:lotoslabo.com'
		};
    x = _.keys(user);
    console.log(x);
	})();



キーの値だけ出力します。
出力結果: ["name", "score", "web"]  はこうなります。

values 値の方だけを出力

例:

(function() {
	var x;
	var user = {
		name: 'lotos',
		score: 80,
		web: 'http:lotoslabo.com'
		};
    x = _.values(user);
    console.log(x);
	})();



値だけ出力します。
出力結果: ["lotos", 80, "http:lotoslabo.com"]  はこうなります。


invert キーと値を逆にして両方出力

例:

(function() {
	var x;
	var user = {
		name: 'lotos',
		score: 80,
		web: 'http:lotoslabo.com'
		};
   x = _.invert(user);
    console.log(x);
	})();



キーと値を逆にして両方出力します。
出力結果: Object {80: "score", lotos: "name", http:lotoslabo.com: "web"}  はこうなります。

has その値があるか調べる

例:

(function() {
	var x;
	var user = {
		name: 'lotos',
		score: 80,
		web: 'http:lotoslabo.com'
		};
  x = _.has(user,"name");
    console.log(x);
	})();



nameがあるか調べます。
出力結果: true となります。


is型名 それぞれの型に合うか判定する

例:

(function() {
	var x;
	var user = {
		name: 'lotos',
		score: 80,
		web: 'http:lotoslabo.com'
		};
 x = _.isString(user.score);
    console.log(x);
	})();



scoreがString型に合うか判断します。
出力結果: false となります。
他にもisEmpty, isNull, isNumberなどがあります。


rangeを使う

範囲指定をします。

例:

var x;
x = _.range(11);
console.log(x);



0~10を出力しました。
出力結果: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

またこのように指定することで、
x = _.range(1,11,2);
1~10までの2飛びを出力します.
[1,3,5,7,9]

randomを使う

乱数を発生させます。

例:

var x;
x = _.random(10);
console.log(x);



0~10までの値をランダムで出力します。

timesを使う

連続で出力します。

例:

_.times(5,function() {
	console.log('hello');
	});



helloを5個出力します。

chainとvalueを使う

これは関数を続けて書くときに記述するつなげる役割を果たします。

例:

    (function() {
	var a = [2,5,8,42,12];
	x = _.chain(a)
	.shuffle()
	.map(function (num) {
		return num * 2;
	})
	.value();
	console.log(x);
	})();

つなげる最初に .chain 最後に .valueを書きます。
出力結果:[16, 84, 4, 24, 10]


テンプレート機能

最後によく使われるテンプレート機能を使っていきます。

<%= %> とか <%- %> です。

例:

(function() {
	var x;
	var user = {
			name: 'lotos',
			score: 50,
			web: 'http://lotoslabo.com'
			};
    var tpl = "name:<%- name %> score:<%- score %>)";
	x = _.template(tpl, user);
	console.log(x);
	})();



出力結果:name:lotos score:50