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 相关文章推荐
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
Mar 23 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
全面解析bootstrap格子布局
May 22 Javascript
微信小程序入门教程
Nov 18 Javascript
JS实现的雪花飘落特效示例
Dec 03 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 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
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
js实现随机点名小功能
2017/08/17 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
使用Python的turtle模块画国旗
2019/09/24 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
采购主管岗位职责
2014/02/01 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
开工典礼策划方案
2014/05/23 职场文书
银行求职自荐书
2014/06/25 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
技术股份合作协议书
2014/10/05 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
文书工作总结(范文)
2019/07/11 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
解析MySQL索引的作用
2022/03/03 MySQL
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers