Underscore實例教程

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

GitHub地址:github

圖片描述

一. 編程實例

輸入數據是一個數組:ui

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

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

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

所以,輸出結果是:對象

[ '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獲取計算結果。

相關文章
相關標籤/搜索