2013年10月5日土曜日

Underscore.jsのメソッドまとめ

_.shuffle() : 配列をシャッフル

_.each() : 要素のそれぞれに処理を行う


            _.each ([2, 5, 8], function(num) {
                console.log(num*2);
             });
配列のそれぞれの要素がfunctionの引数に入ってきて処理を行う


_.map() : 要素のそれぞれに処理を行って、returnしたものを配列として返す
            x = _.map ([2, 5, 8], function(num) {
                 return num*2;
             });
           
x = [4, 10, 8]という風に返ってくる

find : 条件に最初に合うものを探して返す


              var a = [2, 5, 8, 42, 12];
              var x;
 
              x = _.find(a, function(num) {
                  return num > 5;
              });
    //aの各要素がnumに入って、num>5ならその値をxに入れて終了。
     最初に条件に一致したものを返す


filter :条件に合うもの全てを配列として返す、挙動はほぼfindとおなじ。
contains : 配列にある値があるかないかを判定する


            var a = [2, 5, 8, 42, 12];
              var x;
 
              x = _.contains(a, 8);

配列aに8という要素があればtrueなければfalseを返す

groupBy : 条件に併せてグルーピングして配列で返す

x = _.groupBy(a, function(num) {
return num % 3;
});
この場合だと3でわって余りが1のグループ、2のグループ、0のグループ
の配列を返す

countBy : 条件ごとに要素数をカウント

x = _.countBy(a, function(num){
  return num % 2 == 0 ? 'even' : 'odd';});条件に合う要素数をevenとして、合わない元をoddとして返す

sortBy:演算結果の大きさでソートする

x = _.sortBy(a, function(num) {
return Math.sin(num);
});

この場合は各要素のsin値の大きさでソートして配列を返す
x = _.sortBy(["me", "i", "and"], 'length');
このようにプロパティーを第二引数にとってそのプロパティーでソートする

集合演算子計

var a = [1, 2, 5];
var b = [5, 2, 8];
var x;
_.union : 複数の配列の重複を削除して和集合をとる

 x = _.union(a, b);
結果はx = [1, 2, 5, 8]

_.intersection : 共通部部分を探す

x = _.intersection(a, b);
結果はx = [2, 5]

_.difference : 差分を求める(第二引数の要素には無い第一引数の要素)
x = _.difference(a, b);


_.uniq:重複がないものだけ引っ張ってくる
x = _.uniq([2, 5, 2, 10, 5]);
結果はx = [2, 5, 10]

オブジェクトに関する関数

var x;
var user = {
 name: 'hotondo',
 score: 80,
 web: 'http://hotondo-kojin.com'
};

_.keys : オブジェクトのキーを返してくれる
x = _.keys(user);
結果
x = [name, score, web]

_.values : オブジェクトの値のみとってくる
x = _.values(user);

_.invert : value とkeyを逆転する
x = _.invert(user);

_.has : keyを持つか判定
x = _.has(user, "name");
結果
x = true;

あとはisEmptyとかisString, isNull, isNumberとかもある

生成系

_.range([start], stop, [step]) : startからstopまでの連続し配列を生成、stepに値をいれると飛び飛びになる

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

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

_.random([max]):[max]までの数字でランダムな数字を生成

_.escape(”文字列”) : 文字列を実体参照した形で表示する

_.times(回数, function()) : 関数の処理を回数分行う

_(回数).times(function()):処理される内容は”_.times(回数, function())”

繋げて書くことが出来るメソッド

_.chain(”処理対象”).メソッド.メソッド.メソッド.value() : このようにchainとvalueの間に複数のメソッドをつないで処理することができる

テンプレート機能
_.template:テンプレートを作成してその中にオブジェクトを当て込む機能です
var x;
var user = {
 name: 'hotondo',
 score: 80,
 web: 'http://hotondo-kojin.com'
};
var tpl = "<% console.log('hello from tpl'); %><li><%- name %> (<%- score %>)</li>";
x = _.template(tpl, user);
こうすることでtplのなかのnameとscoreにuserのオブジェクトが代入された形で出力されます。
代入する際に使われる括りが3種類あって
<% %> :内部にjavascriptの命令を書き込める
<%- %> :値をそのまま出力
<%= %> :値をエスケープして出力

2013年10月4日金曜日

haml メモ

属性の付け方
%html{:lang => "ja"}
%meta(charset="UTF-8")
の2種類がある

コメントの書き方
htmlにも反映される書き方 : /
htmlには反映されない書き方: -#
 *字下げすればコメントでくくられるので複数行かけるよ

属性の書き方いろいろ
<div class="myClass" id="main"></div>
と表示させたい場合


  1. %div{:id => "main", :class => "myClass"}
  2. %div(id="main" class="myClass")
  3. %div#main.myClass

上の1〜3どれでも同じように出力される

フィルターいろいろ

  • :css
  • :javascript
  • :escaped

  1. :css
  2. .myStyle {
  3. color: red;
  4. }
のように
:フィルター名
の後にインデントを下げて普通に内容を書けば
:cssなら<style>, :javascriptなら<script>, :escapedなら実体参照で出力される

Rubyの表現
#{}
カッコの中身ではルビーを実行できる、その結果がテキストとして出力される

%p total is #{5 * 3}
結果
<p>total is 15</p>

=
イコールの後にルビーの命令を入力することもできる
%p= Time.now
結果
<p>2012-11-14 19:47:53 +0900</p>

-
ただ単にルビーを実行したいときに使う
- (1..10).each do |i|
%p{:id => "item_#{i}"} #{i}

結果
<p id="item_1">1</p>
<p id="item_2">2</p>
<p id="item_3">3</p>
<p id="item_4">4</p>
<p id="item_5">5</p>
<p id="item_6">6</p>
<p id="item_7">7</p>
<p id="item_8">8</p>
<p id="item_9">9</p>
<p id="item_10">10</p>