Underscore.jsのコレクションと配列とオブジェクトの機能をご紹介します。

コレクションの機能

Underscore.jsのコレクションの機能をご紹介します。コレクションの機能は配列やオブジェクト、「⁠配列のようなオブジェクト」で使えます。

配列のようなオブジェクト

「配列のようなオブジェクト」は配列のように0と正の整数の値をプロパティ名をして持っているオブジェクトです。この「配列のようなオブジェクト」は配列の持つ便利メソッド（join,sliceなど）を直接呼び出せませんが、通常の配列を同じように扱えます。

Argumentsオブジェクト、NodeList オブジェクト（getElementsByTagNameの戻り値）などが「配列のようなオブジェクト」になります。

ここでは、コレクションの主な機能を紹介します。その他の機能につきましては表1に簡単な説明を書きましたので、参考にしていただければと思います。

_.each()

書式

_.each(list, iterator, [context])

listの各要素に対してiterator（反復処理を行う関数）を実行します。

iteratorには引数は3つ渡します。引数が配列なら（listの値,listのindex,list）になります。引数がオブジェクトなら（listのプロパティ値,listのプロパティ名,list）になります。引数を1つだけ取るiteratorを記述しても問題ありません。残りの2つは無視されます。ネイティブの機能でforEach()が使える環境ではそちらを使います。

もし [context] オブジェクトが渡されたら、iterator はそれに束縛されます。

下記の例を見ると、iteratorが配列の数の分だけ呼び出されているのがわかります。

_.each( [6,3,1,2], function(val){ alert(val); });
// 6,3,1,2の順でアラート表示されます。

_.each( { six: 6, three: 3, one: 1, two: 2 }, function(val,key,list){ alert('key:' + key + ' val:' + val); });
// key:six val:6,key:three val:3,key:one val:1,key:two val:2の順でアラート表示されます。

_.each()を使うと繰り返しの文がfor文などで表すよりシンプルになり、バグの原因にもなりやすいと言われるループの終了条件の判定などもなくせます。

_.map()

書式

_.map(list, iterator, [context])

_.map()は_.each()と同様に、listの各要素に対してiterator（反復処理を行う関数）を実行します。しかし、_.map()は返ってくる値が_.each()とは異なり、各要素に対してiteratorが返す値を新しい配列として返します。_.map()を使うと配列の変換がシンプルに記述ができます。

ネイティブの機能でmap()が使える環境ではそちらを使います。なお、他の言語ではcollectと呼ばれる場合もあります。

var data = [6,3,1,2];

var data02 = _.map( data, function(val){ return val * 3; });

console.log(data02);
// => [18, 9, 3, 6] 各要素の値に対して3倍した新しい配列が返ります。

var data03 = _.map( {six: 6, three: 3, one: 1, two: 2} , function(val, key){ return val * 3; });

console.log(data03);
// => [18, 9, 3, 6] 各要素に対して3倍した値の配列が返ります。

_.reduce()

書式

_.reduce(list, iterator, memo, [context])

_.reduce()はlistの各要素に対してiteratorを実行し累積結果を返します。これは関数型プログラミングでは普通に行われる処理で、inject、foldと呼ばれることもあります。

iteratorの戻り値は累積結果であり、次の要素に対してiteratorの呼び出しで引数として渡されます。

iteratorの引数は（memo, value）になります。memoが累積結果になります。

ネイティブの機能でreduce()が使える環境ではそちらを使います。

var data = [6,3,1,2];

var product = _.reduce( data, function(memo, value){ return memo*value; }); //値の積
console.log(product);
// => 36

var max = _.reduce( data, function(memo, value){ return (memo > value )? memo : value; }); //値の最大値
console.log(max);
// => 6

_.filter()

書式

_.filter(list, iterator, [context])

listの各要素に対してiteratorを実行し、戻り値が真になる値を抜き出した配列を返します。

ネイティブの機能でfilter()が使える環境ではそちらを使います。

var smallVals = _.filter([1, 2, 3, 4, 5, 6], function(val){ return val log(smallVals);
// => [1, 2] 3より少ない値が新しい配列で返ります。

_.every()と_.some()

書式

_.every(list, [iterator], [context])

_.some(list, [iterator], [context])

_.every()と_.some()はlistの各要素に対してiteratorを実行し判定を行います。

_.every()はlistの各要素に対してiteratorを実行し、戻り値がすべて真なら真を、1つでも偽なら偽を返します。

ネイティブの機能でevery()が使える環境ではそちらを使います。

var data = [6,3,1,2];

//すべての値が10より大きい
var result = _.every( data, function(value){ return value log(result);
// => true

_.some()はlistの各要素に対してiteratorを実行し、戻り値が1つでも真なら真を、すべて偽なら偽を返します。

ネイティブの機能でsome()が使える環境ではそちらを使います。

var data = [6,3,1,2];

//値が偶数を含む
var result = _.some( data, function(value){ return value%2 === 0 ; });
console.log(result);
// => true

配列の機能

Underscore.jsの配列の機能についてご紹介します。配列の機能はargumentsオブジェクトでも動作します。また、Underscore.jsの配列の機能は「疎な配列」で動作するようには設計されていません。

疎な配列

疎な配列とは配列の要素が0から順に埋まっていない配列になります。

その他の機能につきましては表2に簡単な説明を書きましたので、参考にしていただければと思います。

_.compact()

書式

_.compact(array)

配列から偽となる要素を除いた配列を返します。偽の判定は、false, null, 0, "", undefined ,NaNになります。

var smallVals = _.filter([1, 2, 3, 4, 5, 6], function(val){ return val log(smallVals);
// => [1, 2] 3より少ない値が新しい配列で返ります。

_.union()と_.intersection()

書式

_.union(*arrays)

_.intersection(*arrays)

_.union()と_.intersection()は渡された複数の配列をまとめます。_.union()は渡された複数の配列の和集合を返します。

var data01 = [3, 22, 23, 6, 1];
var data02 = [1, 3, 22, 5];
var data03 = [6, 9, 1, 22, 3];

var unionData = _.union( data01, data02, data03 );
console.log(unionData);
//=> [3, 22, 23, 6, 1, 5, 9]

_.intersection()は渡された複数の配列の積集合を返します。

var data01 = [3, 22, 23, 6, 1];
var data02 = [1, 3, 22, 5];
var data03 = [6, 9, 1, 22, 3];

var intersectionData = _.intersection( data01, data02, data03 );
console.log(intersectionData);
//=> [3, 22, 1]

_.indexOf()

書式

_.indexOf(array, value, [isSorted])

配列の要素の中にvalueが存在すればその最初のインデックスを返します。

配列の要素の中に存在しない場合は“⁠-1⁠”を返します。配列がすでにソートされていれば[isSorted]にtrueを渡し、より速い検索を行えます。

ネイティブの機能でindexOf()が使える環境ではそちらを使います。

var idx = _.indexOf([3, 22, 23, 6, 1, 4, 6], 6);
console.log(idx);
=> 3

_.range()

書式

_.range([start], stop, [step])

整数の配列を返します。_.map()、_.each()でリストを作成するに便利です。デフォルト値を省略した場合 [start]が0、stepが1になります。

var data01 = _.range(10);
console.log(data01);
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

var data02 = _.range(1, 11);
console.log(data02);
//=> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

var data03 = _.range(0, 30, 5);
console.log(data03);
//=> [0, 5, 10, 15, 20, 25]

オブジェクトの機能

Underscore.jsのオブジェクトの主な機能を紹介します。プロパティの操作が便利になるものが用意されています。

その他の機能につきましては表3に簡単な説明を書きましたので、参考にしていただければと思います。

_.keys()と_.values()

書式

_.keys(object)

_.values(object)

_.keys()と_.values()はオブジェクトのプロパティ名、プロパティ値を返します。_.keys()はオブジェクトのプロパティ名をすべてを返します。

var pNames = _.keys({name: 'makoto', message: 'hello!!!' });
console.log(pNames);
//=> ["name", "message"]

_.values()はオブジェクトのプロパティ値のすべてを返します。

var pVals = _.values({name: 'makoto', message: 'hello!!!' });
console.log(pVals);
//=> ["makoto", "hello!!!"]

_.extend()

書式

_.extend(destination, *sources)

sourcesオブジェクトのプロパティをdestinationオブジェクトにコピーしてdestinationオブジェクトを返します。sourcesオブジェクトに同じプロパティ名を持つ場合は最後のものが上書きされます。

var obj = { name: 'makoto', message: 'hello!!!' };
var extend_obj = { hobby :['読書','散歩'] };

_.extend(obj, extend_obj);

console.log(obj);
//=> { name: 'makoto', message: 'hello!!!', hobby :['読書','散歩'] }

_.defaults()

書式

_.defaults(object, *defaults)

オブジェクトのプロパティでdefaultsオブジェクトのプロパティの未定義（undefined）のものがあれば上書きしてオブジェクトを返します。

var defaults_obj = { name: 'John Q', message: 'hi!!', };
var obj = { name: 'makoto' };

_.defaults(data, defaults_obj);

console.log(obj);
//=> {name: "makoto", message: "hi!!"}

_.isArray()

書式

_.isArray(object)

配列でしたら真を返します。

ネイティブの機能でArray.isArray()が使える環境ではそちらを使います。

var result = (function(){ return _.isArray(arguments); })();
conosle.log(result);
//=> false  argumentsオブジェクトは配列ではなく"配列のようなオブジェクト"のため偽を返します。

_.isArray([1,2,3]);
=> true 配列なので真を返します。

まとめ

Underscore.jsのコレクションと配列、オブジェクトの機能の紹介をさせていただきました。これらの機能を使えばコレクションの操作、判定なども容易になると思います。

次回は

• 関数の機能
• ユーテリティ（テンプレート等）
• Chaining

を紹介する予定です。次回もよろしくお願いします。