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 作为各元素的属性名来对比进行分组。 

//each
var arr = [1,2,3]
_.each(arr,function(n){
console.log( n )
})
var obj = {one: 1, two: 2, three: 3}
_.each(obj,function(i){
console.log( 'v'+ i )
}) //map
var arr = [1,2,3]
var newArr = _.map(arr,function(n){
return n + 5
})
console.log( newArr ) //[6,7,8]
var obj = {one: 1, two: 2, three: 3}
var newObj = _.map(obj,function(i){
return 'v'+ i
})
console.log( newObj ) //["v1", "v2", "v3"] //find
var arr = [1, 2, 3, 4, 5, 6]
var even = _.find(arr, function(num){
return num % 2 == 0
})
console.log( even ) //2 //filter
var arr = [1, 2, 3, 4, 5, 6]
var evens = _.filter(arr, function(num){
return num % 2 == 0
})
console.log( evens ) //[2, 4, 6] //max min
var arr = [1, 2, 3];
var _arr = _(arr);
console.log( _arr.max() +'_'+ _arr.min() ) // 3_1
var person = [
{name: 'a', age: 10},
{name: 'b', age: 20},
{name: 'c', age: 30}
]
var maxAgeName = _.max(person,function(n){
return n.age
})
console.log( maxAgeName.name +'_'+ maxAgeName.age ) //c_30
var minAgeName = _.min(person,function(n){
return n.age
})
console.log( minAgeName.name +'_'+ minAgeName.age ) //a_10 //sortBy
var arr = [1, 2, 3, 4, 5, 6];
var _arr = _.sortBy(arr,function(num){
return Math.sin(num)
})
console.log(_arr) // [5, 4, 6, 3, 1, 2] var person = [
{name: 'a', age: 80},
{name: 'b', age: 20},
{name: 'c', age: 40}
]
var personB = _.sortBy(person,function(n){
return n.age
})
console.log(personB) //[{name: 'b', age: 20}, {name: 'c', age: 40}, {name: 'a', age: 80}] //groupBy
var arr = [1, 2, 3, 4, 5, 6];
var _arr = _.groupBy(arr,function(num){
return num > 3
})
console.log(_arr) // object {false: [1,2,3], true: [4,5,6]} var person = [
{name: 'a', age: 80},
{name: 'b', age: 20},
{name: 'c', age: 40}
]
var personB = _.groupBy(person,function(n){
return n.age > 40
})
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(数组)

//first
var person = [
{name: 'a', age: 80},
{name: 'b', age: 20},
{name: 'c', age: 40}
]
var personA = _.first(person)
var personB = _.first(person,[2])
console.log(personA) // {name: 'a', age: 80}
console.log(personB) // [ {name: 'a', age: 80},{name: 'b', age: 20}] //last
var person = [
{name: 'a', age: 80},
{name: 'b', age: 20},
{name: 'c', age: 40}
]
var personA = _.last(person)
var personB = _.last(person,[2])
console.log(personA) // {name: 'c', age: 40}
console.log(personB) // [{name: 'b', age: 20}, {name: 'c', age: 40}]   //indexOf
var arr = [1,2,3,4,5]
var find = _.indexOf(arr,2)
console.log(find) //1 //lastIndexOf
var arr = [1,2,3,4,5,3,2,1,3,6]
var find = _.lastIndexOf(arr,3,7)
console.log(find) //5  //without
var arr = [1,2,3,4,5,3,2,1,3,6]
var newArr = _.without(arr,1,2,3)
console.log(newArr) //[4, 5, 6] //union
var arr1 = [1,2,3], arr2 = [2,3,4], arr3 = [3,4,5]
var newArr = _.union(arr1,arr2,arr3)
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()))

//bandAll
var person = {
id: '#div',
text: 'hello world',
onClick: function(){
$(this.id).html(this.text)
}
}
_.bindAll(person, 'onClick') //delay
var fun = function(v){
console.log( v )
}
_.delay(fun,1000,'hello world') //once
var a = 1, b = 'A', fun = function(){
a++
b += 'B'
}
/*
fun() //1 a => 2, b => 'AB'
console.log( a )
console.log( b )
fun() //2 a => 3, b => 'ABB'
console.log( a )
console.log( b )
*/
var init = _.once(fun)
init() //1 a => 2, b => 'AB'
console.log( a )
console.log( b )
init() //2 a => 2, b => 'AB'
console.log( a )
console.log( b ) //wrap
var hello = function(name){
return "hello: " + name
}
hello = _.wrap(hello, function(func){
return "before, " + func("moe") + ", after"
})
console.log( hello() ) //compose
var A = function(v){ return v * v }
var B = function(v){ return v * v }
var C = function(v){ return v * v }
var D = _.compose(A,B,C)
var E = D(2)
var F = A(B(C(2)))
console.log( E ) // 256
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 函数的一个安全引用,以防意外覆盖

//keys
var person = {
name: 'lbs',
age: 10
}
var personKeys = _.keys(person)
console.log( personKeys ) // ["name", "age"] //values
var person = {
name: 'lbs',
age: 10
}
var personValues = _.values(person)
console.log( personValues ) // ["lbs", 10] //pick
var data = {
a: 1,
b: 2,
c: 3,
d: 4
}
var newData = _.pick(data,'a','c')
console.log( newData ) //Object {a: 1, c: 3} //omit
var data = {
a: 1,
b: 2,
c: 3,
d: 4
}
var newData = _.omit(data,'a','c')
console.log( newData ) //Object {b: 2, d: 4} //defaults
var person = {
name: 'lbs',
age: 10
}
_.defaults(person,{name:'ccx',sex:'girl'}) //name在此无效
console.log( person ) //Object {name: "lbs", age: 10, sex: "girl"} //has
var data = {
a: 1,
b: 2,
c: 3,
d: 4
}
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 代码。

//random
var num = _.random(10) // _.random(0,10)
//var num = _.random(-10,10) //包括-10 和 10 这两个数字
console.log(num) //escape
var str = _.escape('A, B & C')
console.log( str ) //A, B & C //unescape
var str = _.unescape('A, B & C')
console.log( str ) // A, B & C //template
var compiled = _.template("hello: <%= name %>");
console.log( compiled({name: 'lbs'}) ) // hello: lbs
//...

  链式语法(Chaining)

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

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

//value
var data = {
name: 'lbs',
age: 10
}
var _data = _(data);
console.log( _data.value().name ) //lbs //chain
var person = [
{name: 'a', age: 80},
{name: 'b', age: 20},
{name: 'c', age: 40}
]
var youngest = _.chain(person).sortBy(function(n){
return n.age
}).map(function(n){
return n.name +' is '+ n.age
}).first().value();
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. 安卓开发28:自定义View类

    自定义View类 通过自定义View类,可以自定义复杂的,按照自己需求的控件. 一个简单的例子 mainActivity.java 这个里面就是最普通的代码,但是给自定义的控件加上了一个onclick ...

  2. 【MongoDB】The description of index(一)

    From this blog, we start to talk about the index in mongo Database, which is similar to the traditio ...

  3. Perl语言学习笔记 9 正则表达式处理文本

    1.更换 s/PATTERN/REPLACE/; #返回是否更换成功布尔值 能够使用捕获变量,如:s/(\w)/$1/ 匹配失败则不做不论什么处理 2.定界符 对于没有左右之分的定界符.反复三次就可以 ...

  4. Selenium执行测试脚本稳定性的一些经验分享交流

    Selenium执行测试脚本稳定性的一些经验分享交流 公司的自动化WEB测试框架IATA已上线运行了一段时间,期间发现一些脚本稳定性的问题,与大家分享一下. CASE执行游览器:ie firefox ...

  5. MVC超链接

    <1> return RedirectToAction(Index); //跳转到Index控制器 <%@ Page Language="C#" Inherits ...

  6. ERROR: Error in Log_event::read_log_event(): 'read error', data_len: 438, event_type: 2

    分析从库1062问题,解析从库binlog日志,报错如下 [root@xxxdb0402 tmp]# mysqlbinlog mysql-bin.004271 > 4.log ERROR: Er ...

  7. 【转】Acm之java速成

    这里指的java速成,只限于java语法,包括输入输出,运算处理,字符串和高精度的处理,进制之间的转换等,能解决OJ上的一些高精度题目. 1. 输入:格式为:Scanner cin = new Sca ...

  8. ORA-00600: 内部错误代码, 参数: [kqlnrc_1]

    如以下的错误: Mon Mar 31 18:45:59 2014 Errors in file /oracle/app/oracle/diag/rdbms/zscims/zscims2/trace/z ...

  9. C#之网络

    首先很不好意思,前段时间把评论的功能给关掉啦,BUT NOW 此功能以开放,欢迎小伙伴们拍砖. 1网络 在网络环境下,我们最感兴趣的两个名称空间是System.Net和System.Net.Socke ...

  10. linux网络编程学习笔记之三 -----多进程并发服务端

    首先是fork()函数.移步APUE 8.3.  比較清晰的解释能够參考http://blog.csdn.net/lingdxuyan/article/details/4993883和http://w ...