Underscore.js常用方法总结


Posted in Javascript onFebruary 28, 2015

概述

Underscore.js是一个很精干的库,压缩后只有4KB。它提供了几十种函数式编程的方法,大大方便了Javascript的编程。MVC框架backbone.js就是基于这个库。

它定义了一个下划线(_)对象,函数库的所有方法都属于这个对象。这些方法大致上可以分成:集合(collection)、数组(array)、函数(function)、对象(object)和工具(utility)五大类。

在node.js下安装

Underscore.js不仅可以用于浏览器环境,还可以用于node.js。安装命令如下:

npm install underscore

但是,node.js不能直接使用_作为变量名,因此要用下面的方法使用underscore.js。
var u = require("underscore");

与集合有关的方法

Javascript语言的数据集合,包括两种结构:数组和对象。以下的方法同时适用于这两种结构。

map

该方法对集合的每个成员依次进行某种操作,将返回的值依次存入一个新的数组。

_.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]

each

该方法与map类似,依次对集合的每个成员进行某种操作,但是不返回值。

_.each([1, 2, 3], alert);    _.each({one : 1, two : 2, three : 3}, alert);

reduce

该方法依次对集合的每个成员进行某种操作,然后将操作结果累计在某一个初始值之上,全部操作结束之后,返回累计的值。

该方法接受三个参数。第一个参数是被处理的集合,第二个参数是对每个成员进行操作的函数,第三个参数是累计用的变量。

_.reduce([1, 2, 3], function(memo, num){ return memo + num; }, 0);  // 6
reduce方法的第二个参数是操作函数,它本身又接受两个参数,第一个是累计用的变量,第二个是集合每个成员的值。

filter 和 reject

filter方法依次对集合的每个成员进行某种操作,只返回操作结果为true的成员。

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

reject方法只返回操作结果为false的成员。
_.reject([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });  // [1, 3, 5]

every 和 some

every方法依次对集合的每个成员进行某种操作,如果所有成员的操作结果都为true,则返回true,否则返回false。

_.every([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });  // false

some方法则是只要有一个成员的操作结果为true,则返回true,否则返回false。
_.some([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });  // true

find

该方法依次对集合的每个成员进行某种操作,返回第一个操作结果为true的成员。如果所有成员的操作结果都为false,则返回undefined。

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

contains

如果某个值在集合内,该方法返回true,否则返回false。

_.contains([1, 2, 3], 3);  // true

countBy

该方法依次对集合的每个成员进行某种操作,将操作结果相同的成员算作一类,最后返回一个对象,表明每种操作结果对应的成员数量。

_.countBy([1, 2, 3, 4, 5], function(num) {    return num % 2 == 0 ? 'even' : 'odd';  });  // {odd: 3, even: 2}

shuffle

该方法返回一个打乱次序的集合。

_.shuffle([1, 2, 3, 4, 5, 6]);  // [4, 1, 6, 3, 5, 2]

size

该方法返回集合的成员数量。

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

与对象有关的方法

toArray

该方法将对象转为数组。

 _.toArray({a:0,b:1,c:2});  // [0, 1, 2]

pluck

该方法将多个对象的某一个属性的值,提取成一个数组。

var stooges = [{name : 'moe', age : 40}, {name : 'larry', age : 50}, {name : 'curly', age : 60}];    _.pluck(stooges, 'name');  // ["moe", "larry", "curly"]

与函数相关的方法

bind

该方法绑定函数运行时的上下文,作为一个新函数返回。

_.bind(function, object, [*arguments])

请看下面的实例。
var o = {      p: 2,      m: function (){console.log(p);}  };    o.m()  // 2    _.bind(o.m,{p:1})()  // 1

bindAll

该方法将某个对象的所有方法(除非特别声明),全部绑定在该对象上面。

var buttonView = {    label   : 'underscore',    onClick : function(){ alert('clicked: ' + this.label); },    onHover : function(){ console.log('hovering: ' + this.label); }  };    _.bindAll(buttonView);

partial

该方法绑定将某个函数与参数绑定,然后作为一个新函数返回。

var add = function(a, b) { return a + b; };    add5 = _.partial(add, 5);    add5(10);  // 15

memoize

该方法缓存一个函数针对某个参数的运行结果。

var fibonacci = _.memoize(function(n) {    return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2);  });

如果一个函数有多个参数,则需要提供一个hashFunction,用来生成标识缓存的哈希值。

delay

该方法可以将函数推迟指定的时间再运行。

var log = _.bind(console.log, console);    _.delay(log, 1000, 'logged later');  // 'logged later'

defer

该方法可以将函数推迟到待运行的任务数为0时再运行,类似于setTimeout推迟0秒运行的效果。

_.defer(function(){ alert('deferred'); });

throttle

该方法返回一个函数的新版本。连续调用这个新版本的函数时,必须等待一定时间才会触发下一次执行。

// 返回updatePosition函数的新版本  var throttled = _.throttle(updatePosition, 100);    // 新版本的函数每过100毫秒才会触发一次  $(window).scroll(throttled);

debounce

该方法也是返回一个函数的新版本。每次调用这个新版本的函数,必须与上一次调用间隔一定的时间,否则就无效。它的典型应用是防止用户双击某个按钮,导致两次提交表单。

$("button").on("click", _.debounce(submitForm, 1000));

once

该方法返回一个新版本的函数,使得这个函数只能被运行一次。主要用于对象的初始化。

var initialize = _.once(createApplication);  initialize();  initialize();  // Application只被创造一次

after

该方法返回一个新版本的函数,这个函数只有在被调用一定次数后才会运行,主要用于确认一组操作全部完成后,再做出反应。

var renderNotes = _.after(notes.length, render);  _.each(notes, function(note) {    note.asyncSave({success: renderNotes});  });  // 所有的note都被保存以后,renderNote才会运行一次

wrap

该方法将一个函数作为参数,传入另一个函数,最终返回前者的一个新版本。

var hello = function(name) { return "hello: " + name; };  hello = _.wrap(hello, function(func) {    return "before, " + func("moe") + ", after";  });  hello();  // 'before, hello: moe, after'

compose

该方法接受一系列函数作为参数,由后向前依次运行,上一个函数的运行结果,作为后一个函数的运行参数。也就是说,将f(g(),h())的形式转化为f(g(h()))。

var greet    = function(name){ return "hi: " + name; };  var exclaim  = function(statement){ return statement + "!"; };  var welcome = _.compose(exclaim, greet);  welcome('moe');  // 'hi: moe!'

工具方法

template

该方法用于编译HTML模板。它接受三个参数。

_.template(templateString, [data], [settings])

三个参数的含义如下:

templateString:模板字符串
data:输入模板的数据
settings:设置
 

templateString

模板字符串templateString就是普通的HTML语言,其中的变量使用<%= … %>的形式插入;data对象负责提供变量的值。

var txt = "

<%= word %>

";    _.template(txt, {word : "Hello World"})  // "

Hello World
"

如果变量的值包含五个特殊字符(& < > ” ‘ /),就需要用<%- … %>转义。
var txt = "

<%- word %>
";    _.template(txt, {word : "H & W"})  //

H & W

JavaScript命令可以采用<% … %>的形式插入。下面是判断语句的例子。

var txt = "<% var i = 0; if (i<1){ %>"          + "<%= word %>"          + "<% } %>";    _.template(txt, {word : "Hello World"})  // Hello World

常见的用法还有循环语句。
var list = "<% _.each(people, function(name) { %>

<%= name %> <% }); %>”;    _.template(list, {people : [‘moe', ‘curly', ‘larry']});  // “
moe
curly
larry”
如果template方法只有第一个参数templateString,省略第二个参数,那么会返回一个函数,以后可以向这个函数输入数据。
var t1 = _.template("Hello <%=user%>!");      t1({ user: "" })   // 'Hello !'

data

templateString中的所有变量,在内部都是obj对象的属性,而obj对象就是指第二个参数data对象。下面两句语句是等同的。

_.template("Hello <%=user%>!", { user: "" })  _.template("Hello <%=obj.user%>!", { user: "" })

如果要改变obj这个对象的名字,需要在第三个参数中设定。
_.template("<%if (data.title) { %>Title: <%= title %><% } %>", null,                  { variable: "data" });

因为template在变量替换时,内部使用with语句,所以上面这样的做法,运行速度会比较快。
Javascript 相关文章推荐
ajax 文件上传应用简单实现
Mar 03 Javascript
关于js遍历表格的实例
Jul 10 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
理解javascript中DOM事件
Dec 25 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
vue+Element-ui实现分页效果
Nov 15 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 #Javascript
jQuery实现tab标签自动切换的方法
Feb 28 #Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 #Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 #Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 #Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 #Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 #Javascript
You might like
ThinkPHP分页实例
2014/10/15 PHP
php解析xml方法实例详解
2015/05/12 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
PHP中如何使用Redis接管文件存储Session详解
2018/11/28 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
jQuery 事件队列调整方法
2009/09/18 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
jquery easyui使用心得
2014/07/07 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
Python Deque 模块使用详解
2014/07/04 Python
Python中函数参数调用方式分析
2018/08/09 Python
Django 反向生成url实例详解
2019/07/30 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
python中str内置函数用法总结
2020/12/27 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
高三地理教学反思
2014/01/11 职场文书
党员服务承诺书
2014/05/28 职场文书
让子弹飞观后感
2015/06/11 职场文书