微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Underscore.js常用方法总结

分类：JavaScript作者：编程之家AI导航网

概述

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

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

在node.js下安装

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

代码如下:
score
但是，node.js不能直接使用_作为变量名，因此要用下面的方法使用underscore.js。
代码如下:
score");

与集合有关的方法

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

map

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

代码如下:

each

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

代码如下:

reduce

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

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

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

filter 和 reject

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

代码如下:
reject方法只返回操作结果为false的成员。
代码如下:

every 和 some

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

代码如下:
some方法则是只要有一个成员的操作结果为true，则返回true，否则返回false。
代码如下:
.some([1,function(num){ return num % 2 == 0; }); // true

find

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

代码如下:

contains

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

代码如下:

countBy

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

代码如下:

shuffle

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

代码如下:

size

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

代码如下:

与对象有关的方法

toArray

该方法将对象转为数组。

代码如下:

pluck

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

代码如下:

与函数相关的方法

bind

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

代码如下:
请看下面的实例。
代码如下:

bindAll

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

代码如下:
score',onClick : function(){ alert('clicked: ' + this.label); },onHover : function(){ console.log('hovering: ' + this.label); } }; _.bindAll(buttonView);

partial

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

代码如下:

memoize

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

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

delay

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

代码如下:

defer

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

代码如下:

throttle

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

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

debounce

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

代码如下:

once

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

代码如下:

after

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

代码如下:

wrap

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

代码如下:

compose

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

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

工具方法

template

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

代码如下:
三个参数的含义如下：

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

templateString

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

代码如下:
代码如下:

Hello World

代码如下:
如果变量的值包含五个特殊字符（& < > ” ‘ /），就需要用<%- … %>转义。
代码如下:
代码如下:

H & W

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

代码如下:
" + "<% } %>"; _.template(txt,{word : "Hello World"}) // Hello World
常见的用法还有循环语句。
代码如下:
方法只有第一个参数templateString，省略第二个参数，那么会返回一个函数，以后可以向这个函数输入数据。
代码如下:
!"); t1({ user: "" }) // 'Hello !'

data

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

代码如下:
!",{ user: "" }) _.template("Hello <%=obj.user%>!",{ user: "" })
如果要改变obj这个对象的名字，需要在第三个参数中设定。
代码如下:
Title: <%= title %><% } %>",null,{ variable: "data" });
因为template在变量替换时，内部使用with语句，所以上面这样的做法，运行速度会比较快。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

常用方法

相关推荐

自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗
前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为layUI的一个重要组件，使用简单、接口参数丰富，功能健壮，深受广大开发者的喜爱，作为一个热（经）爱（常）工（划）作（水），喜欢钻研探索技术的程序员（狗），我们自己来实现一个web弹窗/层，一窥layer的本源（/手动滑稽脸），进步，从
nice-validator表单验证插件的简单使用
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步，是数据安全的第一道关卡，虽然我们不能100%相信客户端提交的数据（真正的校验还得在服务端进行），但设置前端表单校验也是至关重要的，自己写逻辑代码一个一个表单字段去校验不现实，又不想自己造轮子，使用jquery插件是不错的选择，这里记录一下在
基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
前言 图片上传是web项目常见的需求，我基于之前的博客的代码（请戳：formData批量上传的多种实现）里的第三种方法实现多图片的预览、上传，并且支持三种方式添加图片到上传列表：选择图片、复制粘贴图片、鼠标拖拽图片，同时支持从上传列表中移除图片（点击“X”号） 效果演示 选择图片 页面操作 后台接参
踹掉后端，前端导出Excel！
前言 导出Excel文件这个功能，通常都是在后端实现返回前端一个下载链接，但有时候我们只想导出前端页面上已经有了的数据，不想再调后端导出接口浪费服务器资源，学习本文demo例子，我们踹掉后端，直接在前端导出Excel！ 代码实现 1、利用Blob对象构造一个a标签的href链接，从而实现文件下载，E
Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量
前言 众所周知，js是单线程的，从上往下，从左往右依次执行，当我们有耗时的任务需要处理时，便会阻塞线程造成页面卡顿等问题。web worker的目的，就是为JavaScript创造多线程环境，允许主线程将一些任务分配给子线程。在主线程运行的同时，子线程在后台运行，两者互不干扰。等到子线程完成计算任务
select标签 禁止选择但又能通过序列化form表单传值到后台
前言 项目开发中，我们可能会碰到这样的需求：select标签，禁止选择但又能通过序列化form表单传值到后台，但是当我们使用disabled=&quot;disabled&quot;时发现，无法序列化form获取到select标签的值；当我们使用readonly=&quot;readonly&quo
还在问跨域？本文记录js跨域的多种实现实例
前言 众所周知，受浏览器同源策略的影响，产生了跨域问题，那么我们应该如何实现跨域呢？本文记录几种跨域的简单实现 前期准备 为了方便测试，我们启动两个服务，10086（就是在这篇博客自动生成的项目，请戳：SpringBoot系列——Spring-Data-JPA（究极进化版） 自动生成单表基础增、删、
formData批量上传的多种实现
前言 最近项目需要批量上传附件，查了下资料，网上很多但看着一脸懵，只贴部分代码，介绍也不详细，这里记录一下自己的采坑与多种实现，以免以后忘记。 这里先介绍下FormData对象，以下内容摘自：https://developer.mozilla.org/zh-CN/docs/Web/API/FormD
laypage 物理分页与逻辑分页实例
前言 以下介绍摘自&#160;layui官网laypage layPage 致力于提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。自 layui 2.0 开始，无论是从核心代码还是API设计，layPage 都完成了一次蜕变。清爽的UI、灵活的排版，极简的调用方式，这一切的优质元素
乐观锁机制解决多层嵌套异步ajax问题
前言 在项目中我们通常需要使用ajax异步嵌套去请求数据并做数据的展示，当我们多次快速的多次的发起ajax，因为ajax是异步的，每个ajax触发回调的时间都是不可控的，这样就会造成前面发起的ajax跟后面发起的ajax都有可能去修改同一个DOM，导致展示的数据顺序错乱或数据重复，我们希望DOM展示
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native