このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2013.11.19

【JS】【保存版】underscore.js の使用方法 まとめ Collection Functions

underscore.js

ども。

世間では、なんちゃらjsが多く溢れていて、何がなんやらで大変ですね。

でも、そんななんちゃらjsが皆さん好きなのかも知れませんね。

と、そんな感じで、今回は登場してちょっと経ちますが、配列操作に便利な underscore.js について書いて見たいと思います。

正式ドキュメント

underscore.js

http://underscorejs.org

このドキュメントに沿って、

メソッドの用途を一言。

正式ドキュメント。

使用例。

を書いてみたいと思います!

Collection Functions (Arrays or Objects)

each

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

配列の数の処理を実行。

_.each([1, 2, 3], alert);
=> alerts each number in turn...
_.each({one: 1, two: 2, three: 3}, alert);
=> alerts each number value in turn...

example

[code](function() {
_.each([3, 4, 5, 6], function(num) {
console.log(num * 2);
});
})();[/code]

map 

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

配列の数処理し、配列に格納

_.map([1, 2, 3], function(num){ return num * 3; });
=> [3, 6, 9]
_.map({one: 1, two: 2, three: 3}, function(num, key){ return num * 3; });
=> [3, 6, 9]

example

[code](function() {
var x = _.map([3, 4, 5, 6], function(num) {
return num * 2;
});
console.log(x);
})();[/code]

reduce 

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

配列を1つの値に集約する。memoが初期値。

var sum = _.reduce([1, 2, 3], function(memo, num){ return memo + num; }, 0);
=> 6

example

[code](function() {
var x = _.reduce([3, 4, 5, 6], function(memo, num) {
return memo + num;
}, 0);
console.log(x);
})();[/code]

上記の場合、0が初期値。

reduceRight 

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

reduceを右から処理

var list = [[0, 1], [2, 3], [4, 5]];
var flat = _.reduceRight(list, function(a, b) { return a.concat(b); }, []);
=> [4, 5, 2, 3, 0, 1]

example

[code](function() {
var list = [[2, 3], [4, 5], [6, 7]];
var x = _.reduceRight(list, function(a, b) {
return a.concat(b);
}, []);
console.log(x);
})();[/code]

find

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

条件判定で検索

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

example

[code](function() {
var a = [4, 6, 10, 65, 32];
var x = _.find(a, function(num) {
return num > 7;
});
console.log(x);
})();[/code]

filter

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

条件を満たす値を返す

var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
=> [2, 4, 6]

example

[code](function() {
var a = [4, 6, 10, 65, 32];
var x = _.filter(a, function(num) {
return num > 7;
});
console.log(x);
})();[/code]

where

_.where(list, properties)

該当するオブジェクトを全て返す

_.where(listOfPlays, {author: "Shakespeare", year: 1611});
=> [{title: "Cymbeline", author: "Shakespeare", year: 1611},
    {title: "The Tempest", author: "Shakespeare", year: 1611}]

example

[code](function() {
var listOfPlays = [
{
title: "Cymbeline",
author: "Shakespeare",
year: 1611
},
{
title: "The Tempest",
author: "Shakespeare",
year: 1611
},
{
title: "web帳",
author: "me",
year: 1978
}
];
var x = _.where(listOfPlays, {author: "me", year: 1978});
console.log(x);
})();[/code]

findWhere

_.findWhere(list, properties)

該当するオブジェクトを探す

_.findWhere(publicServicePulitzers, {newsroom: "The New York Times"});
=> {year: 1918, newsroom: "The New York Times",
  reason: "For its public service in publishing in full so many official reports,
  documents and speeches by European statesmen relating to the progress and
  conduct of the war."}

example

[code](function() {
var listOfPlays = [
{
title: "Cymbeline",
author: "Shakespeare",
year: 1611
},
{
title: "The Tempest",
author: "Shakespeare",
year: 1611
},
{
title: "web帳",
author: "me",
year: 1978
}
];
var x = _.findWhere(listOfPlays, {author: "Shakespeare"});
console.log(x);
})();[/code]

reject

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

リストの要素の中から、真値テストを通過しなかったものを返す。

var odds = _.reject([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
=> [1, 3, 5]

example

[code](function() {
var a = [5, 8, 12, 13, 15, 26]
var x = _.reject(a, function(num) {
return num % 2 == 0;
});
console.log(x);
})();[/code]

every

_.every(list, [iterator], [context]) Alias: all

list の値すべてが iterator 真値テストをパスしたら true を返します。

_.every([true, 1, null, 'yes'], _.identity);
=> false

example

[code](function() {
var x = _.every(['hoge', 'no', 'null', 'yes'], _.identity);
console.log(x);
})();[/code]

some

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

list の値のどれかが iterator 真値テストをパスしたら true を返します。/

_.some([null, 0, 'yes', false]);
=> true

example

[code](function() {
var x = _.some([null, false, null, 0]);
console.log(x);
})();[/code]

contains

_.contains(list, value)

list の値にvalueがみつかれば true を返します。

_.contains([1, 2, 3], 3);
=> true

example

[code](function() {
var a = [5, 8, 12, 13, 15, 26]
var x = _.contains(a, 26);
console.log(x);
})();[/code]

invoke

_.invoke(list, methodName, [*arguments])

 

listの中のそれぞれの値に対して methodName で指名されたメソッドをコールします。

_.invoke([[5, 1, 7], [3, 2, 1]], 'sort');
=> [[1, 5, 7], [1, 2, 3]]

example

[code](function() {
var a = [5, 8, 12, 13, 15, 26]
var x = _.invoke([[5, 2, 7, "3943"], ['テキスト', 2, 1]], 'sort');
console.log(x);
})();[/code]

pluck

_.pluck(list, propertyName)

mapの便利版。プロパティ値のリストの抽出。

var stooges = [{name: 'moe', age: 40}, {name: 'larry', age: 50}, {name: 'curly', age: 60}];
_.pluck(stooges, 'name');
=> ["moe", "larry", "curly"]

example

[code](function() {
var person = [
{ name: 'わたし', age: 20 },
{ name: 'あなた', age: 22 },
{ name: 'そなた', age: 40 }
];
var x = _.pluck(person, 'name');
console.log(x);
})();[/code]

max

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

list の中の最大値を返します。

var stooges = [{name: 'moe', age: 40}, {name: 'larry', age: 50}, {name: 'curly', age: 60}];
_.max(stooges, function(stooge){ return stooge.age; });
=> {name: 'curly', age: 60};

example

[code](function() {
var person = [
{ name: 'わたし', age: 20 },
{ name: 'あなた', age: 22 },
{ name: 'そなた', age: 40 }
];
var x = _.max(person, function(stooge) { return stooge.age; });
console.log(x);
})();[/code]

min

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

 

list の中の最小値を返します。

var numbers = [10, 5, 100, 2, 1000];
_.min(numbers);
=> 2

example

[code](function() {
var person = [
{ name: 'わたし', age: 20 },
{ name: 'あなた', age: 22 },
{ name: 'そなた', age: 40 }
];
var x = _.min(person, function(stooge) { return stooge.age; });
console.log(x);
})();[/code]

sortBy

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

それぞれの値を iterator に通した結果でランク付けした順に並び替えられたlist のコピーを返す。

_.sortBy([1, 2, 3, 4, 5, 6], function(num){ return Math.sin(num); });
=> [5, 4, 6, 3, 1, 2]

example

[code](function() {
var a = [1, 2, 3, 4, 5, 6];
var x = _.sortBy(a, function(num) { return num * -1; });
console.log(x);
})();[/code]

groupBy

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

それぞれの値を iteratorに通した結果グループ化した組に分けます。  iterator が関数ではなく文字列なら、値のそれぞれに対する iterator と名付けられたプロパティでグループ化します。

_.groupBy([1.3, 2.1, 2.4], function(num){ return Math.floor(num); });
=> {1: [1.3], 2: [2.1, 2.4]}
_.groupBy(['one', 'two', 'three'], 'length');
=> {3: ["one", "two"], 5: ["three"]}

example

[code](function() {
var a = [3, 4, 6, 8, 13, 15];
var x = _.groupBy(a, function(num){
return num % 3;
});
console.log(x);
})();[/code]

indexBy

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

iteratorのキーの値を元に結果を返します。

var stooges = [{name: 'moe', age: 40}, {name: 'larry', age: 50}, {name: 'curly', age: 60}];
_.indexBy(stooges, 'age');
=> {
  "40": {name: 'moe', age: 40},
  "50": {name: 'larry', age: 50},
  "60": {name: 'curly', age: 60}
}

example

[code](function() {
var person = [
{name: 'moe', age: 40},
{name: 'larry', age: 40},
{name: 'curly', age: 40}
];
var x = _.indexBy(person, 'age');
console.log(x);
})();[/code]

countBy

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

それぞれの値を iteratorに通した結果グループ化した組に分け、その結果の数を返す。

_.countBy([1, 2, 3, 4, 5], function(num) {
  return num % 2 == 0 ? 'even': 'odd';
});
=> {odd: 3, even: 2}

example

[code](function() {
var a = [2, 3, 6, 8, 18, 21];
var x = _.countBy(a, function(num) {
return num % 3 == 0 ? '3の倍数' : '3の倍数以外';
});
console.log(x);
})();[/code]

shuffle

_.shuffle(list)

list の値をシャッフルされたコピーを返します。

_.shuffle([1, 2, 3, 4, 5, 6]);
=> [4, 1, 6, 3, 5, 2]

example

[code](function() {
var a = ["web帳", 3, 6, 8, "牛丼", 21];
var x = _.shuffle(a);
console.log(x);
})();[/code]

sample

_.sample(list, [n])

 

list の値をランダムに標本として取得します。

_.sample([1, 2, 3, 4, 5, 6]);
=> 4

_.sample([1, 2, 3, 4, 5, 6], 3);
=> [1, 6, 2]

example

[code](function() {
var a = ["web帳", 3, 6, 8, "牛丼", 21];
var x = _.sample(a, 3);
console.log(x);
})();[/code]

toArray

_.toArray(list)

listをArrayに変換する。

(function(){ return _.toArray(arguments).slice(1); })(1, 2, 3, 4);
=> [2, 3, 4]

example

[code](function() {
var x = (function() {
return _.toArray(arguments);
})(1,3,4,"web帳");
console.log(x);
})();[/code]

size

_.size(list)

listに含まれている要素の数を返す。

_.size({one: 1, two: 2, three: 3});
=> 3

example
[code](function() {
var a = {
one: 1,
two: 2,
three: 3,
webcyou: "http://www.webcyou.com/"
}
var x = _.size(a);
console.log(x);
})();[/code]

と、凄く長くなることが判明しましたので、Array Functions は次回で、分けていきたいと思います。

 

 

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。