Underscore.js詳解第一篇: Collections

underscore
有用過Backbone.js的人都知道,在載入Backbone.js之前要先載入Underscore.js,也就是Backbone.js是基於Underscore.js的Jquery plugin,用過Underscore發現這是一個非常方便好用的plugin,各個method詳解如下:

本篇為Collections篇:

_.each(list, iterator , [context])   Alias:forEach
說明 : 類似foreach,可以繞遍一個object的所有元素。
ex.
data = { one:1, two:2, three:3 }
_.each(data , function(d){
console.log(d);
})
// 1 2 3

_.map(list, iterator , [context])    Alias:collect
說名:類似_.each,會將一個object的key跟value傳入function裡,並回傳一個陣列。
ex.
data = { one:1, two:2, three:3 }
var map = _.map(data , function(value , key){
return value*value;
})
console.log(map);
// [1 , 4 , 9]

_.reduce(list , iterator , memo , [context])     Aliases: inject , foldl
說明:類似_.each,但多了一個memo值,每一次的return值會丟回function裡,並且可以指定memo的initial value
ex.
data = { one:1, two:2, three:3 }
var reduce = _.reduce(data , function(memo , num){
console.log(memo+num);
return memo+num;
} , 0);
// 1
// 3
// 6

_.reduceRight(list , iterator , memo , [context])     Alias:foldr
說明:同_.reduce,只是更改為反向讀取object
ex.
data = { one:1, two:2, three:3 }
var reduce = _.reduce(data , function(memo , num){
console.log(memo+num)
return memo+num;
} , 0);
// 3
// 5
// 6

_.find(list , iterator , [context])     Alias: detect
說明:回傳一個陣列第一個符合條件的元素值,return 值為true則回傳,false則過濾。
ex.
var even = _.find([1,2,3,4,5,6] , function (value) { return value%2 ==0 ; });
console.log(even);
// 2

_.filter( list , iterator , [context])     Alias:select
說明:同_.find,但回傳所有符合條件的陣列元素值。
var evens = _.find([1,2,3,4,5,6] , function (value) { return value%2 ==0 ; });
console.log(evens);
// [2, 4, 6]

_.where( list , iterator , properties)
說明:若你有一個包含多個Object的Array,並且想過濾出符合條件的Object,則可以使用這個method。
ex.
data1 = { name:’joe’, ‘age’:20, weight:60 };
data2 = { name:’joe’, ‘age’:20, weight:75 };
var person = _.where([data1 , data2] , {name:’joe’ , weight:60});
console.log(person);
// [{ name:’joe’, ‘age’:20, weight:60 }]

_.findWhere( list , iterator , properties)
說明:同_.where,但只回傳遞一個符合的object

_.reject(list , iterator , [context])
說明:_.filter的反向用法,return true則為過濾,false則回傳。
ex.
var odds = _.find([1,2,3,4,5,6] , function (value) { return value%2 ==0 ; });
console.log(odds);
// [1, 3, 5]

_.every(list , iterator , [context])     Alias: all
說明:若iterator皆return true,則回傳true,否則回傳flase
ex1.
var response = _.every([1 , ‘yes’ , null ,true] , _.identity)
console.log(response);
//false   (null != true)
ex2.
var response =_.every([ ‘a’, ‘yes’ , ‘b’ , 1], function(d){
return _.isString(d);
});
console.log(response);
//false (1 is not string)

_.some(list , iterator , [context])     Alias: any
說明:類似_.every,但只要Array裡的元素值有任一個能讓iterator return  true,則回傳true。
ex1.
var response =_.every([ ‘a’, ‘yes’ , ‘b’ , 1], function(d){
return _.isString(d);
});
console.log(response);
//true (‘a’ is  string)

_.contains( list , value)     Alias:include
說明:若Array裡有任一元素值為value,回傳true。
ex.
var response = _.contains([1,2,3] ,3);
console.log(response);
//true

_.pluck(list , propertyName)   
說明:若你有一個多個Object的Array,可以指定被回傳的屬性名稱,並回傳Array,若該object並無該屬性名稱,則回傳undefinded
ex.
var people = [{name:’joe’ } , {name:’mary’ , age:22} , {name:’peter’ , age : 33}]
var names = _.pluck(people , ‘name’);
var ages = _.pluck(people , ‘age’);
console.log(names);
console.log(ages);
// [‘joe’ , ‘mary’ , peter]
// [undefined , 22 , 33]

_.max(list , [iterator], [context])
說明:回傳最大值,iterator則是決定用什麼來比較。
ex.
var stooges = [{name: ‘moe’ , age:40} , {name: ‘larry’ , age:50} , {name: ‘joe’ , age:60}];
var response1 = _.max(stooges, function(stooges){ return stooges.age; });
var response2 = _.max(stooges, function(stooges){ return stooges.name.length;});
console.log(response1);
console.log(response2);
// {name:’joe’ , age:60}
// {name: ‘larry’, age:50}

_.min(list , [iterator] , [context])
說明:功能同_.max,但為選取最小值。
var numbers = [10 ,5 , 100 ,2 ,1000]
console.log(_.min(numbers));
// 2

_.sortBy(list , iterator , [context])
說明:由小至大的排序功能,排序規則則依iterator而定。
ex.
var response1 = _.sortBy( [1,2,3,4,5,6] , function(num){return num;});
var response2 = _.sortBy( [1,2,3,4,5,6] , function(num){return 100-num;});
console.log(response1);
console.log(response2);
//[1,2,3,4,5,6]
//[6,5,4,3,2,1]

_.groupBy(list , iterator , [context])
說明:將一個Array分群,並傳回分群後包含多個Array的Object
var response1 = _.groupBy([1.3 , 2.1 , 2.4] , function(num){ return Math.floor(num);});
console.log(response1);
//{1:[1.3] , 2:[2.1, 2.4]}
var response2 = _.groupBy([‘one’ , ‘two’ , ”three] , ‘length’);
console.log(response2);
// {3 : [‘one’ , ‘two’] , 5:[‘three’]}

_.countBy(list , iterator , [context])
說明:類似_.groupBy,只是_.groupBy是以值做分類,而_.countBy是以計數做分類。
ex.
var response = _.countBy([1,2,3,4,5] , function(num){ return  num === 0 ? ‘even’: ‘odd’ ; });
console.log(response);
//{‘odd’:3 , ‘even’ : 2}

shuffle( list)
說明:傳回一個隨機陣列值。

_toArray(list)
說明:將物件轉為陣列。
ex.
var response = (function(){ return _.toArray(arguments).slice(1) ; })(1,2,3,4);
console.log(response);
//[2, 3 ,4]

_.size(list)
說明:傳回物件大小。
ex.
var response = _.size({‘one’:1 , ‘two’: 2, ‘three’: 3});
console.log(response);
//3

以上為Underscore.js Collections的用法,歡迎參考。

發表迴響