### [拥抱 Underscore.js 的温暖](https://www.prosaas.cn/article/7139)

**Published:** 2023-08-28T06:53:09

**Author:** 5201314

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

![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212125751198.jpg)

随着 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 Tuts = \[{name : 'NetTuts', niche : 'Web Development'}, {name : 'WPTuts', niche : 'WordPress'}, {name : 'PSDTuts', niche : 'PhotoShop'}, {name : 'AeTuts', niche : 'After Effects'}\];
> 
> 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
> 
> ### 默认值
> 
> 当您需要创建具有合理默认值的对象（而创建对象时可能不会使用该默认值）时，此方法非常有用。
> 
> var tuts = { NetTuts : 'Web Development'};
> var defaults = { NetTuts : 'Web Development', niche: 'Education'};
> 
> \_.defaults(tuts, defaults);
> 
> console.log(tuts);
> 
> // Object { NetTuts="Web Development", niche="Education"}
> 
> * * *
> 
> ## 函数
> 
> 尽管听起来很奇怪，Underscore 的函数可以作用于函数。大多数函数在这里解释起来往往相当复杂，因此我们将看一下最简单的函数。
> 
> ### 绑定
> 
> `this` 是 JavaScript 中难以捉摸的一部分，往往会让很多开发人员感到非常困惑。此方法旨在使其更容易解决。
> 
> var o = { greeting: "Howdy" }, 
> 	f = function(name) { return this.greeting +" "+ name; };
> 
>   var greet = \_.bind(f, o); 
> 
>   greet("Jess")
> 
> 这有点令人困惑，所以请留在这儿。绑定函数基本上让您无论何时何地调用该函数都可以保留 `this` 的值。
> 
> 当您使用 `this` 被劫持的事件处理程序时，这特别有用。
> 
> * * *
> 
> ## 实用程序
> 
> 为了进一步提高交易的吸引力，Underscore 提供了大量的实用函数。由于我们的时间已经不多了，所以让我们看看重要的事情。
> 
> ### 模板化
> 
> 已经有大量的模板解决方案，但 Underscore 的解决方案因其实现相当小而功能相当强大而值得一看。
> 
> 让我们看一个快速示例。
> 
> var data =   {site: 'NetTuts'}, template =   'Welcome! You are at <%= site %>';
> 
> var parsedTemplate = \_.template(template,  data );
> 
> console.log(parsedTemplate);
> 
> // Welcome! You are at NetTuts
> 
> 首先，我们创建数据来填充模板，然后创建模板本身。默认情况下，Underscore 使用 ERB 样式分隔符，尽管这是完全可自定义的。
> 
> 有了这些，我们就可以简单地调用 `template` 来传递我们的模板和数据。我们将结果存储在一个单独的字符串中，以便稍后根据需要用于更新内容。
> 
> 请记住，这是 Underscore 模板的极其简单的演示。您可以使用  分隔符在模板内使用任何 JavaScript 代码。当您需要迭代复杂的对象（例如 JSON 源）时，您可以与 Underscore 出色的集合函数配合来快速创建模板。
> 
> * * *
> 
> ## 仍然不相信你应该选择这个
> 
> > jQuery 和 Underscore 齐头并进。
> 
> 不不不，你们都错了！如果说有什么不同的话，那就是 jQuery 和 Underscore 相辅相成，齐头并进。真的！
> 
> 看，jQuery 在一些事情上做得非常好。其中最主要的是 DOM 操作和动画。它不涉及较高或较低级别的任何内容。如果像 Backbone 或 Knockout 这样的框架处理更高级别的问题，那么 Underscore 可以解决所有相对裸机的问题。
> 
> 从更广泛的角度来看，jQuery 在浏览器之外没有什么用途，因为它的大部分功能都与 DOM 相关。另一方面，下划线可以在浏览器或服务器端使用，没有任何问题。事实上，Underscore 依赖它的 Node 模块数量最多。
> 
> 好了，今天就讲到这里。考虑到 Underscore 的范围，我们在这里仅仅触及了皮毛。请务必查看更多图书馆内容，如果您有任何疑问，请在下面的评论中告诉我。非常感谢您的阅读！

以上就是拥抱 Underscore.js 的温暖的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** dom, JavaScript, jquery, JS, json, map, mvc, prototype, Python, ruby

**Categories:** WordPress

---