Underscore.jsの使い方入門

Underscore.jsとは？

概要

ざっくり言うと、JavaScriptの便利なライブラリ群で、Underscore.jsを使うとフロント側で大量のデータ処理をする際に、よく使うロジックをとても簡単に書くことができます。
paizaのプログラミングスキルチェックに出てくるような、難しい配列処理のプログラムを書くときにUnderscore.jsを使うと、難しいアルゴリズムを組まずに、ライブラリを呼び出すだけで処理ができます。

※参考：ドットインストール #01 Underscore.jsとはなにか？
http://dotinstall.com/lessons/basic_underscorejs

公式サイト

Underscore.jsソース

以下のGithubのリポジトリからunderscore-min.js(軽量)もしくはunderscore.jsをダウンロードして、読み込みを行えばUnderscore.jsが使えます。
https://github.com/jashkenas/underscore/

実装(サンプル)

shuffle → 配列をシャッフル

Underscore_1.js

var x = _.shuffle([2,8,10,3]); 
console.log(x); //[8, 2, 10, 3]

each → 配列の値を2倍にして返す

Underscore_2.js

_.each([2,8,6,4],function(num){ 
    console.log(num * 2) // 4,16,12,8
});

map → 配列の値を2倍にして配列を返す

Underscore_3.js

var y = _.map([2,8,6,4],function(num){ 
    return num * 2;
});
console.log(y); //[4, 16, 12, 8]

find → 条件に合致する値を返す(一つだけ)

Underscore_4.js

var y = _.find([2,8,6,4],function(num){ 
    return num>5;
});
console.log(y); //8

filter → 条件に合致する配列を返す(全て)

Underscore_5.js

var y = _.filter([2,8,6,4], function(num){ 
    return num>5;
});
console.log(y); //[8, 6]

contains → 配列に値が含まれているかの真偽を返す

Underscore_6.js

var y = _.contains(["Hokkaido","Tokyo","Saitama"], "Oita"); 
console.log(y); //false

var x = _.contains([2,8,6,4], 8); 
console.log(x); //true

groupBy → 条件に応じてグループ化できるメソッド

Underscore_7.js

var a = [1,2,5,8,42,12];

var x = _.groupBy(a,function(num){ 
    return num % 3; //要素を3で割り余りが同じになる要素をグループ化する
});
console.log(x);//[42, 12],[1],[2, 5, 8]

countBy → グループ化した要素の数を数える

Underscore_8.js

var a = [1,2,5,8,42,12];

var x = _.countBy(a,function(num){
    return num % 2 ==0 ? 'even':'odd' //配列の要素を奇数と偶数に分ける
});
console.log(x); //{odd: 2, even: 4}

sortBy → 要素の文字列を長い順に並び替える

Underscore_9.js

var x = _.sortBy(["me","I","and","Youres"],'length'); 
console.log(x); //["I", "me", "and", "Youres"]

二つの配列に対して処理する便利なメソッド

Underscore_10.js

var a = [1,2,5,6];
var b = [3,45,10,6,10,6,2];
var x;

// _.union → 重複しているものを省き配列で取得(和集合)
x = _.union(a,b);       
console.log(x); //[1, 2, 5, 6, 3, 45, 10]


// _.intersection → 共通の要素を取り出し配列で取得
x = _.intersection(a,b);
console.log(x); //[2, 6]


// _.difference → bにはないaの要素を配列で取得
x = _.difference(a,b);  
console.log(x); //[1, 5]


// _.uniq → 要素ののユニークなものだけを取得
x = _.uniq(b);
console.log(x); //[3, 45, 10, 6, 2]

オブジェクトに対して処理できるメソッド

Underscore_11.js

var x;
var user = {
    name: 'fujiwara',
    score: 80,
    web:'tech-portfolio.org'
};


// _.keys → キーを調べる
x = _.keys(user);
console.log(x); //["name", "score", "web"]


// _.values → valueを調べる
x = _.values(user); 
console.log(x); //["fujiwara", 80, "tech-portfolio.org"]


//keyとvalueを入れ替える
x = _.invert(user); 
console.log(x); //{80: "score", fujiwara: "name", tech-portfolio.org: "web"}


//keyが含まれているかどうかを返す
x = _.has(user , "name") 
console.log(x); //true


//nameのkeyの型を調べる
x = _.isString(user.name);
console.log(x); //true


x = _.isString(user.score);
console.log(x); //false

参考

以下の情報を参考にさせていただきました。ありがとうございました。
◆遅すぎたUnderscore.js入門 - 全体像
http://qiita.com/hp0me/items/72d80dc166aace2759dc

◆ドットインストール - Underscore.js入門 (全10回)
http://dotinstall.com/lessons/basic_underscorejs