lodash常用方法及应用场景

lodash

Lodash是一个流行的JavaScript实用工具库，提供了对JavaScript常见任务的高效和模块化的实现，使开发者可以更容易地编写高质量、可维护和可读性强的代码。Lodash库提供了大量的函数，如数组处理、字符串操作、对象处理、函数式编程、日期处理等功能，可以大大提高开发效率。
Lodash库的特点包括：
高效的性能：Lodash的实现是经过优化的，可以有效地提高JavaScript应用程序的性能。
模块化的架构：Lodash的函数被组织成了模块，可以根据需要选择加载，而不是一次性加载整个库。
简洁易懂的API：Lodash提供了简洁易懂的API，可以轻松地完成常见的任务，减少了开发者的代码量。
支持链式调用：Lodash的函数支持链式调用，可以方便地进行函数组合和操作。

1 _.groupBy(): groupBy()方法可以将一个集合中的元素按照指定的属性分组，并返回一个对象。它接受两个参数：要遍历的集合和一个属性名。

console.log(
    _.groupBy([{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 25 }], 'age'),
    'groupBy-groupBy-groupBy-groupBy-groupBy'
)

2 _.debounce(): 防抖 debounce()方法可以限制一个函数在短时间内多次调用，就是在规定时间连续输入时只取最后一次的值（只要输入时停顿的时间不超过规定值那么就不会执行）并返回一个新的函数。它接受两个参数：要限制的函数和延迟时间（以毫秒为单位）。

const debounceFunc = _.debounce((num) => console.log(num), 1000);
// debounceFunc('0')
// setTimeout(() => {debounceFunc('300')}, 300)
// setTimeout(() => {debounceFunc('500')}, 500)
// setTimeout(() => {debounceFunc('1000')}, 1000)
// setTimeout(() => {debounceFunc('1500')}, 1500)
// setTimeout(() => {debounceFunc('2600')}, 2600)

3 _.throttle():节流 throttle()方法可以限制一个函数在一段时间内只能调用一次，

以规定数值为一个时间节点，当小于当前时间时取最后触发的值，
并返回一个新的函数。它接受两个参数：要限制的函数和时间间隔（以毫秒为单位）。

const throttleFunc = _.throttle((num) => console.log(num), 1000);
// throttleFunc(0); // 第一次调用
// setTimeout(() => { throttleFunc(500) }, 500);
// setTimeout(() => { throttleFunc(600) }, 600);
// setTimeout(() => { throttleFunc(1000) }, 1000);
// setTimeout(() => { throttleFunc(1500) }, 1500);
// setTimeout(() => { throttleFunc(1600) }, 1600);

4 _.cloneDeep(): cloneDeep()方法可以深度复制一个对象或数组，返回一个新的对象或数组。

const cloneDeepObj = { a: { b: { c: 1 } } };
const newObj = _.cloneDeep(cloneDeepObj);
newObj.a.b.c = 2;
console.log(cloneDeepObj.a.b.c, newObj.a.b.c, 'cloneDeep-cloneDeep-cloneDeep-cloneDeep');

5 _.pick(): pick()方法可以从一个对象中选择指定的属性，并返回一个新的对象。

const pickObj = { a: 1, b: 2, c: 3 };
const newPickObj = _.pick(pickObj, ['a', 'c']);
console.log(newPickObj, 'pick-pick-pick-pick');

6 _.omit(): omit()方法可以从一个对象中排除指定的属性，并返回一个新的对象

const omitObj = { a: 1, b: 2, c: 3 };
const newOmitObj = _.omit(omitObj, ['b']);
console.log(newOmitObj, 'omit-omit-omit-omit');

7 _.flattenDeep(): flatten()方法可以将一个嵌套的数组展开成一个一维数组

const flattenArr = [1, [2, [3, [4]], 5]];
const newFlattenArr = _.flattenDeep(flattenArr);
console.log(newFlattenArr, 'flattenDeep-flattenDeep-flattenDeep-flattenDeep');

8 _.initial():去除数组array中的最后一个元素

const initialArr = [{ a: 1 }, { a: 2 }]
console.log(_.initial(initialArr), 'initial-initial-initial-initial')

9 _.isEqual():执行深比较来确定两者的值是否相等。经常需要比较两个表单数据是否相等，以便判断用户是否修改了数据

var object = { 'a': 1, b: 1 };
var other = { 'a': 1, 'b': 1 };
console.log(_.isEqual(object, other), 'isEqual-isEqual-isEqual-isEqual')

10 _.camelCase():转换字符串为驼峰一般前端命名驼峰，而后端接口返回的 JSON 数据中可能采用下划线格式。为了方便操作这些数据，需要将属性名转换为驼峰格式。

console.log(_.camelCase('foo_bar'), 'camelCase-camelCase-camelCase-camelCase')

11 _.endsWith():检查字符串string是否以给定的target字符串结尾。验证文件类型：在上传文件的时候，常常需要验证文件的类型是否符合要求，如果文件名以特定的字符串结尾，那么就可以判断文件类型是否正确。处理URL：在使用URL进行页面跳转或者发送请求时，有时需要检查URL是否以某个固定的字符串结尾，以此来确定需要跳转到哪个页面或者发送到哪个服务器。

console.log(_.endsWith('abc/v', 'bc/v'), 'endsWith-endsWith-endsWith')

12 _.escape():转义string中的 "&", "<", ">", '"', "'", 和 "`" 字符为HTML实体字符。当用户在表单中输入文本时，我们需要检查文本是否包含 HTML 实体，如果包含则需要进行转义，以防止恶意脚本的注入。当我们将数据渲染到页面上时，需要将其中包含的 HTML 实体转义，以避免将实体当成 HTML 标签来解析。

console.log(_.escape('<script src="./loadsh"></script>'), 'escape-escape-escape-escape')

13 _.zipObject():它接受2个数组，第一个数组中的值作为属性名，第二个数组中的值作为相应的属性值。当后端为了避免少建字段时，前端给table赋值时又需要属性名，那么可以前端定义属性名使用这种方式组成对象方便取值

[
    {
        name:'xxxx',
        sum:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
    },
    {
        name:'yyyy',
        sum:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
    },
]

const frontArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'G', 'K'];
const backendArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
console.log(_.zipObject(frontArr, backendArr), 'zipObject-zipObject-zipObject-zipObject')

14 _.truncate():截断string字符串，如果字符串超出了限定的最大值。 被截断的字符串后面会以 omission 代替，omission 默认是 "..."。当我们需要在 UI 中显示一些过长的字符串时，通常需要将其截断以适应显示区域

const truncateStr = _.truncate('hi-diddly-ho there, neighborino', {
    'length': 24,//截断长度
    // 'separator': ' ',//根据哪个字符截断，
    // 'omission': ' [...]'//截断之后显示内容
});
console.log(truncateStr, 'truncateStr-truncateStr-truncateStr')

15 _.merge():_.merge 和 _.assign 都是用于合并对象的函数，但它们的合并策略不同。

_.merge 将源对象的属性递归地合并到目标对象上。如果目标对象中有相同的属性名，则使用源对象的属性值覆盖目标对象的属性值。

_.assign 将所有源对象的属性简单地合并到目标对象上。如果源对象和目标对象有相同的属性名，则用源对象的属性值覆盖目标对象的属性值。如果有多个源对象有相同的属性，则后面的源对象的属性值会覆盖前面的源对象和目标对象的属性值。

因此，相比于 _.assign，_.merge 更适合处理复杂的对象嵌套情况，能够递归地合并对象。而 _.assign 更适合简单的对象合并，具有覆盖性，后面的对象的属性会覆盖前面的对象的属性。


var object = {
    'a': [{ 'b': 2 }, { 'd': 4 }, { 'f': 6 }]
};

var other = {
    'a': [{ 'c': 3 }, { 'e': 5 }, { f: 7 }]
};

console.log(_.merge(object, other))
console.log(_.assign(object, other))