Underscore.js常用方法總結

 這篇文章主要介紹了Underscore.js常用方法總結,本文講解了Underscore.js概述、在node.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：