认识Underscore
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之间的随机整数(包括min和max)。如果你只传递一个参数,那么将返回0和这个参数之间的整数。
escape: _.escape(string) 编码字符串,替换 &, <, >, ", ', / 字符。
unescape: _.unescape(string) 解码字符串,替换&, <, >, ", `, /字符
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的更多相关文章
- Underscore.js
概述 Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程.MVC框架Backbone.js就将这个库 ...
- 新手入门Underscore.js 中文(template)
Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了javaScript的编程.MVC框架Backbone.js就将这个库作为自 ...
- Underscore 整体架构浅析
前言 终于,楼主的「Underscore 源码解读系列」underscore-analysis 即将进入尾声,关注下 timeline 会发现楼主最近加快了解读速度.十一月,多事之秋,最近好多事情搞的 ...
- underscore 源码解读之 bind 方法的实现
自从进入七月以来,我的 underscore 源码解读系列 更新缓慢,再这样下去,今年更完的目标似乎要落空,赶紧写一篇压压惊. 前文 跟大家简单介绍了下 ES5 中的 bind 方法以及使用场景(没读 ...
- HiShop2.x版本中的上传插件分析,得出所用的模板语言为Underscore.js 1.6.0且自己已修改
效果: 上传组件非常的酷,但是分析其使用JS写法使用了模板语言的,代码如下: <script type="text/j-template" id="tpl_popb ...
- UnderScore源代码阅读1
读一下underscore源代码,用于自己学习,个人理解,如果有不对的地方希望指正,谢谢 我觉着阅读的顺序按照从整体到局部,从架构到细节较好. 1.整体架构 (function() {}.call(t ...
- Underscore.js使用
Underscore 是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象. 他解决了这个问题:"如果我面对一个空白的 ...
- 一次发现underscore源码bug的经历以及对学术界『拿来主义』的思考
事情是如何发生的 最近干了件事情,发现了 underscore 源码的一个 bug.这件事本身并没有什么可说的,但是过程值得我们深思,记录如下,各位看官仁者见仁智者见智. 平时有浏览园区首页文章的习惯 ...
- 浅谈HTML5单页面架构(三)—— 回归本真:自定义路由 + requirejs + zepto + underscore
本文转载自:http://www.cnblogs.com/kenkofox/p/4650310.html 不过,这一篇,我想进一步探讨一下这两个框架的优缺点,另外,再进一步,抛开这两个框架,回到本真, ...
- 浅谈HTML5单页面架构(二)——backbone + requirejs + zepto + underscore
本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...
随机推荐
- Wi-Fi万能钥匙:说是破解,其实有危险(转)
Wi-Fi 万能钥匙如此危险,怎样做才能让这种可能严重侵害公众利益的 app 在中国消失? 这个“钥匙”为什么能够破解 Wi-Fi?它真的是“破解” Wi-Fi 吗?两年前我就有这个疑问了,原谅我对一 ...
- GMM高斯混合模型学习笔记(EM算法求解)
提出混合模型主要是为了能更好地近似一些较复杂的样本分布,通过不断添加component个数,能够随意地逼近不论什么连续的概率分布.所以我们觉得不论什么样本分布都能够用混合模型来建模.由于高斯函数具有一 ...
- Wamp环境下配置--Apache虚拟主机
1.首先打开apache的配置文件httpd.conf,并去掉#Include conf/extra/httpd-vhosts.conf前面的#,启用虚拟主机功能 # Virtual hosts In ...
- Android菜鸟的成长笔记(27)——ViewPager的使用
ViewPager是Android 3.0以上能够使用的API. 一.ViewPager能干什么? 1.微信5.0中连带滑动用ViewPager能够轻松实现. 2.实现相似于新浪微博的导航引导界面. ...
- DataTable数据转换为实体
我们在用三层架构编写软件时,常常会遇到例如以下问题,就是三层之间的參数传递问题:假设我们在D层查询出数据是DataTable类型的,那么我们在B层甚至U层使用这条数据时,就要用DataTable类型来 ...
- Ubuntu12.04password正确 入口的桌面(测试的恢复正常)
举行了两次会议ubuntu输入password正确,但高考制度,输入password后,跳转看接口 后来又返回到登录界面,这个周期已经输入password. 解决方案:1.输入tty下 ...
- Android利用反射获取状态栏(StatusBar)高度
MainActivity如下: package cc.teststatusbarheight; import java.lang.reflect.Field; import android.os.Bu ...
- SE 2014年4月16日
一. 描述BGP路由协议中 BGP路由携带 AS-PATH/ next-hop / ORIGIN / local-preference 属性的特点! BGP协议中的AS-PATH是AS列表,用来 ...
- Android仿WIN8系统磁贴点击下沉倾斜效果
※效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGluZ2xvbmd4aW4yNA==/font/5a6L5L2T/fontsize/400/fil ...
- BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第15章节--开发SP2013工作流应用程序 总结
BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第15章节--开发SP2013工作流应用程序 总结 在SP2013中,工作流已经从SP Server中脱离 ...