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

提高开发技能的5个JS数组技巧

时间:2023-04-02 12:28:46 HTML

作者:GhaziKhanUp积极态度的人。本文已收录到GitHubhttps://github.com/qq44924588...,文章已分类,也整理了很多我的文档和教程资料。大家都说简历里没项目可写,所以给大家找了一个项目,还给了一个【搭建教程】。在前端开发中,array是经常用到的一种数组结构。今天,我将介绍5个处理数组的技巧,希望能给大家带来一些启发和帮助。事不宜迟,让我们开始吧。1.随机排列在开发者中,有时候我们需要重新打乱数组的顺序。JS没有提供数组随机排序的方法。下面是一个随机排序的方法:functionshuffle(arr){vari,j,temp;对于(i=arr.length-1;i>0;i--){j=Math.floor(Math.random()*(i+1));温度=arr[i];arr[i]=arr[j];arr[j]=温度;}returnarr;}2.唯一值在开发者中,我们经常需要过滤重复值。下面介绍几种过滤数组中重复值的方法。使用Set对象使用Set()函数,该函数处理单个值数组。对于嵌套在数组中的对象值来说不是一个好的选择。constnumArray=[1,2,3,4,2,3,4,5,1,1,2,3,3,4,5,6,7,8,2,4,6];//使用Array.from方法Array.from(newSet(numArray));//使用扩展方法[...newSet(numArray)]使用Array.filter使用filter方法,我们可以过滤作为对象的元素.constdata=[{id:1,name:'Lemon'},{id:2,name:'Mint'},{id:3,name:'Mango'},{id:4,name:'Apple'},{id:5,name:'Lemon'},{id:6,name:'Mint'},{id:7,name:'Mango'},{id:8,name:'Apple'},]functionfindUnique(data){returndata.filter((value,index,array)=>{if(array.findIndex(item=>item.name===value.name)===index){返回值;}})}3。使用loadsh的lodash方法import{uniqBy}from'lodash'constdata=[{id:1,name:'Lemon'},{id:2,name:'Mint'},{id:3,name:'Mango'},{id:4,name:'Apple'},{id:5,name:'Lemon'},{id:6,name:'Mint'},{id:7,name:'Mango'},{id:8,name:'Apple'},]functionfindUnique(data){returnuniqBy(data,e=>{returne.name})}3.通过属性对对象数组进行排序我们知道,JS数组中的sort方法是按照字典顺序排序的,所以对于string类,这个方法可以很好的工作,但是对于数据元素是对象类型,就是不太好用,这里我们需要定制一个排序方式。在比较函数中,我们会根据以下条件返回值:小于0:A在B之前大于0:B在A之前等于0:A和B保持不变constdata=[{id:1,名称:'柠檬',类型:'水果'},{id:2,名称:'薄荷',类型:'蔬菜'},{id:3,名称:'芒果',类型:'谷物'},{id:4,name:'Apple',type:'fruit'},{id:5,name:'Lemon',type:'vegetable'},{id:6,name:'Mint',类型:'fruit'},{id:7,name:'Mango',type:'fruit'},{id:8,name:'Apple',type:'grain'},]functioncompare(a,b)函数比较{//使用toLowerCase()忽略字符大小写consttypeA=a.type.toLowerCase();consttypeB=b.type.toLowerCase();让比较=0;如果(类型A>类型B){比较=1;}elseif(typeAitem.name==='Apple')//value={id:4,name:'Apple'}【三通】人才是小智一直分享的最大的动机。本博客如有错误或建议,欢迎留言。最后谢谢大家的观看。代码部署后可能存在的bug,无法实时获知。事后为了解决这些bug,花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文:https://codewithghazi.com/jav...每周更新交流文章。可以微信搜索【大千世界】第一时间阅读,回复【福利】还有很多前端视频等着你。本文在GitHub上https://github.com/qq449245884/xiaozhi已收录,欢迎Star。