摘要: Underscore是一個輕量級的JavaScript庫,提供了許多很是實用的函數。熟練使用Underscore能夠更快地寫出更簡潔的代碼。本文將經過一個簡單的編程實例,介紹幾個經常使用的Underscore函數。git
GitHub地址:github
做者: KiwenLau數組
日期: 2016-09-18函數
輸入數據是一個數組: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函數。
功能:
對數組中的元素進行計數
實例:
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 }
功能:
將對象中的屬性與屬性值轉化爲鍵值對數組
實例:
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 ] ]
功能:
對數組中的元素進行排序;對於二維數組,能夠根據某一列的元素值進行排序。
實例:
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 ] ]
功能:
獲取對象的某個屬性的Value列表;或者獲取二維數組中的某一列
實例:
var X = [ ['a', 1], ['b', 2], ['c', 3], ['d', 4] ]; // 輸入 var Y = _.pluck(X, 0); // 獲取二維數組的第1列 console.log(Y); // 輸出: [ 'a', 'b', 'c', 'd' ]
功能:
將多個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獲取計算結果。