lodash学习资料

Lodash是一个具有一致接口、模块化、高性能等特性的 JavaScript 工具库。它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数,其中部分是目前 ECMAScript 尚未制定的规范,但同时被业界所认可的辅助函数。目前每天使用 npm 安装 Lodash 的数量在百万级以上,这在一定程度上证明了其代码的健壮性,值得我们在项目中一试。

 

 

2.1、下载

cdn引用地址:https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js

 

2.2、安装

浏览器:

用npm:

Nodejs:

 

2.3、模块组成

Lodash 提供的辅助函数主要分为以下几类,函数列表和用法实例请查看 Lodash 的官方文档:

Array,适用于数组类型,比如填充数据、查找元素、数组分片等操作

Collection,适用于数组和对象类型,部分适用于字符串,比如分组、查找、过滤等操作

Function,适用于函数类型,比如节流、延迟、缓存、设置钩子等操作

Lang,普遍适用于各种类型,常用于执行类型判断和类型转换

Math,适用于数值类型,常用于执行数学运算

Number,适用于生成随机数,比较数值与数值区间的关系

Object,适用于对象类型,常用于对象的创建、扩展、类型转换、检索、集合等操作

Seq,常用于创建链式调用,提高执行性能(惰性计算)

String,适用于字符串类型

lodash/fp 模块提供了更接近函数式编程的开发方式,其内部的函数经过包装,具有immutable、auto-curried、iteratee-first、data-last(官方介绍)等特点

 

2.4、Lodash快速入门实例

 

for 语句是执行循环的不二选择,Array.apply 也可以模拟循环,但在上面代码的使用场景下,_.times() 的解决方式更加简洁和易于理解。

示例:

结果:

 

 

_.map 方法是对原生 map 方法的改进,其中使用 pets[0].name 字符串对嵌套数据取值的方式简化了很多冗余的代码,非常类似使用 jQuery 选择 DOM 节点 ul > li > a,对于前端开发者来说有种久违的亲切感。

示例:

结果:

 

 

在上面的代码中,我们要创建一个初始值不同、长度为 6 的数组,其中 _.uniqueId 方法用于生成独一无二的标识符(递增的数字,在程序运行期间保持独一无二),_partial 方法是对 bind 的封装。

示例:

结果:

 

 

 

JavaScript 没有直接提供深拷贝的函数,但我们可以用其他函数来模拟,比如 JSON.parse(JSON.stringify(objectToClone)),但这种方法要求对象中的属性值不能是函数。Lodash 中的 _.cloneDeep 函数封装了深拷贝的逻辑,用起来更加简洁。

示例:

结果:

 

 

Lodash 的随机数生成函数更贴近实际开发,ECMAScript 的随机数生成函数是底层必备的接口,两者都不可或缺。此外,使用 _.random(15, 20, true) 还可以在 15 到 20 之间生成随机的浮点数。

示例:

 

结果:

 

 

 

_.assign 是浅拷贝,和 ES6 新增的 Ojbect.assign 函数功能一致(建议优先使用 Object.assign)。

示例:

结果:

 

 

 

大多数情况下,Lodash 所提供的辅助函数都会比原生的函数更贴近开发需求。在上面的代码中,开发者可以使用数组、字符串以及函数的方式筛选对象的属性,并且最终会返回一个新的对象,中间执行筛选时不会对旧对象产生影响。

_.pick 是 _.omit 的相反操作,用于从其他对象中挑选属性生成新的对象。

示例:

 

结果:

 

 

 

_.sample 支持随机挑选多个元素并返回新的数组。

示例:

结果:

 

 

 

如果你在使用 JSON.parse 时没有预置错误处理,那么它很有可能会成为一个定时炸弹,我们不应该默认接收的 JSON 对象都是有效的。try-catch 是最常见的错误处理方式,如果项目中 Lodash,那么可以使用 _.attmpt 替代 try-catch 的方式,当解析 JSON 出错时,该方法会返回一个 Error 对象。

随着 ES6 的普及,Lodash 的功能或多或少会被原生功能所替代,所以使用时还需要进一步甄别,建议优先使用原生函数。

 

2.5、更多功能

 

1) _.map(collection, [iteratee=_.identity], [thisArg])

 作用:创建一个经过 iteratee 处理的集合中每一个元素的结果数组. iteratee 会传入3个参数:(value, index|key, collection). 

 别名(Aliases):_.collect

 参数1): 需要遍历的集合,可以是数组,对象或者字符串.

 参数2): 迭代器,可以是函数,对象或者字符串.

 参数3): 迭代器中this所绑定的对象.

 返回值(Array): 映射后的新数组.

 示例:

2) _.chunk(array, [size=1])

 作用:将 array 拆分成多个 size 长度的块,把这些块组成一个新数组。 如果 array 无法被分割成全部等长的块,那么最后剩余的元素将组成一个块.

 参数1): 需要被处理的数组.

 参数2): 每个块的长度.

 返回值(Array): 返回一个包含拆分块数组的新数组(相当于一个二维数组).

 示例:

3) _.compact(array)

 作用:创建一个新数组并包含原数组中所有的非假值元素。例如 falsenull、 0""undefined 和 NaN 都是“假值”.

 参数: 需要被过滤的数组.

 返回值(Array): 过滤假值后的数组.

 示例:

4) _.difference(array, [values])

 作用:创建一个差异化后的数组,不包括使用 SameValueZero 方法提供的数组.

 参数1): 需要处理的数组.

 参数2): 数组需要排除掉的值.

 返回值(Array): 过滤后的数组.

 示例:

5) _.drop(array, [n=1])

 作用:将 array 中的前 n 个元素去掉,然后返回剩余的部分.

 参数1): 被操作的数组.

 参数2): 去掉的元素个数.

 返回值(Array): 数组的剩余部分.

 示例:

6)_.dropRight(array, [n=1])

 作用:将 array 尾部的 n 个元素去除,并返回剩余的部分.

 参数1): 需要被处理的数组.

 参数2): 去掉的元素个数.

 返回值(Array): 数组的剩余部分.

 示例:

7)_.dropRightWhile(array, [predicate=_.identity], [thisArg])

 作用:从尾端查询(右数)数组 array ,第一个不满足predicate 条件的元素开始截取数组.

 参数1): 需要查询的数组.

 参数2): 迭代器,可以是函数,对象或者字符串.

 参数3): 对应 predicate 属性的值.

 返回值(Array): 截取元素后的数组.

 示例:

 8)_.pluck(collection, path)

 作用:抽取集合中path所指定的路径的属性值.

 参数1): 需要抽取的数组.

 参数2): 需要抽取的属性所对应的路径.

 返回值(Array): 抽取的属性值所组成的数组.

 示例:

9)_.fill(array, value, [start=0], [end=array.length])

 作用:使用 value 值来填充(也就是替换) array,从start位置开始, 到end位置结束(但不包含end位置).

 参数1): 需要填充的数组.

 参数2): 填充 array 元素的值.

 参数3): 起始位置(包含).

 参数4): 结束位置(不含).

 返回值(Array): 填充后的数组.

 示例:

10)_.findIndex(array, [predicate=_.identity], [thisArg])

 作用:该方法类似 _.find,区别是该方法返回的是符合 predicate条件的第一个元素的索引,而不是返回元素本身. 

 参数1): 需要搜索的数组.

 参数2): 迭代器,可以是函数,对象或者字符串.

 参数3): 对应 predicate 属性的值.

 返回值(Number): 符合查询条件的元素的索引值, 未找到则返回 -1.

 示例:

11)_.find(collection, [predicate=_.identity], [thisArg])

 作用:遍历集合中的元素,返回最先经 predicate 检查为真值的元素. predicate 会传入3个元素:(value, index|key, collection).

 参数1): 要检索的集合,可以是数组,对象或者字符串.

 参数2): 迭代器,可以是函数,对象或者字符串.

 参数3): 迭代器中this所绑定的对象.

 返回值: 匹配元素,否则返回 undefined.

 示例:

 12)_.forEach(collection, [iteratee=_.identity], [thisArg])

 作用:调用 iteratee 遍历集合中的元素, iteratee 会传入3个参数:(value, index|key, collection)。 如果显式的返回 false ,iteratee 会提前退出.

 参数1): 需要遍历的集合,可以是数组,对象或者字符串.

 参数2): 迭代器,只能是函数.

 参数3): 迭代器中this所绑定的对象.

 返回值: 遍历后的集合.

 示例:

13)_.reduce(collection, [iteratee=_.identity], [accumulator], [thisArg])

 作用:通过 iteratee 遍历集合中的每个元素. 每次返回的值会作为下一次 iteratee 使用。如果没有提供accumulator,则集合中的第一个元素作为 accumulator. iteratee 会传入4个参数:(accumulator, value, index|key, collection).

 参数1): 需要遍历的集合,可以是数组,对象或者字符串.

 参数2): 迭代器,只能是函数.

 参数3): 累加器的初始化值.

 参数4): 迭代器中this所绑定的对象.

 返回值: 累加后的值.

 示例:

14)_.some(collection, [predicate=_.identity], [thisArg])

 作用:通过 predicate 检查集合中的元素是否存在任意真值的元素,只要 predicate 返回一次真值,遍历就停止,并返回 true. predicate 会传入3个参数:(value, index|key, collection).

 参数1): 需要遍历的集合,可以是数组,对象或者字符串.

 参数2): 迭代器,可以是函数,对象或字符串.

 参数3): 迭代器中this所绑定的对象.

 返回值: 如果任意元素经 predicate 检查都为真值,则返回true,否则返回 false.

 示例:

15)_.chain(value)

 作用:创建一个包含 value 的 lodash 对象以开启内置的方法链.方法链对返回数组、集合或函数的方法产生作用,并且方法可以被链式调用.

 参数: 需要被包裹成lodash对象的值.

 返回值: 新的lodash对象的实例.

 示例:

原文链接:https://www.cnblogs.com/xiongshuangping/p/10100900.html

原创文章,作者:优速盾-小U,如若转载,请注明出处:https://www.cdnb.net/bbs/archives/4887

(0)
上一篇 2022年7月30日 22:07
下一篇 2022年7月30日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

优速盾注册领取大礼包www.cdnb.net
/sitemap.xml