Underscore實例教程

摘要: Underscore是一個輕量級的JavaScript庫，提供了許多很是實用的函數。熟練使用Underscore能夠更快地寫出更簡潔的代碼。本文將經過一個簡單的編程實例，介紹幾個經常使用的Underscore函數。

GitHub地址:

• kiwenlau/underscore-example

• 做者: KiwenLau

• 日期: 2016-09-18

一. 編程實例

輸入數據是一個數組:

["b", "d", "a", "d", "d", "b", "c", "c", "d", "c"];

其中，數組中存在重複的元素。例如，"c"重複了3次。

如今須要根據元素在數組中的重複個數進行排序。經過觀察可知，"a"爲1個，"b"爲2個，"c"爲3個，"d"爲4個。

所以，輸出結果是:

[ 'a', 'b', 'c', 'd' ]

固然，計算機暫時還沒辦法像人同樣經過觀察解決問題，因此得敲代碼...

問題自己很容易理解，可是代碼並很差寫。不使用underscore的話，程序是這樣的:

var X = ["b", "d", "a", "d", "d", "b", "c", "c", "d", "c"];


// 對數組元素進行計數
var A = {};

for (var i = 0; i < X.length; i++)
{
    var x = X[i];
    if (A.hasOwnProperty(X[i]))
    {
        A[x]++;
    }
    else
    {
        A[x] = 1;
    }
}


// 將對象轉化爲二維數組
var B = [];

for (var a in A)
{
    B.push([a, A[a]]);
}


// 根據二維數組的第2列元素進行排序
B.sort(
    function(a, b)
    {
        return a[1] - b[1];
    }
);


// 獲取二維數組的第1列元素
var Y = [];

for (var i = 0; i < B.length; i++)
{
    Y.push(B[i][0]);
}


console.log(Y); // [ 'a', 'b', 'c', 'd' ]

雖然我在代碼中使用了一些JavasScript自帶的庫函數例如sort，可是代碼仍然比較冗長。

使用了Underscore以後，代碼被極大地簡化了:

var _ = require("underscore");

var X = ["b", "d", "a", "d", "d", "b", "c", "c", "d", "c"];

var Y = _.chain(X)
    .countBy() // 對數組元素進行計數
    .pairs()   // 將對象轉化爲二維數組
    .sortBy(1) // 根據二維數組的第2列元素進行排序
    .pluck(0)  // 獲取二維數組的第1列元素
    .value();  // 獲取計算結果

console.log(Y); // [ 'a', 'b', 'c', 'd' ]

可知，我使用了4個Underscore函數: _.countBy，_.pairs，_.sortBy和_.pluck。而且經過_.chain將這4個函數依次連接起來，實現了前一段代碼中徹底相同的功能。

下面，我會依次介紹代碼中所使用的Underscore函數。

二. 函數介紹

1. _.countBy

功能:

• 對數組中的元素進行計數

實例:

var X = ["b", "d", "a", "d", "d", "b", "c", "c", "d", "c"]; // 輸入

var Y = _.countBy(X);

console.log(Y); // 輸出: { b: 2, d: 4, a: 1, c: 3 }

2. _.pairs

功能:

• 將對象中的屬性與屬性值轉化爲鍵值對數組

實例:

var X = {
    b: 2,
    d: 4,
    a: 1,
    c: 3
}; // 輸入

var Y = _.pairs(X);

console.log(Y); // 輸出: [ [ 'b', 2 ], [ 'd', 4 ], [ 'a', 1 ], [ 'c', 3 ] ]

3. _.sortBy

功能:

• 對數組中的元素進行排序；對於二維數組，能夠根據某一列的元素值進行排序。

實例:

var X = [
    ['b', 2],
    ['d', 4],
    ['a', 1],
    ['c', 3]
]; // 輸入

var Y = _.sortBy(X, 1); // 根據二維數組的第2列進行排序

console.log(Y); // 輸出: [ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ], [ 'd', 4 ] ]

4. _.pluck

功能:

• 獲取對象的某個屬性的Value列表；或者獲取二維數組中的某一列

實例:

var X = [
    ['a', 1],
    ['b', 2],
    ['c', 3],
    ['d', 4]
]; // 輸入

var Y = _.pluck(X, 0); // 獲取二維數組的第1列

console.log(Y); // 輸出: [ 'a', 'b', 'c', 'd' ]

5. _.chain

功能:

• 將多個Underscore函數連接起來完成計算任務

var X = ["b", "d", "a", "d", "d", "b", "c", "c", "d", "c"]; // 輸入

var Y = _.chain(X)
    .countBy() // 對數組元素進行計數
    .pairs()   // 將對象轉化爲二維數組
    .sortBy(1) // 根據二維數組的第2列元素進行排序
    .pluck(0)  // 獲取二維數組的第1列元素
    .value();  // 獲取計算結果

console.log(Y); // 輸出: [ 'a', 'b', 'c', 'd' ]

不少時候，須要使用多個Underscore函數來完成單個計算任務。相似於Linux中的管道，前一個函數的輸出是後一個函數的輸入，這時能夠經過使用_.chain將多個函數連接起來，最後使用_.value獲取計算結果。