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获取计算结果。