Help us understand the problem. What is going on with this article?

[Underscore.js]よく使いそうなモジュールまとめてみた

More than 5 years have passed since last update.

Underscore.jsってなに

標準のJavaScriptに無い便利なモジュールがたくさん入っています。Backbone.jsが標準で使ってるやつです。

サンプル

shuffle

var shuffleArray = _.shuffle([1,2,3,4,5]);
console.dir(shuffleArray);

shuffle別の書き方

console.dir(_([1,2,3,4,5]).shuffle());

each

_(_([
    {name: "A", power: 10},
    {name: "B", power: 20},
    {name: "C", power: 15},
]).shuffle()).each(function (l) {
    console.log(l.name, l.power);
});
_.each(_.shuffle([
    {name: "A", power: 10},
    {name: "B", power: 20},
    {name: "C", power: 15},
]), function (l) {
    console.log(l.name, l.power);
});

map

console.dir(_([1,2,3,4,5]).map(function (l) {
    return l+5; // +5した値で新たに配列を作成
}));
console.dir(_.map([1,2,3,4,5], function (l) {
    return l+5;
}));

range

console.log(_.range(5)); // 0,1,2,3,4

random

console.log(_.random(-100, 100)); // -100から100の間のランダムな値

find

console.log(_([1,2,3,4,5]).find(function (l) {
    return l > 2; // 2より大きな数で、最初にマッチした数を返す
}));
console.log(_.find([1,2,3,4,5], function (l) {
    return l > 2;
}));

filter

console.dir(_([1,2,3,4,5]).filter(function (l) {
    return l > 2; // 2より大きな数全て、マッチした数を返す
}));
console.dir(_.filter([1,2,3,4,5], function (l) {
    return l > 2;
}));

contains

// containsは、指定したデータが含まれているかどうかを返す
console.log(_([1,3,12,8,9,12,12,9]).contains(12));
console.log(_.contains([1,3,12,8,9,12,12,9], 12));

keys

// keysは、オブジェクトのプロパティをすべて配列で出す
console.log(_({"a": 1, "b": 2, "c": 3}).keys());
console.log(_.keys({"a": 1, "b": 2, "c": 3}));

values

// valuesは、オブジェクトのプロパティの値をすべて配列で出す
console.log(_({"a": 1, "b": 2, "c": 3}).values());
console.log(_.values({"a": 1, "b": 2, "c": 3}));

has

// hasは、プロパティ名が含まれているかを調べる
console.log(_({"a": 1, "b": 2, "c": 3}).has("a"));
console.log(_.has({"a": 1, "b": 2, "c": 3}, "a"));

groupBy

// groupByは、登録した関数の返り値で分類してオブジェクト化してくれる
console.dir(_([1,3,12,8,9,12,12,9]).groupBy(function (num) {
    return num%2; // 奇数と偶数に分類
}));
console.dir(_.groupBy([1,3,12,8,9,12,12,9], function (num) {
    return num%2;
}));

countBy

// countByはgroupByと似ていて、分類する
// ただ、違うのは分類後のカウント数を返す
console.dir(_([1,3,12,8,9,12,12,9]).countBy(function (num) {
    return num%2; // 奇数と偶数に分類
}));
console.dir(_.countBy([1,3,12,8,9,12,12,9], function (num) {
    return num%2;
}));

sortBy

// sortByは、登録した返り値でソートする
console.dir(_([1,3,12,8,9,12,12,9]).sortBy(function (num) {
    return num;
}));
console.dir(_.sortBy([1,3,12,8,9,12,12,9], function (num) {
    return num;
}));

union

// unionは、ユニークな値だけで配列を作成する
console.log(_([1,3,12,8,9,12,12,9,4]).union());
console.log(_.union([1,3,12,8,9,12,12,9,4]));

uniq

// uniqは、ユニークな値だけで配列を作成する
// 既にソート済みだったら、引数にtrueを渡すとより高速に動作する(らしい)
// デフォルトはfalse
console.log(_([1,3,12,8,9,12,12,9,4]).uniq(false));
console.log(_.uniq([1,3,12,8,9,12,12,9,4], false));

かんそう

ruby的な便利関数を_()で書けるようになる感じでしょうか。

...実は上記のほとんど、tmlib.jsでできるんですよ。というステマ。

[1,2,3,4].shuffle().each(function (l) {
    console.log(l);
});

という感じで。

templateについては別途まとめながら触ってみようかなぁ。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away