Fork me on GitHub

Any application that can be written in JavaScript, will eventually be written in JavaScript.

UnderscoreJS 常用方法

之前发了一篇UnderscoreJS 使用介绍，介绍的比较具体，发现平时实际开发中用不到很多函数，我总结了一些我平时经常使用的十几来个方法，感觉这个包还是非常实用的。要看之前的那篇介绍可以看下这个链接.

1.each

1
_.each(list, iteratee, [context])

遍历list中的所有元素，按顺序用遍历输出每个元素。如果传递了context参数，则把iteratee绑定到context对象上。每次调用iteratee都会传递三个参数：(element, index, list)。如果list是个JavaScript对象，iteratee的参数是 (value, key, list))。返回list以方便链式调用。（如果存在原生的forEach方法，Underscore就使用它代替。）

each: 对集合循环操作

1
2
3
4
5
6
7
_.each([1, 2, 3], function (ele, idx) {
  console.log(idx + ":" + ele);
});
=>
  0:1
  1:2
  2:3

注意：集合函数能在数组，对象，和类数组对象，比如arguments, NodeList和类似的数据类型上正常工作。 但是它通过鸭子类型工作，所以要避免传递一个不固定length属性的对象（愚人码头注：对象或数组的长度（length）属性要固定的）。每个循环不能被破坏 - 打破， 使用_.find代替，这也是很好的注意。

2.map

1
_.map(list, iteratee, [context])

通过转换函数(iteratee迭代器)映射 list 中的每个值产生新数。iteratee传递三个参数：value，然后是迭代 index(或 key 愚人码头注：如果list是个JavaScript对象是，这个参数就是key)，最后一个是引用指向整个list。

map: 对集合以map方式遍历，产生一个新数组

1
2
3
4
5
6
console.log(
  _.map([1, 2, 3], function(num){
    return num * 3;
  })
);
=> [3, 6, 9]

3.extend

1
_.extend(destination, *sources)

复制source对象中的所有属性覆盖到destination对象上，且返回 destination 对象。复制是按顺序的, 所以后面的对象属性会把前面的对象属性覆盖掉(如果有重复).

1
2
_.extend({name: 'moe'}, {age: 50});
=> {name: 'moe', age: 50}

4.filter

filter: 过滤集合中符合条件的元素。注：find:只返回第一个

1
2
3
4
5
6
console.log(
  _.filter([1, 2, 3, 4, 5, 6], function(num){
    return num % 2 == 0;
  })
);
=> [ 2, 4, 6 ]

5.reject

reject: 过滤集合中不符合条件的元素

1
2
3
4
5
6
console.log(
  _.reject([1, 2, 3, 4, 5, 6], function(num){
    return num % 2 == 0;
  })
);
=> [ 1, 3, 5 ]

6.where

where: 遍历list, 返回新的对象数组

1
2
3
4
5
6
7
8
9
var list = [
  {title:"AAA",year: 1982},
  {title:"BBB",year: 1900},
  {title:"CCC",year: 1982}
];
console.log(
  _.where(list,{year: 1982})
);
=> [ { title: 'AAA', year: 1982 }, { title: 'CCC', year: 1982 } ]

7.contains

contains:判断元素是否在list中

1
2
_.contains([1, 2, 3], 3)
=> true

8.invoke

invoke:通过函数名调用函数运行

1
2
3
4
console.log(
  _.invoke([[5, 1, 7]], 'sort')
);
=> [ [ 1, 5, 7 ] ]

9.pluck

提取集合里特定属性的值，pluck: 提取一个集合里指定的属性值，但是只能深入到后面一层，要做到深入后面两层以上使用_.map

1
2
3
4
5
6
7
8
var users = [
  {name: 'moe', age: 40},
  {name: 'larry', age: 50}
];
console.log(
  _.pluck(users, 'name')
);
=> [ 'moe', 'larry' ]

10.max, min, sortBy

max 取最大值, min 取最小值, sortBy 排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
console.log(
  _.max(users, function (stooge) {
    return stooge.age;
  })
);
=> { name: 'larry', age: 50 }

var numbers = [10, 5, 100, 2, 1000];
console.log(
  _.min(numbers)
);
=> 2

console.log(
  _.sortBy([3, 4, 2, 1 , 6], function (num) {
    return Math.max(num);
  })
);
=> [ 1, 2, 3, 4, 6 ]

var stooges = [{name: 'moe', age: 40}, {name: 'larry', age: 50}, {name: 'curly', age: 60}];
_.sortBy(stooges, 'name');

=> [{name: 'curly', age: 60}, {name: 'larry', age: 50}, {name: 'moe', age: 40}];

11.groupBy

groupBy: 把一个集合分组成多个集合

1
2
3
4
console.log(
  _.groupBy(['one', 'two', 'three'], 'length')
);
=> { '3': [ 'one', 'two' ], '5': [ 'three' ] }

12.countBy

countBy: 把一个数据分组后计数

1
2
3
4
5
6
onsole.log(
  _.countBy([1, 2, 3, 4, 5], function (num) {
    return num % 2 == 0 ? 'even' : 'odd';
  })
);
=> { odd: 3, even: 2 }

13.indexOf, lastIndexOf, sortedIndex

indexOf,lastIndexOf,sortedIndex：取索引位置

1
2
3
4
5
console.log(_.indexOf([4, 2, 3, 4, 2], 4));
console.log(_.lastIndexOf([4, 2, 3, 4, 2], 4));
console.log(_.sortedIndex([10, 20, 30, 40, 50], 35));
=> 0
3

14.uniq 去重

uniq：去重，返回array去重后的副本

1
2
_.uniq([1,2,1,3,1,4])
=> [1,2,3,4]