了解lodash和常用方法总结(个人经验)

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 的模块化方法 非常适用于：

1. 遍历 array、object 和 string 对
2. 值进行操作和检测
3. 创建符合功能的函数

四、常用语法

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)

以上代码执行后，将会输出
dtstack_iswonderful~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]