Underscore使い方メモ

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<ul id="list"></ul>

CSS

.samples {
    margin: 10px;
    padding: 0px;
    border: 1px dotted #aaf;
}

.samples li {
    display: inline-block;
    margin-left: 10px;
}

.title {
    font-weight: bold;
}

JavaScript

var array = [1, 2, 3];

var obj = {hoge: 'HOGE', fuga: 'FUGA', piyo: 'PIYO'};

var objArray = [
    {name: 'hoge', age: 10},
    {name: 'fuga', age: 20},
    {name: 'piyo', age: 30}
];

var samples = {
    Collections: {
        each: function () {
            /*
             * 指定した配列・オブジェクトの各要素を走査する。
             */
            _.each(array, function (value, index, array) {
                console.log('array[' + index + '] = ' + value);
            });
            
            _.each(obj, function(value, key, obj) {
                console.log('obj[' + key + '] = ' + value);
            });
        },
        
        map: function() {
            /*
             * 指定した配列・オブジェクトの各要素を走査して、
             * iterator が返した値を要素として持つ新しい配列を返す。
             */
            var result = _.map(array, function(value, index, array) {
                return value * 2;
            });
            
            console.log(result);
            
            result = _.map(obj, function(value, key, obj) {
                return '<' + value + '>';
            });
            
            console.log(result);
        },
        
        reduce: function() {
            /*
             * 指定した配列・オブジェクトの各要素を走査して、
             * iterator が最後に返した値を返す。
             * iterator の第一引数には、最初 reduce メソッドの第三引数で指定した値が渡され、
             * ２回目以降は、直前に iterator が返した値が渡される。
             */
            var result = _.reduce(array, function(memo, value) {
                console.log('memo = ' + memo + ', value = ' + value);
                return memo + value;
            }, 100);
            
            console.log(result);
            
            result = _.reduce(obj, function(memo, value) {
                console.log('memo = ' + memo + ', value = ' + value);
                return memo + ', '+ value;
            }, 'obj');
            
            console.log(result);
        },
        
        reduceRight: function() {
            /*
             * reduce メソッドの逆順序で配列・オブジェクトが走査される。
             */
...