Underscore.js常用方法總結(jié)
概述
Underscore.js是一個(gè)很精干的庫(kù)，壓縮后只有4KB。它提供了幾十種函數(shù)式編程的方法，大大方便了Javascript的編程。MVC框架backbone.js就是基于這個(gè)庫(kù)。
它定義了一個(gè)下劃線（_）對(duì)象，函數(shù)庫(kù)的所有方法都屬于這個(gè)對(duì)象。這些方法大致上可以分成：集合（collection）、數(shù)組（array）、函數(shù)（function）、對(duì)象（object）和工具（utility）五大類。
在node.js下安裝
Underscore.js不僅可以用于瀏覽器環(huán)境，還可以用于node.js。安裝命令如下：
npm install underscore
但是，node.js不能直接使用_作為變量名，因此要用下面的方法使用underscore.js。
var u = require("underscore");
與集合有關(guān)的方法
Javascript語(yǔ)言的數(shù)據(jù)集合，包括兩種結(jié)構(gòu)：數(shù)組和對(duì)象。以下的方法同時(shí)適用于這兩種結(jié)構(gòu)。
map
該方法對(duì)集合的每個(gè)成員依次進(jìn)行某種操作，將返回的值依次存入一個(gè)新的數(shù)組。
_.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類似，依次對(duì)集合的每個(gè)成員進(jìn)行某種操作，但是不返回值。
_.each([1, 2, 3], alert); _.each({one : 1, two : 2, three : 3}, alert);
reduce
該方法依次對(duì)集合的每個(gè)成員進(jìn)行某種操作，然后將操作結(jié)果累計(jì)在某一個(gè)初始值之上，全部操作結(jié)束之后，返回累計(jì)的值。
該方法接受三個(gè)參數(shù)。第一個(gè)參數(shù)是被處理的集合，第二個(gè)參數(shù)是對(duì)每個(gè)成員進(jìn)行操作的函數(shù)，第三個(gè)參數(shù)是累計(jì)用的變量。
_.reduce([1, 2, 3], function(memo, num){ return memo + num; }, 0); // 6
reduce方法的第二個(gè)參數(shù)是操作函數(shù)，它本身又接受兩個(gè)參數(shù)，第一個(gè)是累計(jì)用的變量，第二個(gè)是集合每個(gè)成員的值。
filter 和 reject
filter方法依次對(duì)集合的每個(gè)成員進(jìn)行某種操作，只返回操作結(jié)果為true的成員。
_.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }); // [2, 4, 6]
reject方法只返回操作結(jié)果為false的成員。
_.reject([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }); // [1, 3, 5]
every 和 some
every方法依次對(duì)集合的每個(gè)成員進(jìn)行某種操作，如果所有成員的操作結(jié)果都為true，則返回true，否則返回false。
_.every([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }); // false
some方法則是只要有一個(gè)成員的操作結(jié)果為true，則返回true，否則返回false。
_.some([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }); // true
find
該方法依次對(duì)集合的每個(gè)成員進(jìn)行某種操作，返回第一個(gè)操作結(jié)果為true的成員。如果所有成員的操作結(jié)果都為false，則返回undefined。
_.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }); // 2
contains
如果某個(gè)值在集合內(nèi)，該方法返回true，否則返回false。
_.contains([1, 2, 3], 3); // true
countBy
該方法依次對(duì)集合的每個(gè)成員進(jìn)行某種操作，將操作結(jié)果相同的成員算作一類，最后返回一個(gè)對(duì)象，表明每種操作結(jié)果對(duì)應(yīng)的成員數(shù)量。
_.countBy([1, 2, 3, 4, 5], function(num) { return num % 2 == 0 ? 'even' : 'odd'; }); // {odd: 3, even: 2}
shuffle
該方法返回一個(gè)打亂次序的集合。
_.shuffle([1, 2, 3, 4, 5, 6]); // [4, 1, 6, 3, 5, 2]
size
該方法返回集合的成員數(shù)量。
_.size({one : 1, two : 2, three : 3}); // 3
與對(duì)象有關(guān)的方法
toArray
該方法將對(duì)象轉(zhuǎn)為數(shù)組。
_.toArray({a:0,b:1,c:2}); // [0, 1, 2]
pluck
該方法將多個(gè)對(duì)象的某一個(gè)屬性的值，提取成一個(gè)數(shù)組。
var stooges = [{name : 'moe', age : 40}, {name : 'larry', age : 50}, {name : 'curly', age : 60}]; _.pluck(stooges, 'name'); // ["moe", "larry", "curly"]
與函數(shù)相關(guān)的方法
bind
該方法綁定函數(shù)運(yùn)行時(shí)的上下文，作為一個(gè)新函數(shù)返回。
_.bind(function, object, [*arguments])
請(qǐng)看下面的實(shí)例。
var o = { p: 2, m: function (){console.log(p);} }; o.m() // 2 _.bind(o.m,{p:1})() // 1
bindAll
該方法將某個(gè)對(duì)象的所有方法（除非特別聲明），全部綁定在該對(duì)象上面。
var buttonView = { label : 'underscore', onClick : function(){ alert('clicked: ' + this.label); }, onHover : function(){ console.log('hovering: ' + this.label); } }; _.bindAll(buttonView);
partial
該方法綁定將某個(gè)函數(shù)與參數(shù)綁定，然后作為一個(gè)新函數(shù)返回。
var add = function(a, b) { return a + b; }; add5 = _.partial(add, 5); add5(10); // 15
memoize
該方法緩存一個(gè)函數(shù)針對(duì)某個(gè)參數(shù)的運(yùn)行結(jié)果。
var fibonacci = _.memoize(function(n) { return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2); });
如果一個(gè)函數(shù)有多個(gè)參數(shù)，則需要提供一個(gè)hashFunction，用來生成標(biāo)識(shí)緩存的哈希值。
delay
該方法可以將函數(shù)推遲指定的時(shí)間再運(yùn)行。
var log = _.bind(console.log, console); _.delay(log, 1000, 'logged later'); // 'logged later'
defer
該方法可以將函數(shù)推遲到待運(yùn)行的任務(wù)數(shù)為0時(shí)再運(yùn)行，類似于setTimeout推遲0秒運(yùn)行的效果。
_.defer(function(){ alert('deferred'); });
throttle
該方法返回一個(gè)函數(shù)的新版本。連續(xù)調(diào)用這個(gè)新版本的函數(shù)時(shí)，必須等待一定時(shí)間才會(huì)觸發(fā)下一次執(zhí)行。
// 返回updatePosition函數(shù)的新版本 var throttled = _.throttle(updatePosition, 100); // 新版本的函數(shù)每過100毫秒才會(huì)觸發(fā)一次 $(window).scroll(throttled);
debounce
該方法也是返回一個(gè)函數(shù)的新版本。每次調(diào)用這個(gè)新版本的函數(shù)，必須與上一次調(diào)用間隔一定的時(shí)間，否則就無效。它的典型應(yīng)用是防止用戶雙擊某個(gè)按鈕，導(dǎo)致兩次提交表單。
$("button").on("click", _.debounce(submitForm, 1000));
once
該方法返回一個(gè)新版本的函數(shù)，使得這個(gè)函數(shù)只能被運(yùn)行一次。主要用于對(duì)象的初始化。
var initialize = _.once(createApplication); initialize(); initialize(); // Application只被創(chuàng)造一次
after
該方法返回一個(gè)新版本的函數(shù)，這個(gè)函數(shù)只有在被調(diào)用一定次數(shù)后才會(huì)運(yùn)行，主要用于確認(rèn)一組操作全部完成后，再做出反應(yīng)。
var renderNotes = _.after(notes.length, render); _.each(notes, function(note) { note.asyncSave({success: renderNotes}); }); // 所有的note都被保存以后，renderNote才會(huì)運(yùn)行一次
wrap
該方法將一個(gè)函數(shù)作為參數(shù)，傳入另一個(gè)函數(shù)，最終返回前者的一個(gè)新版本。
var hello = function(name) { return "hello: " + name; }; hello = _.wrap(hello, function(func) { return "before, " + func("moe") + ", after"; }); hello(); // 'before, hello: moe, after'
compose
該方法接受一系列函數(shù)作為參數(shù)，由后向前依次運(yùn)行，上一個(gè)函數(shù)的運(yùn)行結(jié)果，作為后一個(gè)函數(shù)的運(yùn)行參數(shù)。也就是說，將f(g(),h())的形式轉(zhuǎn)化為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模板。它接受三個(gè)參數(shù)。
_.template(templateString, [data], [settings])
三個(gè)參數(shù)的含義如下：
templateString：模板字符串
data：輸入模板的數(shù)據(jù)
settings：設(shè)置
templateString
模板字符串templateString就是普通的HTML語(yǔ)言，其中的變量使用<%= … %>的形式插入；data對(duì)象負(fù)責(zé)提供變量的值。
var txt = "
<%= word %>
"; _.template(txt, {word : "Hello World"}) // "
Hello World
"
如果變量的值包含五個(gè)特殊字符（& < > ” ‘ /），就需要用<%- … %>轉(zhuǎn)義。
var txt = "
<%- word %>
"; _.template(txt, {word : "H & W"}) //
H & W
JavaScript命令可以采用<% … %>的形式插入。下面是判斷語(yǔ)句的例子。
var txt = "<% var i = 0; if (i<1){ %>" + "<%= word %>" + "<% } %>"; _.template(txt, {word : "Hello World"}) // Hello World
常見的用法還有循環(huán)語(yǔ)句。
var list = "<% _.each(people, function(name) { %>
<%= name %> <% }); %>”; _.template(list, {people : [‘moe', ‘curly', ‘larry']}); // “
moe
curly
larry”
如果template方法只有第一個(gè)參數(shù)templateString，省略第二個(gè)參數(shù)，那么會(huì)返回一個(gè)函數(shù)，以后可以向這個(gè)函數(shù)輸入數(shù)據(jù)。
var t1 = _.template("Hello <%=user%>!"); t1({ user: "" }) // 'Hello !'
data
templateString中的所有變量，在內(nèi)部都是obj對(duì)象的屬性，而obj對(duì)象就是指第二個(gè)參數(shù)data對(duì)象。下面兩句語(yǔ)句是等同的。
_.template("Hello <%=user%>!", { user: "" }) _.template("Hello <%=obj.user%>!", { user: "" })
如果要改變obj這個(gè)對(duì)象的名字，需要在第三個(gè)參數(shù)中設(shè)定。
_.template("<%if (data.title) { %>Title: <%= title %><% } %>", null, { variable: "data" });
因?yàn)閠emplate在變量替換時(shí)，內(nèi)部使用with語(yǔ)句，所以上面這樣的做法，運(yùn)行速度會(huì)比較快。
相關(guān)文章
TypeScript?5.0?正式發(fā)布及使用指南詳解
這篇文章主要為大家介紹了TypeScript?5.0?正式發(fā)布及使用指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了使用three.js 畫漸變的直線的相關(guān)資料以及具體的實(shí)例代碼，有需要的小伙伴可以參考下2016-06-06
數(shù)據(jù)結(jié)構(gòu)TypeScript之鏈表實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了數(shù)據(jù)結(jié)構(gòu)TypeScript之鏈表實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要為大家介紹了TypeScript中的遞歸類型示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了Underscore.js常用方法總結(jié),本文講解了Underscore.js概述、在node.js下安裝、與集合有關(guān)的方法、與對(duì)象有關(guān)的方法、與函數(shù)相關(guān)的方法等內(nèi)容,需要的朋友可以參考下2015-02-02
這篇文章主要為大家介紹了TypeScript前端上傳文件到MinIO示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
laytpl是一款顛覆性的JavaScript模板引擎，它用巧妙的實(shí)現(xiàn)方式，將自身的體積變得小巧玲瓏，不僅性能接近極致，并且還具備傳統(tǒng)前端引擎的幾乎所有功能2014-08-08
如今最常用的JavaScript庫(kù)之一是RequireJS。最近我參與的每個(gè)項(xiàng)目，都用到了RequireJS，或者是我向它們推薦了增加RequireJS。在這篇文章中，我將描述RequireJS是什么，以及它的一些基礎(chǔ)場(chǎng)景。 2016-04-04
TypeScript學(xué)習(xí)輕松玩轉(zhuǎn)類型操作
這篇文章主要為大家介紹了TypeScript學(xué)習(xí)輕松玩轉(zhuǎn)類型操作，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
使用typeScript 進(jìn)行扁平化數(shù)據(jù)轉(zhuǎn)樹實(shí)現(xiàn)demo
這篇文章主要介紹了使用typeScript 進(jìn)行扁平化數(shù)據(jù)轉(zhuǎn)樹實(shí)現(xiàn)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06