前言
前端开发中，我们时常需要对数据进行操作和处理。underscore.js 是一款 JavaScript 工具库，提供了许多强大且易于使用的函数，可以简化 JavaScript 开发中的许多常见任务。它可以完美地扩展 JavaScript 原生 API，提高代码的可读性和可维护性。
在本篇教程中，我们将详细介绍如何使用 npm 包 underscore.js，包括安装、常用函数使用以及实例演示，帮助你加深对 underscore.js 的了解和运用。
安装
在使用 underscore.js 之前，需要先安装 npm 包。在终端执行以下命令即可：
npm install underscore
安装完成后，在 JavaScript 中通过以下方式引用：
var _ = require('underscore');常用函数
each
each 函数遍历集合中的每个元素，将每个元素传递给迭代函数，函数的返回值不影响原集合。语法如下所示：
_.each(list, iterator, [context])
list(Array/Object)：要迭代的集合iterator(Function)：迭代函数，用来处理集合中的每个元素context(Object)：[可选]函数中this的上下文对象
示例：
_.each([1, 2, 3], function(num) {
console.log(num);
});
// 输出：
// 1
// 2
// 3map
map 函数将集合中的每个元素都调用给定的函数进行转换，并返回转换后的新集合。语法如下所示：
_.map(list, iterator, [context])
list(Array/Object)：要迭代的集合iterator(Function)：迭代函数，用来处理集合中的每个元素context(Object)：[可选]函数中this的上下文对象
示例：
_.map([1, 2, 3], function(num) {
return num * 3;
});
// 输出：[3, 6, 9]reduce
reduce 函数将集合中的所有元素通过迭代器函数进行迭代，并将它们逐个累加成一个单个的值。语法如下所示：
_.reduce(list, iterator, memo, [context])
list(Array/Object)：要迭代的集合iterator(Function)：迭代函数，用来处理集合中的每个元素memo(Any)：表示归约累加器的初始值context(Object)：[可选]函数中this的上下文对象
示例：
_.reduce([1, 2, 3], function(memo, num){ return memo + num; }, 0);
// 输出结果：6filter
filter 函数通过检查每个项来创建一个新的数组，其中包含所有传递函数返回 true 的元素。语法如下所示：
_.filter(list, iterator, [context])
list(Array/Object)：要迭代的集合iterator(Function)：迭代函数，用来处理集合中的每个元素context(Object)：[可选]函数中this的上下文对象
示例：
_.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
// 输出结果：[2, 4, 6]find
find 函数返回集合的第一项，它满足所提供的测试功能。语法如下所示：
_.find(list, predicate, [context])
list(Array/Object)：要迭代的集合predicate(Function / Object / String)：用于测试每个元素是否符合要求的谓词函数 / 属性匹配器 / 值context(Object)：[可选]函数中this的上下文对象
示例：
var even = _.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
console.log(even);
// 输出结果：2sortBy
sortBy 函数通过指定一个排序依据重新排序集合。语法如下所示：
_.sortBy(list, iterator, [context])
list(Array/Object)：要迭代的集合iterator(Function / String)：迭代函数或属性名称，用来计算每个值的排序依据context(Object)：[可选]函数中this的上下文对象
示例：
-- -------------------- ---- ------- --- ------------ - - ------ ----------- ---- ---- ------ ------- ---- ---- ------ --------- ---- --- -- --- ---------- - ---------------------- ------- ------------------------ -- ----- -- - -- ------ ----------- ---- ---- -- ------ ------- ---- ---- -- ------ --------- ---- --- -- -
实例演示
下面是一个将数组中的偶数元素都加倍的实例演示。
-- -------------------- ---- ------- --- - - ---------------------- --- ------- - --- -- -- -- -- --- -------------------- --------- --- ----------- - ----------------- -------------- ------ --- - - -- -- --- -------------------- ------------- --- ------- - ------------------ -------------- ------ --- - -- --- -------------------- --------- --- ----- - ----------------- -------------- ----- ------ ---- - ---- -- --- ------------------ -------
最后的输出结果为：
原始数组： [1, 2, 3, 4, 5, 6] 偶数数组： [2, 4, 6] 加倍数组： [4, 8, 12] 总和： 24
总结
underscore.js 提供了许多强大且易于使用的函数，可以大大简化 JavaScript 开发中的许多常见任务。在本篇教程中，我们介绍了其常用函数的使用方法，并通过一个实例演示了如何使用 underscore.js 对数组进行加倍处理。希望这篇文章能够帮助您更好地学习和使用 underscore.js。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/81288