乐趣区

关于lodash:lodash常用方法及应用场景

jiezi

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))
退出移动版