关于lodash:lodash常用方法及应用场景
lodashLodash是一个风行的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))