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

JavaScript数组常用操作(一)

时间:2023-03-28 13:09:13 HTML

前言数组是JavaScript中常见的数据类型之一。我在这里简单记录和总结它的一些操作方法。这篇文章主要包括:创建一个数组,判断是否为类数组数组,并转换数组,对数组进行去重。读者可根据自己的需要选择食用。创建数组创建数组是一项基本功,其方法主要有以下几种:constarr=[1,2,3]//数组字面量constarr=[,,,]//三元空洞数组(holearray)constarr=newArray(4)//[,,,,]constarr=newArray(4,2)//[4,2]constarr=Array.of(1,2,3)//[1,2,3]其中,最常用的方法是数组字面量方法。判断是否为数组判断是否为数组的主要方法有://方法一[1,2,3]instanceofArray//方法二[1,2,3].constructor===Array//方法三Object.prototype.toString.call([1,2,3])==='[objectArray]'//方法四Array.isArray([1,2,3])//方法五(兼容写法)functionisArray(arr){返回Array.isArray?Array.isArray(arr):Object.prototype.toString.call(arr)==='[objectArray]'}一般最常用的方法应该是isArray。类数组与数组之间的转换我们有时会遇到不是纯数组的数据结构,一般都归类为“类数组”。类数组可以通过以下方法转换为纯数组:constx=document.querySelectorAll('a');//方法一Array.prototype.slice.call(x);//方法二Array.from(x);Array.from(x,mapFn,thisArg);//方法3[...x]//方法4函数toArray(x){letres=[]for(itemofx){res.push(item)}returnres}//方法五Array.apply(null,x)//方法六[].concat.apply([],x)方法五、六本质上是利用了apply的特性,即第二个参数(array或类数组)传递给apply将转换为参数列表,这些参数将被发送到调用方法(newArray或concat)。数组去重数组去重本质上需要比较两个元素是否相等,如果相等则丢弃一个元素。为了判断准确,这里统一使用Object.is进行对比。1)使用set去重set要求元素不重复,所以数组转成set后,可以去重,再转回数组。functionunique(arr){returnArray.from(newSet(arr))//return[...newSet(arr)]}2)双循环+拼接外循环遍历所有元素,内循环遍历当前元素对于后面的所有元素,如果发现相等,则使用splice去掉一个。记住内层循环每次需要回退一个空格,否则会漏掉一些元素functionunique(arr){for(leti=0;i{//alsoif(res.indexOf(item)==-1),但是不能正确判断NaNif(!res,includes(item)){res.push(item)}})}4)reduce+includesfunctionunique(arr){returnarr.reduce((acc,cur)=>{//返回acc.includes(cur)?acc:acc.concat(cur)returnacc.includes(cur)?acc:[...acc,cur]},[])}5)新建数组+排序根据排序的机制(对每个元素调用toStrng,然后在字符串级别排序),让相等的元素聚集在一起。创建一个新数组,并在向数组添加元素之前检查元素是否等于前一个元素。如果是,则为重复元素:functionunique(arr){arr.sort()constres=[arr[0]]for(leti=1;i{if(!obj[item]){res.push(item)obj[item]=1}else{obj[item]++}})返回res}这里检测到的是对象的属性名,属性名本质上是一个字符串,所以obj[true]和obj["true"]被认为是相等的,导致元素为true或者元素"true"失败放在新数组中7)map的使用和上面的方法基本一样,只是不需要新建数组:functionunique(arr){letmap=newMap()for(itemofarr){if(!map.has(item)){map.set(item,true)}}return[...map.keys()]}8)filter+indexOf去除重复元素,另一种方式理解就是让那些索引和第一次出现时的索引保持相等这样的elements可以通过filter过滤出来,放到一个数组中:functionunique(arr){returnarr.filter((item,index)=>index===arr.indexOf(item))}使用indexOf缺点是NaN无法正确判断。总结以上是对数组相关的一些基本操作方法的总结。~~本文到此结束,感谢阅读!~学习有趣的知识,认识有趣的朋友,塑造有趣的灵魂!大家好,我是〖编程三昧〗的作者王隐,我的公众号是《编程三昧》,欢迎关注,希望大家多多指教!