Underscore.js常用方法总结

概述

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语句,所以上面这样的做法,运行速度会比较快。

(0)

相关推荐

  • Underscore源码分析

    几年前就有人说javascript是最被低估一种编程语言,自从nodejs出来后,全端(All Stack/Full Stack)概念日渐兴起,现在恐怕没人再敢低估它了.javascrip是一种类C的语言,有C语言基础就能大体理解javascript的代码,但是作为一种脚本语言,javascript的灵活性是C所远远不及的,这也会造成学习上的一些困难. 一.集合  1.首先是几个迭代的方法. _.each = _.forEach = function(obj, iteratee, context

  • Underscore.js 1.3.3 中文注释翻译说明

    // Underscore.js 1.3.3 // (c) 2009-2012 Jeremy Ashkenas, DocumentCloud Inc. // Underscore is freely distributable under the MIT license. // Portions of Underscore are inspired or borrowed from Prototype, // Oliver Steele's Functional, and John Resig'

  • Underscore.js 的模板功能介绍与应用

    Underscore是一个非常实用的JavaScript库,提供许多编程时需要的功能的支持,他在不扩展任何JavaScript的原生对象的情况下提供很多实用的功能. 无论你写一段小的js代码,还是写一个大型的HTML5应用,underscore都能帮上忙.目前,underscore已经被广泛使用,例如,backbone.js唯一强依赖的库就是underscore.js. 今天主要讨论Underscore 的前端模板功能.它的模板功能和前一篇介绍的javascript前端模板是一样的.对数据的处理

  • JavaScript之underscore_动力节点Java学院整理

    JavaScript是函数式编程语言,支持高阶函数和闭包.函数式编程非常强大,可以写出非常简洁的代码.例如Array的map()和filter()方法: 'use strict'; var a1 = [1, 4, 9, 16]; var a2 = a1.map(Math.sqrt); // [1, 2, 3, 4] var a3 = a2.filter((x) => { return x % 2 === 0; }); // [2, 4] 现在问题来了,Array有map()和filter()方法

  • Underscore之Array_动力节点Java学院整理

    underscore为Array提供了许多工具类方法,可以更方便快捷地操作Array. first / last 顾名思义,这两个函数分别取第一个和最后一个元素: 'use strict'; var arr = [2, 4, 6, 8]; _.first(arr); // 2 _.last(arr); // 8 flatten flatten()接收一个Array,无论这个Array里面嵌套了多少个Array,flatten()最后都把它们变成一个一维数组: 'use strict'; _.fl

  • underscore之Chaining_动力节点Java学院整理

    还记得jQuery支持链式调用吗? $('a').attr('target', '_blank') .append(' <i class="uk-icon-external-link"></i>') .click(function () {}); 如果我们有一组操作,用underscore提供的函数,写出来像这样: _.filter(_.map([1, 4, 9, 16, 25], Math.sqrt), x => x % 2 === 1); // [1,

  • underscore之Collections_动力节点Java学院整理

    underscore为集合类对象提供了一致的接口.集合类是指Array和Object,暂不支持Map和Set. map/filter 和Array的map()与filter()类似,但是underscore的map()和filter()可以作用于Object.当作用于Object时,传入的函数为function (value, key),第一个参数接收value,第二个参数接收key: 'use strict'; var obj = { name: 'bob', school: 'No.1 mi

  • Underscore.js常用方法总结

    概述 Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,大大方便了Javascript的编程.MVC框架backbone.js就是基于这个库. 它定义了一个下划线(_)对象,函数库的所有方法都属于这个对象.这些方法大致上可以分成:集合(collection).数组(array).函数(function).对象(object)和工具(utility)五大类. 在node.js下安装 Underscore.js不仅可以用于浏览器环境,还可以用于node.j

  • 深入解析Backbone.js框架的依赖库Underscore.js的作用

    backbone必须依赖underscore.js才能够使用,它必须通过underscore中的函数来完成访问页面元素.处理元素的基本操作. 注:backbone可以很好的与其它js库一起工作,所以说它是一个库,而不是框架. Underscore并没有对原生对象进行扩展,而是调用_()方法进行封装,一旦封装完成,js对象就变为Underscore对象,也可以通过Underscore对象的Value()方法获取原生js对象中的数据.(jquery通过$()方法得到Jquery对象) Undersc

  • 微信小程序使用第三方库Underscore.js步骤详解

    前言 Underscore.js是一个很精干的库,压缩后只有4KB.Underscore 提供了100多个函数,包括常用的:map.filter.invoke - 当然还有更多专业的辅助函数,如:函数绑定.JavaScript 模板功能.创建快速索引.强类型相等测试等等.弥补了标准库的不足,大大方便了JavaScript的编程. 微信小程序无法直接使用require( 'underscore.js' )进行调用. 微信小程序模块化机制 微信小程序运行环境支持CommoJS模块化,通过module

  • js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例

    本文实例讲述了js常用方法.检查是否有特殊字符串.倒序截取字符串操作.分享给大家供大家参考,具体如下: js常用方法demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

  • Backbone.js框架中Model与Collection的使用实例

    Model 关于backbone,最基础的一个东西就是model,这个东西就像是后端开发中的数据库映射那个model一样,也是数据对象的模型,并且应该是和后端的model有相同的属性(仅是需要通过前端来操作的属性). 下面就从实例来一步一步的带大家来了解backbone的model到底是什么样的一个东西. 首先定义一个html的页面: <!DOCTYPE html> <html> <head> <title>the5fire-backbone-model&l

  • 实例讲解JavaScript的Backbone.js框架中的View视图

    Backbone 中的 View 用来反映你 app 中 Model 的模样.它们会监听事件并作出相应的反应. 接下来的教程我不会告诉你如何把 Model 和 Collection 绑定到 View 上,而是主要讨论 View 是如何使用 javascript 模板库的,尤其是 Underscore.js's _.template. 这里我们使用 jQuery 来操作 DOM 元素,当然你也可以使用其他的库,例如 MooTools 或者 Sizzle,但是 Backbone 的官方文档推荐我们使

  • 讲解JavaScript的Backbone.js框架的MVC结构设计理念

    什么是Backbone.js? Backbone.js是十大JS框架之首,Backbone.js 是一个重量级js  MVC 应用框架,也是js MVC框架的鼻祖.它通过Models数据模型进行键值绑定及custom事件处理,通过模型集合器Collections提供一套丰富的API用于枚举功能,通过视图Views来进行事件处理及与现有的Application通过JSON接口进行交互. 简而言之,Backbone是实现了web前端MVC模式的js库 什么是MVC? MVC:后端服务器首先(过程1)

  • 深入解析JavaScript框架Backbone.js中的事件机制

    事件模型及其原理 Backbone.Events就是事件实现的核心,它可以让对象拥有事件能力 var Events = Backbone.Events = { .. } 对象通过listenTo侦听其他对象,通过trigger触发事件.可以脱离Backbone的MVC,在自定义的对象上使用事件 var model = _.extend({},Backbone.Events); var view = _.extend({},Backbone.Events); view.listenTo(model

随机推荐