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