[关闭]
@52fhy 2015-09-07T09:47:06.000000Z 字数 4523 阅读 412

Underscore.js使用

JavaScript

Underscore 是一个 JavaScript 工具库，它提供了一整套函数式编程的实用功能，但是没有扩展任何 JavaScript 内置对象。 他解决了这个问题：“如果我面对一个空白的 HTML 页面，并希望立即开始工作，我需要什么？” 他弥补了 jQuery 没有实现的功能，同时又是 Backbone 必不可少的部分。

Underscore 提供了100多个函数，包括常用的：map、filter、invoke — 当然还有更多专业的辅助函数，如：函数绑定、JavaScript 模板功能、创建快速索引、强类型相等测试等等。

示例：

  1. <!DOCTYPE html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <title>title</title>
  5.     <script src="./underscore/underscore.js" charset="utf-8"></script>
  6. </head>
  8. <body>
  9.   <script type="text/javascript">
  10.     var obj = {one: 1, two: 2, three: 3};
  11.     var key = _.keys(obj);
  12.     var val = _.values(obj);
  13.     console.log(key);
  14.     console.log(val);
  16.   </script>
  17. </body>

建议使用Console调试。

_.keys(object)
获取object对象所有的属性名称。取键名。

  1. _.keys({one: 1, two: 2, three: 3});
  2. => ["one", "two", "three"]

_.values(object)
返回object对象所有的属性值。取键值。

  1. _.values({one: 1, two: 2, three: 3});
  2. => [1, 2, 3]

_.pairs(object)
把一个对象转变为一个[key, value]形式的数组。

  1. _.pairs({one: 1, two: 2, three: 3});
  2. => [["one", 1], ["two", 2], ["three", 3]]

_.invert(object)
返回一个object副本，使其键（keys）和值（values）对换。对于这个操作，必须确保object里所有的值都是唯一的且可以序列号成字符串.

  1. _.invert({Moe: "Moses", Larry: "Louis", Curly: "Jerome"});
  2. => {Moses: "Moe", Louis: "Larry", Jerome: "Curly"};

_.functions(object) 别名： methods
返回一个对象里所有的方法名, 而且是已经排序的 — 也就是说, 对象里每个方法(属性值是一个函数)的名称.

  1. _.functions(_);
  2. => ["all", "any", "bind", "bindAll", "clone", "compact", "compose"

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

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

_.pick(object, *keys)
返回一个object副本，只过滤出keys(有效的键组成的数组)参数指定的属性值。或者接受一个判断函数，指定挑选哪个key。

  1. _.pick({name: 'moe', age: 50, userid: 'moe1'}, 'name', 'age');
  2. => {name: 'moe', age: 50}
  3. _.pick({name: 'moe', age: 50, userid: 'moe1'}, function(value, key, object) {
  4.   return _.isNumber(value);
  5. });
  6. => {age: 50}

_.omit(object, *keys)
与pick作用相反。返回一个object副本，只保留非keys(有效的键组成的数组)参数指定的属性值。 或者接受一个判断函数，指定忽略哪个key。

  1. _.omit({name: 'moe', age: 50, userid: 'moe1'}, 'userid');
  2. => {name: 'moe', age: 50}
  3. _.omit({name: 'moe', age: 50, userid: 'moe1'}, function(value, key, object) {
  4.   return _.isNumber(value);
  5. });
  6. => {name: 'moe', userid: 'moe1'}

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

示例1.遍历数组：

  1. var list = [1,2,3,4];   
  2. list.forEach(function(v, k , obj){
  3.     document.write(k + ',' + v + ',[' + obj.toString() + ']<br>');
  4. });

结果：

  1. 0,1,[1,2,3,4]
  2. 1,2,[1,2,3,4]
  3. 2,3,[1,2,3,4]
  4. 3,4,[1,2,3,4]

示例2：遍历字符串

  1. var list = 'hello world';
  2. _.each(list, function(value, index, obj) {
  3.     document.write(value + ',' + index + ',[' + obj.toString() + ']<br>');
  4. });
  5. document.write(list.toString());

输出：

  1. h,0,[hello world]
  2. e,1,[hello world]
  3. l,2,[hello world]
  4. l,3,[hello world]
  5. o,4,[hello world]
  6. ,5,[hello world]
  7. w,6,[hello world]
  8. o,7,[hello world]
  9. r,8,[hello world]
  10. l,9,[hello world]
  11. d,10,[hello world]
  12. hello world

_.find(list, predicate, [context]) 别名： detect
在list中逐项查找，返回第一个通过predicate迭代函数真值检测的元素值，如果没有值传递给测试迭代器将返回undefined。
注意：如果找到匹配的元素，函数将立即返回，不会遍历整个list。

  1. var even = _.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
  2. => 2

.filter(list, predicate, [context]) 别名： select
遍历list中的每个值，返回包含所有通过predicate真值检测的元素值。（注：如果存在原生filter方法，则用原生的filter方法。）
与.find类似，但会遍历所有匹配元素。

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

map_.map(list, iteratee, [context]) 别名： collect
通过变换函数（iteratee迭代器）把list中的每个值映射到一个新的数组中（注：产生一个新的数组）。如果存在原生的map方法，就用原生map方法来代替。如果list是个JavaScript对象，iteratee的参数是(value, key, list)。

  1. _.map([1, 2, 3], function(num){ return num * 3; });
  2. => [3, 6, 9]
  3. _.map({one: 1, two: 2, three: 3}, function(num, key){ return num * 3; });
  4. => [3, 6, 9]

_.reduce(list, iteratee, [memo], [context]) Aliases: inject, foldl
别名为 inject 和 foldl, reduce方法把list中元素归结为一个单独的数值。Memo是reduce函数的初始值，reduce的每一步都需要由iteratee返回。这个迭代传递4个参数：memo, value 和 迭代的index（或者 key）和最后一个引用的整个 list。

如果没有memo传递给reduce的初始调用，iteratee不会被列表中的第一个元素调用。第一个元素将取代 传递给列表中下一个元素调用iteratee的memo参数，

  1. var sum = _.reduce([1, 2, 3], function(memo, num){ return memo + num; }, 100);
  2. => 106

_.some(list, [iterator], [context]) 别名: any
如果任何 list 里的任何一个元素通过了 iterator 的测试, 将返回 true. 一旦找到了符合条件的元素, 就直接中断对list的遍历. 如果存在, 将会使用原生的 some 方法.

  1. _.some([2, 5, 8, 1, 4],function(v,k,obj){return v>5;})
  2. => true

_.all(list, [iterator], [context]) 别名: all
与some类似。如果所有在 list 里的元素通过了 iterator 的测试, 返回 true. 如果存在则使用原生的 every 方法.

  1. _.all([2, 5, 8, 1, 4],function(v,k,obj){return v>5;})
  2. => false
注*目前现代浏览器已经支持each, filter, map, reduce方法，但underscore库可以实现对旧版IE的兼容。下面是使用ES5原生方法写的例子：

  1.     [3,4,5,3,3].forEach(function(obj){
  2.     console.log(obj);
  3. });
  5. [1,2,3,4,5].filter(function(obj){
  6.     return obj < 3
  7. });
  9. [9,8,5,2,3,4,5].map(function(obj){
  10.     return obj + 2;
  11. });
  13. [1,2,3,4,5].reduce(function(pre, cur, idx, arr) {
  14.     console.log(idx);    //4 个循环: 2-5
  15.     return pre + cur;
  16. });   //15
  18. //sort方法同样很有用
  19. [9,8,5,2,3,4,5].sort(function(obj1, obj2){
  20.     return obj1 - obj2;
  21. });

underscore API文档
http://www.bootcss.com/p/underscore/

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注