拥抱 Underscore.js 的温暖

随着 JavaScript 慢慢移出浏览器，出现了一些可以显着提高 JavaScript 稳健性的工具。

其中一个工具称为 Underscore.js，这就是我们今天要介绍的工具。让我们开始吧！

认识 Underscore.js

那么Underscore到底是做什么的？

Underscore 是一个 JavaScript 实用工具库，它提供了许多您在 Prototype.js（或 Ruby）中所期望的函数式编程支持，但没有扩展任何内置 JavaScript 对象。

块引用>

使用 Python 或 Ruby 工作的好处之一是像 map 这样的奇特结构，它让生活变得更加轻松。遗憾的是，当前版本的 JavaScript 在低级实用程序方面相当简陋。

正如您在上面所读到的，Underscore.js 是一个漂亮的小型 JavaScript 库，它以仅 4kb 的大小带来了数量惊人的功能。

下划线的实际应用

“关于图书馆的废话已经够多了”，我能听到你说。你是对的！在我继续我的大喊大叫之前，让我们先看看 Underscore 的运行情况。

假设您有一组随机的测试分数，并且您需要一个包含 90+ 分数的列表。您通常会写这样的内容：

var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42],
topScorers = [], scoreLimit = 90;

for (i=0; i<=scores.length; i++)
{
if (scores[i]>scoreLimit)
{
topScorers.push(scores[i]);
}
}

console.log(topScorers);

它非常简单，即使进行了优化，对于我们想要做的事情来说也相当冗长。

让我们看看接下来可以使用 Underscore 实现什么目标。

var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42],
topScorers = [], scoreLimit = 90;

topScorers = _.select(scores, function(score){ return score > scoreLimit;});

console.log(topScorers);

我不了解你，但我只是有一种书呆子气。这是一些令人难以置信的简洁和可读的代码。

很好，但我真的需要这个吗？

嗯，这完全取决于您想要做什么。如果您对 JavaScript 的使用仅限于玩弄 DOM，那么答案大多是否定的，因为 jQuery 可以完成您想做的大部分事情。

是的。

另一方面，如果您正在处理非 DOM 代码甚至复杂代码，请考虑 MVC、前端代码，Underscore 绝对是一个福音。

虽然该库公开的一些功能正在慢慢进入 ECMA 规范，但它并非在所有浏览器中都可用，并且让您的代码跨浏览器工作本身就是另一个噩梦。 Underscore 为您提供了一组很好的抽象，可以在任何地方使用。

如果您是一个以性能为导向的人（您应该如此），Underscore 会回退到本机实现（如果可用），以确保性能尽可能最佳。

开始使用

只需在此处获取源代码，将其包含在您的页面中即可。

如果您期待一个大型的设置过程，那么您将会非常失望。只需在此处获取源代码，将其包含在您的页面中即可。

Underscore 在全局范围内通过单个对象创建并公开其所有功能。该对象是标题下划线字符 _。

如果您想知道，是的，这与 jQuery 使用美元 [$] 符号的方式非常相似。就像 jQuery 一样，您可以重新映射此字符，以防遇到冲突。或者，如果您像我一样对波形符有一种非理性的喜爱。

函数式还是面向对象？

虽然该库的官方营销宣传声称它添加了函数式编程支持，但实际上还有另一种做事方式。

让我们以之前的代码为例：

var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90;

topScorers = _.select(scores, function(score){ return score > scoreLimit;});

console.log(topScorers);

上面的方法是功能性或程序性方法。您还可以使用更直接、可能更明显的面向对象方法。

var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90;

topScorers = _(scores).select(function(score){ return score > scoreLimit;});

console.log(topScorers);

没有真正的“正确”方法来做事，但请记住，您可以使用后一种方法链接 jQuery 式方法。

检查功能

Underscore 提供了 60 多个函数，涵盖了多种功能。从本质上讲，它们可以分为几组功能，这些功能运行于：

收藏
数组
对象
函数
实用程序

让我们看看每个部分的作用，如果适用，每个部分中我最喜欢的一两个。

集合

集合可以是数组，也可以是对象，如果我在语义上是正确的，则可以是 JavaScript 中的关联数组。

Underscore提供了很多对集合进行操作的方法。我们之前看到了 select 方法。这里有一些更非常有用的。

采摘

假设您有一个包含键值对的漂亮小数组，并且您想从每个数组中提取一个特定的属性。有了 Underscore，一切就轻而易举了。

var Tuts = [{name : \’NetTuts\’, niche : \’Web Development\’}, {name : \’WPTuts\’, niche : \’WordPress\’}, {name : \’PSDTuts\’, niche : \’PhotoShop\’}, {name : \’AeTuts\’, niche : \’After Effects\’}];
var niches = _.pluck(Tuts, \’niche\’);

console.log(niches);

// [\”Web Development\”, \”WordPress\”, \”PhotoShop\”, \”After Effects\”]

使用 pluck 就像传入目标对象或数组以及选择哪个属性一样简单。在这里，我只是提取每个网站的利基市场。

地图

Map 从集合创建一个数组，其中每个元素都可以通过函数进行变异或以其他方式更改。

让我们以前面的示例为例并对其进行一些扩展。

var names = _(Tuts).pluck(\’name\’).map(function (value){return value + \’+\’});

console.log(names);

// [\”NetTuts+\”, \”WPTuts+\”, \”PSDTuts+\”, \”AeTuts+\”]

由于我注意到名称末尾缺少加号，因此我将它们添加到提取的数组中。

这里您不仅限于简单的串联。您可以根据自己的意愿随意修改传递的值。

全部

all 如果您需要检查集合中的每个值是否满足特定条件，则非常有用。例如，检查学生是否通过了每个科目。

var Scores = [95, 82, 98, 78, 65];
var hasPassed = _(Scores).all(function (value){return value>50; });

console.log(hasPassed);

// true

数组

Underscore 有很多专门处理数组的函数，这是非常受欢迎的，因为与其他语言相比，JavaScript 提供的处理数组的方法非常少。

Uniq

此方法基本上解析数组并删除所有重复元素，只为您提供唯一元素。

var uniqTest = _.uniq([1,5,4,4,5,2,1,1,3,2,2,3,4,1]);

console.log(uniqTest);

// [1, 5, 4, 2, 3]

当您解析巨大的数据集并需要清除重复项时，这非常方便。请记住，仅计算元素的第一个实例，因此保留原始顺序。

范围

一种非常方便的方法，可让您创建“范围”或数字列表。让我们看一个超级简单的例子。

var tens = _.range(0, 100, 10);

console.log(tens);

// [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]

该方法的参数依次为起始值、结束值和步长值。如果您想知道，使用负步长值会导致递减范围。

交叉路口

此方法将两个数组相互比较，并返回在所有传递的数组中找到的元素列表，即集合论中的交集。

让我们扩展前面的示例来看看它是如何工作的。

var tens = _.range(0, 100, 10), eights = _.range(0, 100, 8), fives = _.range(0, 100, 5);

var common = _.intersection(tens, eights, fives );

console.log(common);

// [0, 40, 80]

很简单，对吧？您只需传入要比较的数组列表，Underscore 就会完成剩下的工作。

对象

除了预期的 is 检查之外，Underscore 还提供了各种方法来克隆、扩展和其他操作对象。

这是我最喜欢的一些。

键和值

有一个巨大的对象，您只需要键或只需要值？使用 Underscore 真是太简单了。

var Tuts = { NetTuts : \’Web Development\’, WPTuts : \’WordPress\’, PSDTuts : \’PhotoShop\’, AeTuts : \’After Effects\’};
var keys = _.keys(Tuts), values = _.values(Tuts);

console.log(keys + values);

// NetTuts,WPTuts,PSDTuts,AeTutsWeb Development,WordPress,PhotoShop,After Effects