当前位置: 首页 > Web前端 > JavaScript

lodash常用方法及应用场景

时间:2023-03-26 21:33:13 JavaScript

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()方法可以限制一个函数在短时间内被调用多次,即只调用最后一次一个是在指定时间连续输入值时取(只要输入暂停时间不超过指定值就不会执行)并返回一个新的函数。它有两个参数:要限制的功能和以毫秒为单位的延迟时间。constdebounceFunc=_.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()方法可以限制一个函数在一段时间内只能调用一次time,以指定值作为时间节点,当小于当前时间时,取上次触发的值,返回一个新的函数。它有两个参数:要限制的函数和以毫秒为单位的时间间隔。constthrottleFunc=_.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()方法可以深度复制一个对象或数组,并返回一个新的对象或数组。constcloneDeepObj={a:{b:{c:1}}};constnewObj=_.cloneDeep(cloneDeepObj);newObj.a.b.c=2;console.log(cloneDeepObj.a.b.c,newObj.a.b.c,'cloneDeep-cloneDeep-cloneDeep-cloneDeep');5_.pick():pick()方法可以从一个对象中选择指定的属性并返回一个新的对象。constpickObj={a:1,b:2,c:3};constnewPickObj=_.pick(pickObj,['a','c']);console.log(newPickObj,'pick-pick-pick-pick');6_.omit():omit()方法可以从对象中排除指定属性并返回一个新对象constomitObj={a:1,b:2,c:3};constnewOmitObj=_.omit(omitObj,['b']);console.log(newOmitObj,'omit-omit-omit-omit');7_.flattenDeep():flatten()方法可以展开嵌套数组放入一维数组constflattenArr=[1,[2,[3,[4]],5]];constnewFlattenArr=_.flattenDeep(flattenArr);console.log(newFlattenArr,'flattenDeep-flattenDeep-flattenDeep-flattenDeep');8_.initial():移除数组的最后一个元素constinitialArr=[{a:1},{a:2}]console.log(_.initial(initialArr),'initial-initial-initial-initial')9_.isEqual():进行深度比较,判断两个值是否相等。经常需要比较两个表单数据是否相等来判断用户是否修改了数据varobject={'a':1,b:1};varother={'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():检查字符串是否以给定的目标字符串结尾。验证文件类型:上传文件时,经常需要验证文件类型是否符合要求。如果文件名以特定字符串结尾,则可以判断文件类型是否正确。处理URL:使用URL进行页面跳转或发送请求时,有时需要检查URL是否以固定字符串结尾,以确定跳转到哪个页面或发送到哪个服务器。console.log(_.endsWith('abc/v','bc/v'),'endsWith-endsWith-endsWith')12_.escape():转义字符串“&”,“<”,“>”,'"'、"'"、"`"字符是HTML实体字符,当用户在表单中输入文本时,我们需要检查文本中是否包含HTML实体,如果包含则需要进行转义以防止恶意脚本注入,当我们向页面渲染数据时,需要对其中包含的HTML实体进行转义,避免将实体解析为HTML标签。console.log(_.escape(''),'escape-escape-escape-escape')13_.zipObject():它接受2个数组,第一个数组中的值用作属性名,第二个数组中的值用作值作为相应的属性值。当后端避免创建较少的字段时,前端给表赋值时需要属性名,所以前端可以定义属性名,并使用该方法形成对象,方便取值[{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]},]constfrontArr=['A','B','C','D','E','F','G','H','我','G','K'];constbackendArr=[1,2,3,4,5,6,7,8,9,10,11];console.log(_.zipObject(frontArr,backendArr),'zipObject-zipObject-zipObject-zipObject')14_.truncate():截断字符串,如果字符串超过限制的最大值。截断的字符串将被省略替换,默认为“...”。当我们需要在UI中显示一些较长的字符串时,通常需要截断它们以适合显示区域consttruncateStr=_.truncate('hi-diddly-hothere,neighborino',{'length':24,//截断长度//'separator':'',//根据哪个字符截断,//'omission':'[...]'//截断后显示内容});console.log(truncateStr,'truncateStr-truncateStr-truncateStr')15_.merge():_.merge和_.assign都是合并对象的函数,只是合并策略不同。_.merge递归地将源对象的属性合并到目标对象上。如果目标对象中存在相同的属性名,则使用源对象的属性值覆盖目标对象的属性值。_.assign只是将源对象的所有属性合并到目标对象上。如果源对象和目标对象具有相同的属性名称,则源对象的属性值将被目标对象的属性值覆盖。如果有多个源对象具有相同的属性,则后面的源对象的属性值会覆盖前面的源对象和目标对象的属性值。因此,相对于_.assign,_.merge更适合处理复杂的对象嵌套情况,可以递归合并对象。而_.assign更适合简单的对象合并,并且有覆盖,后面对象的属性会覆盖前面对象的属性。varobject={'a':[{'b':2},{'d':4},{'f':6}]};varother={'a':[{'c':3},{'e':5},{f:7}]};安慰。日志(_。合并(对象,其他))控制台。日志(_。分配(对象,其他))