Underscore.js使用

时间：2022-10-29 00:01:41

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

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

Underscore使用_作为别名。

示例

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>title</title>

    <script src="./underscore/underscore.js" charset="utf-8"></script>

</head>

<body>

  <script type="text/javascript">

    var obj = {one: 1, two: 2, three: 3};

    var key = _.keys(obj);

    var val = _.values(obj);

    console.log(key);

    console.log(val);

  </script>

</body>

建议使用Console调试。

常用方法

_.keys(object)

获取object对象所有的属性名称。取键名。

_.keys({one: 1, two: 2, three: 3});

=> ["one", "two", "three"]

_.values(object)

返回object对象所有的属性值。取键值。

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

=> [1, 2, 3]

_.pairs(object)

把一个对象转变为一个[key, value]形式的数组。

_.pairs({one: 1, two: 2, three: 3});

=> [["one", 1], ["two", 2], ["three", 3]]

_.invert(object)

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

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

=> {Moses: "Moe", Louis: "Larry", Jerome: "Curly"};

_.functions(object)

别名： methods

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

_.functions(_);

=> ["all", "any", "bind", "bindAll", "clone", "compact", "compose"

_.extend(destination, *sources)

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

_.extend({name: 'moe'}, {age: 50});

=> {name: 'moe', age: 50}

_.pick(object, *keys)

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

_.pick({name: 'moe', age: 50, userid: 'moe1'}, 'name', 'age');

=> {name: 'moe', age: 50}

_.pick({name: 'moe', age: 50, userid: 'moe1'}, function(value, key, object) {

  return _.isNumber(value);

});

=> {age: 50}

_.omit(object, *keys)

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

_.omit({name: 'moe', age: 50, userid: 'moe1'}, 'userid');

=> {name: 'moe', age: 50}

_.omit({name: 'moe', age: 50, userid: 'moe1'}, function(value, key, object) {

  return _.isNumber(value);

});

=> {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.遍历数组：

var list = [1,2,3,4];

list.forEach(function(v, k , obj){

    document.write(k + ',' + v + ',[' + obj.toString() + ']<br>');

});

结果：

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

1,2,[1,2,3,4]

2,3,[1,2,3,4]

3,4,[1,2,3,4]

示例2：遍历字符串

var list = 'hello world';

_.each(list, function(value, index, obj) {

    document.write(value + ',' + index + ',[' + obj.toString() + ']<br>');

});

document.write(list.toString());

输出：

h,0,[hello world]

e,1,[hello world]

l,2,[hello world]

l,3,[hello world]

o,4,[hello world]

,5,[hello world]

w,6,[hello world]

o,7,[hello world]

r,8,[hello world]

l,9,[hello world]

d,10,[hello world]

hello world

_.find(list, predicate, [context])

别名： detect

在list中逐项查找，返回第一个通过predicate迭代函数真值检测的元素值，如果没有值传递给测试迭代器将返回undefined。

注意：如果找到匹配的元素，函数将立即返回，不会遍历整个list。

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

=> 2

_.filter(list, predicate, [context])

别名： select

遍历list中的每个值，返回包含所有通过predicate真值检测的元素值。（注：如果存在原生filter方法，则用原生的filter方法。）

与_.find类似，但会遍历所有匹配元素。

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

=> [2, 4, 6]

map_.map(list, iteratee, [context])

别名： collect

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

_.map([1, 2, 3], function(num){ return num * 3; });

=> [3, 6, 9]

_.map({one: 1, two: 2, three: 3}, function(num, key){ return num * 3; });

=> [3, 6, 9]

_.reduce(list, iteratee, [memo], [context])

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

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

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

=> 106

_.some(list, [iterator], [context])

别名: any

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

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

=> true

_.all(list, [iterator], [context])

别名: all

与some类似。如果所有在 list 里的元素通过了 iterator 的测试, 返回 true. 如果存在则使用原生的 every 方法.

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

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

    console.log(obj);

});

[1,2,3,4,5].filter(function(obj){

    return obj < 3

});

[9,8,5,2,3,4,5].map(function(obj){

    return obj + 2;

});

[1,2,3,4,5].reduce(function(pre, cur, idx, arr) {

    console.log(idx);    //4 个循环: 2-5

    return pre + cur;

});   //15

//sort方法同样很有用

[9,8,5,2,3,4,5].sort(function(obj1, obj2){

    return obj1 - obj2;

});

更多阅读：

Underscore.js

underscore API文档

http://www.bootcss.com/p/underscore/

Underscore.js使用的更多相关文章

  1. Underscore&period;js

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

  2. 新手入门Underscore&period;js 中文（template）

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

  3. HiShop2&period;x版本中的上传插件分析，得出所用的模板语言为Underscore&period;js 1&period;6&period;0且自己已修改

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

  4. Underscore&period;js基础入门

    公司产品集成了对Underscore.js,所以需要对这个库有一定的了解.通过查阅资料,发现这个库主是对Array和JSON的处理支持.通过Underscore.js库,可以方便的对Array和JSO ...

  5. （2）Underscore&period;js常用方法

    目录 1.集合相关方法        1.1.数组的处理                map(循环,有返回值),将返回的值依次存入一个新的数组                each(循环,无返回值 ...

  6. （1）Underscore&period;js入门

    1. Underscore对象封装 Underscore并没有在原生的JavaScript对象原型中进行扩展,而是像jQuery一样,将数据封装在一个自定义对象中(下文中称"Undersco ...

  7. underscore&period;js依赖库函数分析二（查找）

    查找: 在underscore.js封装了对dom查找的操作,find()和filter()函数,find()函数的查找操作是返回首个与条件相符的元素值,filter()函数是找到与条件相符的所有元素 ...

  8. underscore&period;js依赖库函数分析一（遍历）

    Underscore简介: underscore是一个非常简洁,实用的javascript库,和jQuery封装类型差不多,但underscore是backbone的依赖 库,想运行backbone就 ...

  9. Underscore&period;js 初探

    一. 简介   Underscore 这个单词的意思是“下划线”.   Underscore.js 是一个 JavaScript 工具库,提供了一整套的辅助方法供你使用.   Think that - ...

随机推荐

  1. CDN（内容分发网络）技术原理

    1. 前言 Internet的高速发展,给人们的工作和生活带来了极大的便利,对Internet的服务品质和访问速度要求越来越高,虽然带宽不断增加, 用户数量也在不断增加,受Web服务器的负荷和传输距离 ...

  2. 暑假集训&lpar;5&rpar;第二弹———湫湫系列故事——减肥记I（hdu4508）

    问题描述:舔了舔嘴上的油渍,你陷在身后柔软的靠椅上.在德源大赛中获得优胜的你,迫不及待地赶到“吃到饱”饭店吃到饱.当你 正准备离开时,服务员叫住了你,“先生,您还没有吃完你所点的酒菜.”指着你桌上的一 ...

  3. &lbrack;笔记&rsqb; &sol;etc&sol;init&period;d&sol; 下脚本的通用结构

    http://sunxiaqw.blog.163.com/blog/static/99065438201111715813443/ 下面以 named 为例 : #!/bin/bash # # nam ...

  4. Java字符编码

    今天在往oracle数据库里插入数据时发现,往一个20字节的字段里插入8个汉字加上一个括号,并没有提示字段超长.猜想数据库应该并没有用万国码(utf-8). 查询数据库编码sql:select * f ...

  5. Axure 页面内多组内容切换的实现 &plus; 利用一个内联框架实现百度地图访问

    Axure  页面内多组内容切换的实现,场景:点击某个元件的时候,会显示响应的页面 操作:将显示的页面设置为动态面板,如图所示应该设置动态面板的状态为三个状态,分别为点击qq账号.手机账号.邮箱账号时 ...

  6. 苹果手机 disabled 的背景颜色没有

    解决方案 .class disabled{ background-color: rgb(235, 235, 228); opacity:1}

  7. X-Requested-With

    最近工作中发现,使用angular $http跨域的时候,虽然后台已经配置了跨域允许,但是还是报错. 查资料发现,angular $http 的request的请求头中,默认有: Access-Con ...

  8. &lbrack;OS&rsqb;windows 2012 server-Local users and groups-Backup Operators

    怎样找到windows 2012 server上的Backup Operators Press the Windows + R keys to open the Run dialog, type lu ...

  9. VirtualBox 4&period;3&period;18 启动虚拟机时显示不能加载 R3模块并退出故障解决一例

    VirtualBox 升级到 4.3.1x后一直问题不断.搜了些资料,发现这货从最近的某个版本开始,为了安全,要校验进程完整性,那些在运行时要注入Virtualbox进程的模块都要进行校验.于是乎出现 ...

  10. UI&lowbar;storyboard实现页面回调

    新建类 注意继承关系 #import <UIKit/UIKit.h> @interface CustomPopIt : UIStoryboardSegue @end #import &qu ...

相关文章