Underscore一个JavaScript实用库,提供了一整套函数式编程的实用功能,但是没有扩展任何JavaScript内置对象。它弥补了部分jQuery没有实现的功能,同时又是Backbone.js必不可少的部分。

  中文API:http://www.css88.com/doc/underscore/

  英文API: http://underscorejs.org/

  GitHub仓库: https://github.com/jashkenas/underscore

  Underscore没有对原生的javascript进行扩展,而是调用 _() 方法进行封装。封装后javascript对象就成了一个Underscore对象,可以使用Underscore定义的各种方法。

  集合函数 (数组 或对象)  Collection Functions (Arrays or Objects)

    each:  _.each(list, iteratee, [context])  如果传递了context参数,则把iteratee绑定到context对象上  每次调用iteratee都会传递三个参数:(element/value, index/key, list)

    map: _.map(list, iteratee, [context])  通过转换函数(iteratee迭代器)映射列表中的每个值生成新的数组   每次调用iteratee都会传递三个参数:(element/value, index/key, list)

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

    filter: _.filter(list, predicate, [context]) 遍历list中的每个值,返回包含所有通过predicate检测的值的新数组。

    max min: _.max(list, [iteratee], [context]) _.min(list, [iteratee], [context])  返回list中的最大值 最小值。如果传递iteratee参数,iteratee将作为list中每个值的排序依据。如果list为空,将返回-Infinity。

    sortBy:   _.sortBy(list, iteratee, [context])  返回一个排序后的list拷贝副本。如果传递iteratee参数,iteratee将作为list中每个值的排序依据。迭代器也可以是字符串的属性的名称进行排序的(比如 length)。

    groupBy:  _.groupBy(list, iteratee, [context]) 把一个集合分组为多个集合,通过 iterator 返回的结果进行分组. 如果 iterator 是一个字符串而不是函数, 那么将使用iterator 作为各元素的属性名来对比进行分组。 

  1. //each
  2. var arr = [1,2,3]
  3. _.each(arr,function(n){
  4. console.log( n )
  5. })
  6. var obj = {one: 1, two: 2, three: 3}
  7. _.each(obj,function(i){
  8. console.log( 'v'+ i )
  9. })
  10.  
  11. //map
  12. var arr = [1,2,3]
  13. var newArr = _.map(arr,function(n){
  14. return n + 5
  15. })
  16. console.log( newArr ) //[6,7,8]
  17. var obj = {one: 1, two: 2, three: 3}
  18. var newObj = _.map(obj,function(i){
  19. return 'v'+ i
  20. })
  21. console.log( newObj ) //["v1", "v2", "v3"]
  22.  
  23. //find
  24. var arr = [1, 2, 3, 4, 5, 6]
  25. var even = _.find(arr, function(num){
  26. return num % 2 == 0
  27. })
  28. console.log( even ) //2
  29.  
  30. //filter
  31. var arr = [1, 2, 3, 4, 5, 6]
  32. var evens = _.filter(arr, function(num){
  33. return num % 2 == 0
  34. })
  35. console.log( evens ) //[2, 4, 6]
  36.  
  37. //max min
  38. var arr = [1, 2, 3];
  39. var _arr = _(arr);
  40. console.log( _arr.max() +'_'+ _arr.min() ) // 3_1
  41. var person = [
  42. {name: 'a', age: 10},
  43. {name: 'b', age: 20},
  44. {name: 'c', age: 30}
  45. ]
  46. var maxAgeName = _.max(person,function(n){
  47. return n.age
  48. })
  49. console.log( maxAgeName.name +'_'+ maxAgeName.age ) //c_30
  50. var minAgeName = _.min(person,function(n){
  51. return n.age
  52. })
  53. console.log( minAgeName.name +'_'+ minAgeName.age ) //a_10
  54.  
  55. //sortBy
  56. var arr = [1, 2, 3, 4, 5, 6];
  57. var _arr = _.sortBy(arr,function(num){
  58. return Math.sin(num)
  59. })
  60. console.log(_arr) // [5, 4, 6, 3, 1, 2]
  61.  
  62. var person = [
  63. {name: 'a', age: 80},
  64. {name: 'b', age: 20},
  65. {name: 'c', age: 40}
  66. ]
  67. var personB = _.sortBy(person,function(n){
  68. return n.age
  69. })
  70. console.log(personB) //[{name: 'b', age: 20}, {name: 'c', age: 40}, {name: 'a', age: 80}]
  71.  
  72. //groupBy
  73. var arr = [1, 2, 3, 4, 5, 6];
  74. var _arr = _.groupBy(arr,function(num){
  75. return num > 3
  76. })
  77. console.log(_arr) // object {false: [1,2,3], true: [4,5,6]}
  78.  
  79. var person = [
  80. {name: 'a', age: 80},
  81. {name: 'b', age: 20},
  82. {name: 'c', age: 40}
  83. ]
  84. var personB = _.groupBy(person,function(n){
  85. return n.age > 40
  86. })
  87. console.log(personB) //Object { false: [{name: 'b', age: 20}, {name: 'c', age: 40}], true: [{name: 'a', age: 80}] }

  数组函数(Array Functions)

    first: _.first(array, [n])  返回array(数组)的第一个元素。传递 n参数将返回数组中从第一个元素开始的n个元素, 返回数组中前 n 个元素。

    last: _.last(array, [n])  返回array(数组)的最后一个元素。传递 n参数将返回数组中从最后一个元素开始的n个元素, 返回数组里的后面的n个元素。

    indexOf: _.indexOf(array, value, [isSorted]) 返回value在该 array 中的索引值,如果value不存在 array中就返回-1。

     lastIndexOf: _.lastIndexOf(array, value, [fromIndex]) 返回value在该 array 中的从最后开始的索引值,如果value不存在 array中就返回-1

    without: _.without(array, *values) 返回一个删除所有values值后的 array副本

     union: _.union(*arrays)  返回传入的 arrays(数组)并集:按顺序返回,返回数组的元素是唯一的,可以传入一个或多个 arrays(数组)

  1. //first
  2. var person = [
  3. {name: 'a', age: 80},
  4. {name: 'b', age: 20},
  5. {name: 'c', age: 40}
  6. ]
  7. var personA = _.first(person)
  8. var personB = _.first(person,[2])
  9. console.log(personA) // {name: 'a', age: 80}
  10. console.log(personB) // [ {name: 'a', age: 80},{name: 'b', age: 20}]
  11.  
  12. //last
  13. var person = [
  14. {name: 'a', age: 80},
  15. {name: 'b', age: 20},
  16. {name: 'c', age: 40}
  17. ]
  18. var personA = _.last(person)
  19. var personB = _.last(person,[2])
  20. console.log(personA) // {name: 'c', age: 40}
  21. console.log(personB) // [{name: 'b', age: 20}, {name: 'c', age: 40}]  
  22.  
  23. //indexOf
  24. var arr = [1,2,3,4,5]
  25. var find = _.indexOf(arr,2)
  26. console.log(find) //1
  27.  
  28. //lastIndexOf
  29. var arr = [1,2,3,4,5,3,2,1,3,6]
  30. var find = _.lastIndexOf(arr,3,7)
  31. console.log(find) //5 
  32.  
  33. //without
  34. var arr = [1,2,3,4,5,3,2,1,3,6]
  35. var newArr = _.without(arr,1,2,3)
  36. console.log(newArr) //[4, 5, 6]
  37.  
  38. //union
  39. var arr1 = [1,2,3], arr2 = [2,3,4], arr3 = [3,4,5]
  40. var newArr = _.union(arr1,arr2,arr3)
  41. console.log(newArr) //[1, 2, 3, 4, 5]

  与函数有关的函数(Function (uh, ahem) Functions)

    bindAll: _.bindAll(object, *methodNames)  把methodNames参数指定的一些方法绑定到object上,这些方法就会在对象的上下文环境中执行。主要是把这些方法与某个页面元素相绑定 ,否则函数被调用时this一点用也没有。

    delay: _.delay(function, wait, *arguments) 类似setTimeout,等待wait毫秒后调用function。如果传递可选的参数arguments,当函数function执行时,arguments 会作为参数传入。

     once: _.once(function) 创建一个只能调用一次的函数。重复调用改进的方法也没有效果,只会返回第一次执行时的结果。 作为初始化函数使用时非常有用, 不用再设一个boolean值来检查是否已经初始化完成。

     wrap: _.wrap(function, wrapper) 将第一个函数 function 封装到函数 wrapper 里面, 并把函数 function 作为第一个参数传给 wrapper. 这样可以让wrapper 在 function 运行之前和之后 执行代码, 调整参数然后附有条件地执行。

     compose: _.compose(*functions) 返回函数集 functions 组合后的复合函数, 也就是一个函数执行完之后把返回的结果再作为参数赋给下一个函数来执行. 以此类推. 在数学里, 把函数 f()g(), 和 h() 组合起来可以得到复合函数 f(g(h()))

  1. //bandAll
  2. var person = {
  3. id: '#div',
  4. text: 'hello world',
  5. onClick: function(){
  6. $(this.id).html(this.text)
  7. }
  8. }
  9. _.bindAll(person, 'onClick')
  10.  
  11. //delay
  12. var fun = function(v){
  13. console.log( v )
  14. }
  15. _.delay(fun,1000,'hello world')
  16.  
  17. //once
  18. var a = 1, b = 'A', fun = function(){
  19. a++
  20. b += 'B'
  21. }
  22. /*
  23. fun() //1 a => 2, b => 'AB'
  24. console.log( a )
  25. console.log( b )
  26. fun() //2 a => 3, b => 'ABB'
  27. console.log( a )
  28. console.log( b )
  29. */
  30. var init = _.once(fun)
  31. init() //1 a => 2, b => 'AB'
  32. console.log( a )
  33. console.log( b )
  34. init() //2 a => 2, b => 'AB'
  35. console.log( a )
  36. console.log( b )
  37.  
  38. //wrap
  39. var hello = function(name){
  40. return "hello: " + name
  41. }
  42. hello = _.wrap(hello, function(func){
  43. return "before, " + func("moe") + ", after"
  44. })
  45. console.log( hello() )
  46.  
  47. //compose
  48. var A = function(v){ return v * v }
  49. var B = function(v){ return v * v }
  50. var C = function(v){ return v * v }
  51. var D = _.compose(A,B,C)
  52. var E = D(2)
  53. var F = A(B(C(2)))
  54. console.log( E ) // 256
  55. console.log( F ) // 256

  对象函数(Object Functions)

    keys: _.keys(object) 检索并返回object拥有的所有可枚举属性的名称 返回一个数组

     values: _.values(object) 返回object对象所有的属性值 返回一个数组

    pick: _.pick(object, *keys) 返回一个object中列入挑选key属性的对象

     omit: _.omit(object, *keys) 返回一个object中没有列入排除key属性的对象

    defaults: _.defaults(object, *defaults) 用defaults设置object 中的默认属性值, 并且返回这个object。一旦这个属性被填充,再使用defaults方法将不会有任何效果。

    has: _.has(object, key) 对象是否包含给定的键吗? 等同于object.hasOwnProperty(key),但是使用hasOwnProperty 函数的一个安全引用,以防意外覆盖

  1. //keys
  2. var person = {
  3. name: 'lbs',
  4. age: 10
  5. }
  6. var personKeys = _.keys(person)
  7. console.log( personKeys ) // ["name", "age"]
  8.  
  9. //values
  10. var person = {
  11. name: 'lbs',
  12. age: 10
  13. }
  14. var personValues = _.values(person)
  15. console.log( personValues ) // ["lbs", 10]
  16.  
  17. //pick
  18. var data = {
  19. a: 1,
  20. b: 2,
  21. c: 3,
  22. d: 4
  23. }
  24. var newData = _.pick(data,'a','c')
  25. console.log( newData ) //Object {a: 1, c: 3}
  26.  
  27. //omit
  28. var data = {
  29. a: 1,
  30. b: 2,
  31. c: 3,
  32. d: 4
  33. }
  34. var newData = _.omit(data,'a','c')
  35. console.log( newData ) //Object {b: 2, d: 4}
  36.  
  37. //defaults
  38. var person = {
  39. name: 'lbs',
  40. age: 10
  41. }
  42. _.defaults(person,{name:'ccx',sex:'girl'}) //name在此无效
  43. console.log( person ) //Object {name: "lbs", age: 10, sex: "girl"}
  44.  
  45. //has
  46. var data = {
  47. a: 1,
  48. b: 2,
  49. c: 3,
  50. d: 4
  51. }
  52. console.log( _.has(data, 'b') )//true

  实用功能(Utility Functions)

    random: _.random(min, max) 返回一个min 和 max之间的随机整数(包括minmax)。如果你只传递一个参数,那么将返回0和这个参数之间的整数。

    escape: _.escape(string) 编码字符串,替换 &<>"', / 字符。

    unescape: _.unescape(string)  解码字符串,替换&&lt;&gt;&quot;`/字符

    template: _.template(templateString, [settings]) 将 JavaScript 模板编译为可以用于页面呈现的函数, 对于通过JSON数据源生成复杂的HTML并呈现出来的操作非常有用。 模板函数可以使用 <%= … %>插入变量, 也可以用<% … %>执行任意的 JavaScript 代码。

  1. //random
  2. var num = _.random(10) // _.random(0,10)
  3. //var num = _.random(-10,10) //包括-10 和 10 这两个数字
  4. console.log(num)
  5.  
  6. //escape
  7. var str = _.escape('A, B & C')
  8. console.log( str ) //A, B & C
  9.  
  10. //unescape
  11. var str = _.unescape('A, B & C')
  12. console.log( str ) // A, B & C
  13.  
  14. //template
  15. var compiled = _.template("hello: <%= name %>");
  16. console.log( compiled({name: 'lbs'}) ) // hello: lbs
  17. //...

  链式语法(Chaining)

    value: 获取封装对象中原生javascript对象的数据 获取封装对象的最终值。

    chain: _.chain(obj) 返回一个封装的对象. 在封装的对象上调用方法会返回封装的对象本身, 直道 value 方法调用为止(调用后可以采取链式写法逐层获取返回值)。

  1. //value
  2. var data = {
  3. name: 'lbs',
  4. age: 10
  5. }
  6. var _data = _(data);
  7. console.log( _data.value().name ) //lbs
  8.  
  9. //chain
  10. var person = [
  11. {name: 'a', age: 80},
  12. {name: 'b', age: 20},
  13. {name: 'c', age: 40}
  14. ]
  15. var youngest = _.chain(person).sortBy(function(n){
  16. return n.age
  17. }).map(function(n){
  18. return n.name +' is '+ n.age
  19. }).first().value();
  20. console.log( youngest ) //b is 20

// ]]>

认识Underscore的更多相关文章

  1. Underscore.js

    概述 Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程.MVC框架Backbone.js就将这个库 ...

  2. 新手入门Underscore.js 中文(template)

    Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了javaScript的编程.MVC框架Backbone.js就将这个库作为自 ...

  3. Underscore 整体架构浅析

    前言 终于,楼主的「Underscore 源码解读系列」underscore-analysis 即将进入尾声,关注下 timeline 会发现楼主最近加快了解读速度.十一月,多事之秋,最近好多事情搞的 ...

  4. underscore 源码解读之 bind 方法的实现

    自从进入七月以来,我的 underscore 源码解读系列 更新缓慢,再这样下去,今年更完的目标似乎要落空,赶紧写一篇压压惊. 前文 跟大家简单介绍了下 ES5 中的 bind 方法以及使用场景(没读 ...

  5. HiShop2.x版本中的上传插件分析,得出所用的模板语言为Underscore.js 1.6.0且自己已修改

    效果: 上传组件非常的酷,但是分析其使用JS写法使用了模板语言的,代码如下: <script type="text/j-template" id="tpl_popb ...

  6. UnderScore源代码阅读1

    读一下underscore源代码,用于自己学习,个人理解,如果有不对的地方希望指正,谢谢 我觉着阅读的顺序按照从整体到局部,从架构到细节较好. 1.整体架构 (function() {}.call(t ...

  7. Underscore.js使用

    Underscore 是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象. 他解决了这个问题:"如果我面对一个空白的 ...

  8. 一次发现underscore源码bug的经历以及对学术界『拿来主义』的思考

    事情是如何发生的 最近干了件事情,发现了 underscore 源码的一个 bug.这件事本身并没有什么可说的,但是过程值得我们深思,记录如下,各位看官仁者见仁智者见智. 平时有浏览园区首页文章的习惯 ...

  9. 浅谈HTML5单页面架构(三)—— 回归本真:自定义路由 + requirejs + zepto + underscore

    本文转载自:http://www.cnblogs.com/kenkofox/p/4650310.html 不过,这一篇,我想进一步探讨一下这两个框架的优缺点,另外,再进一步,抛开这两个框架,回到本真, ...

  10. 浅谈HTML5单页面架构(二)——backbone + requirejs + zepto + underscore

    本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...

随机推荐

  1. 怎样处理iOS 5与iOS 6的 low-memory

    移动设备终端的内存极为有限,应用程序必须做好low-memory处理工作,才能避免程序因内存使用过大而崩溃. low-memory 处理思路 通常一个应用程序会包含多个view controllers ...

  2. Fluentd: Open Source Log Management

    Fluentd: Open Source Log Management "Fluentd" is an open-source tool to collect events and ...

  3. cocos2dx游戏开发学习笔记3-lua面向对象分析

    在lua中,能够通过元表来实现类.对象.继承等.与元表相关的方法有setmetatable().__index.getmetatable().__newindex. 详细什么是元表在这里就不细说了,网 ...

  4. postgresql优化数据的批量插入

    原文:http://www.cnblogs.com/mchina/archive/2012/08/11/2537393.html 有以下几种方法用于优化数据的批量插入. 1. 关闭自动提交:      ...

  5. Andorid Clip 实现自定义的进度条效果实例

    Android该系统提供了一个水平进度条为我们展现了运行使用进展情况,水平进度条显示用于运行进度Clip Drawable技术 下面我们通过一个具体的例子来说明Clip Drawable使用. 还有我 ...

  6. Conexant声卡实现内录功能(win7)

    Conexant声卡本身没有立体声混音设备可选,所以我们采用virtual audio device,实现内录功能. [1]下载virtual audio device.下载地址:http://dow ...

  7. ios多线程操作(五)—— GCD串行队列与并发队列

          GCD的队列能够分为2大类型,分别为串行队列和并发队列      串行队列(Serial Dispatch Queue):      一次仅仅调度一个任务,队列中的任务一个接着一个地运行( ...

  8. Python使用MySQLdb操作MySQL

    import MySQLdb,sys try: conn=MySQLdb.connect(host=,user=',db='db1') except Exception,e: print e sys. ...

  9. java读取XML文件的四种方式

    java读取XML文件的四种方式 Xml代码 <?xml version="1.0" encoding="GB2312"?> <RESULT& ...

  10. Max Sum (hdu 1003 简单DP水过)

    Max Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...