lodash 官网中文文档 https://www.lodashjs.com/
参考 : https://blog.csdn.net/weixin_34248023/article/details/94043179?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-4.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-4.control
https://blog.csdn.net/Embrace924/article/details/80757854?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control
一、简介
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
首先要明白的是lodash的所有函数都不会在原有的数据上进行操作,而是复制出一个新的数据而不改变原有数据。类似immutable.js的理念去处理。
二、安装
浏览器环境:
<script src="lodas`在这里插入代码片`h.js"></script>
通过 npm:
$ npm i -g npm
$ npm i --save lodash
Node.js:
// Load the full build.
var _ = require('lodash');
// Load the core build.
var _ = require('lodash/core');
// Load the FP build for immutable auto-curried iteratee-first data-last methods.
var fp = require('lodash/fp');
// Load method categories.
var array = require('lodash/array');
var object = require('lodash/fp/object');
// Cherry-pick methods for smaller browserify/rollup/webpack bundles.
var at = require('lodash/at');
var curryN = require('lodash/fp/curryN');
三 、为什么选择 Lodash ?#
Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于:
- 遍历 array、object 和 string 对
- 值进行操作和检测
- 创建符合功能的函数
四、常用语法
4.1 cloneDeep
在介绍cloneDeep之前,先介绍一下clone。顾名思义即克隆,
在项目中经常会有一些复杂的多层嵌套的Object。例如:一个页面有多个图表需要用到基础的option进行配置,那么可以声明一个baseOptions,在使用时只需要cloneDeep(baseOptions)即可,类似与继承extends的思想。
4.2 uniq 数组去重。(将数组中的对象去重,只能是数组去重,不能是对象去重。)
该函数创建一个去重后的array数组副本。
使用uniq函数
这跟介绍的第二个函数compact有很好的配合作用。(后端接口传来的数据很多是有重复或者空值的,这时候就可以使用两个函数来过滤数据。ladash只是最基础的库,其实可以将几个函数封装起来组件自己的库。)
很明显,该方法是一个比较简单的去重函数,在应对对象时并不那么有效。这时候,就有一个升级版的uniqBy函数,即uniqBy 函数。
使用uniqBy函数
该函数很好的去重了数据中重复的对象。这两个函数在去重中有较好的表现。
4.3 uniqueId
顾名思义,这个函数会返回一个唯一值,即ID。
let uniqueIDs = uniqueId();
console.log(uniqueIDs);// => 1
在第一次执行该函数时,返回为1,第二次返回为2,以此类推,刷新页面重新计数。
那么这么一个函数在实际项目中如何应用呢?在项目开发初期,需要用到大量假数据的时候,可以用这个函数来创建。
let testData = new Array(10);
for (let i = 0, maxLength = testData.length; i < maxLength; i++) {
testData[i] = {
id:uniqueId()
}
}
console.table(testData);
4.4 truncate
该函数可以截断string字符串,如果字符串超出了限定的最大值,那么就会截断字符串,并且用omission替代,默认的omission为’…’。 结合ToolTip,可以在展示数据时很方便的处理数据。
{truncate(value,{length:10})}
如此一来,就可以对字符串进行截断。PS:这里的length并不是字符串长度,具体是什么请同学们试用过就知道啦。
效果如图所示
4.5 stubObject
该函数返回一个空对象。该函数和times函数结合具有奇效
let testData = times(10, stubObject);
console.log(testData)
执行以上代码将输出
[{},{},{},{},{},{},{},{},{},{}]
再结合上刚才介绍的uniqueId函数,技能更加方便的生成假数据了.
4.6 chain
顾名思义,该函数的使用方法像链式开发一样;而文档中如此说明:创建一个lodash包装实例,包装value以启用显式链模式。要解除链必须使用_#value方法。
let strA = ['dtstack','is','wonderful'];
let strb = ['dtstack','is','perfect'];
let result = chain(strA).concat(strb).uniq().join('~').value();
console.log(result)
以上代码执行后,将会输出
dtstackiswonderful~perfect
chain函数首先会对value值进行一个包装,创建一个lodash的实例。以上代码中,lodash创建了一个数组实例,值得一提的是,concat,uniq等函数无需import。因为lodash创建的数组实例自带lodash的数组方法,而接下来的数组组合去重拼接为字符串等方法用链式开发的思想,对数组进行处理,最后需要用.value()方法对去链式,不然输出的就是lodash的实例了。
4.7 chunk
const arr = [1,2,3,4,5,6,7,8,9];
_.chunk(arr,2);
// =>[[1,2],[3,4],[5,6],[7,8],[9]]
这个函数把数组按照一定的长度分开,返回新的数组。(片段化数组)
4.8 compact 去除假值。(将所有的空值,0,NaN过滤掉)
_.compact(['1','2',' ',0])
// => ['1','2']
对应的还有一个数组去重函数,这在实际的开发中很有作用。
4.9 filter和reject 过滤集合,传入匿名函数。(二者放在一起讨论的原因是,两个函数类似但返回的值是相反。)
_.filter([1,2],x => x = 1)
// => [1]
_.reject([1,2],x => x=1)
// => [2]
这两个过滤器,第二个参数值是false的时候返回是reject的功能,相反是true的时候是filter。
4.10 join 将 array 中的所有元素转换为由 separator 分隔的字符串。
_.join(['a', 'b', 'c'], '~');
// => 'a~b~c'
4.11 _.drop , _.dropRight(常用) 本来是可以删除第一个元素,现在扩展成删除指定数量的元素,官网demo完整,直接用啦,dropRight和drop功能和用法一样,只是方向不同
_.drop([1, 2, 3]);
// => [2, 3]
_.drop([1, 2, 3], 2);
// => [3]
_.drop([1, 2, 3], 5);
// => []
_.drop([1, 2, 3], 0);
// => [1, 2, 3]
4.12.fill (常用) 等价与splice方法,但是更智能,默认是全部替换
@para1 目标数组
@para2 替换目标值
@para3 开始下标(可选)
@para4 结束下标(可选)
var array = [1, 2, 3];
_.fill(array, 'a');
console.log(array);
// => ['a', 'a', 'a']
_.fill(Array(3), 2);
// => [2, 2, 2]
_.fill([4, 6, 8, 10], '*', 1, 3);
// => [4, '*', '*', 10]