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   

bindAll

該方法將某個物件的所有方法（除非特別聲明），全部綁定在該物件上面。

複製程式碼 程式碼如下:

var buttonView = {    label   : 'underscore',    onClick : function(){ alert('clicked: ' this.label); },    onHover : function(){ console. ;    _.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

如果一個函數有多個參數，則需要提供一個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都保存，以後，才會運行一次

wrap

此方法以函數為參數，傳入另一個函數，最後傳回前者的新版本。

複製程式碼

程式碼如下:

var hello = function(name) { return "hello: " name; };  hello = _.wrap(hello, function(func) {    return "before, " func("moe") ", after";  });  hello });  hello ();  // 'before, hello: moe, after'

compose

此方法接受一系列函數作為參數，由後向前依序運行，上一個函數的運行結果，作為後一個函數的運行參數。也就是說，將f(g(),h())的形式轉換成f(g(h()))。

複製程式碼 程式碼如下:

var greet    = function(name){ return "hi: " name; };  var exclaim  = function(name){ return "hi: " name; };  var exclaim  = function(statement){ return statement "!"; };  var welcome = _.compose(exclaim, greet); };  var welcome = _.compose(exclaim, greet); );  // 'hi: moe!'

工具方法

template

此方法用於編譯HTML範本。它接受三個參數。

複製程式碼 程式碼如下:

_.template(templateString, [數據], [settings])

三個參數的意義如下：

templateString：範本字串
data：輸入模板的資料
settings：設定
 

templateString

模板字串templateString就是普通的HTML語言，其中的變數使用的形式插入；data物件負責提供變數的值。

複製程式碼 程式碼如下:

var txt = "

複製程式碼 程式碼如下:

";    _.template(txt, {word : "Hello World"})  // "

Hello World

複製程式碼 程式碼如下:

"

如果變數的值包含五個特殊字元（& ” ‘ /），就需要用轉義。

複製程式碼 程式碼如下:

var txt = "

複製程式碼 程式碼如下:

";    _.template(txt, {word : "H & W"})  //

H & W

JavaScript指令可以用的形式插入。下面是判斷語句的例子。

複製程式碼 程式碼如下:

var txt = ""          ""          ""          "";         ""; })  // Hello World

常見的用法還有循環語句。

複製程式碼 程式碼如下:

var list = "

”;    _.template(list, {people : [‘moe', ‘curly', ‘larry']});  // “
moe
curly
larry”
如果template方法只有第一個參數templateString，省略第二個參數，那麼會傳回一個函數，以後可以向這個函數輸入資料。

複製程式碼 程式碼如下:

var t1 = _.template("Hello !");      t1({ user: "" })   // 'Hello !'

data

templateString中的所有變量，在內部都是obj物件的屬性，而obj物件就是指第二個參數data物件。下面兩句語句是等同的。

複製程式碼 程式碼如下:

_.template("Hello !", { user: "" })  _.template("Hello !", { user: "" })

如果要改變obj這個物件的名字，需要在第三個參數中設定。

複製程式碼 程式碼如下:

_.template("Title: ", null,                

因為template在變數替換時，內部使用with語句，所以上面這樣的做法，運行速度會比較快。