这篇文章主要为大家展示了“JavaScript数组常见操作有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“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){returnArray.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);//方法三[...x]//方法四functiontoArray(x){letres=[]for(itemofx){res.push(item)}returnres}//方法五Array.apply(null,x)//方法六[].concat.apply([],x)

方法五和六本质上都是利用了 apply 的特点,即传给 apply 的第二个参数(数组或者类数组)会被转换为一个参数列表,这些参数再送到调用的方法(new Array 或者 concat)中。

数组去重

数组去重,本质上都需要比较两个元素是否相等,如果相等,则抛弃一个元素。为了准确地判断,这里统一使用 Object.is 进行比较。

1)利用 set 去重

set 要求元素不重复,因此将数组转换为 set 之后就可以去重了,接着再转换回数组即可。

functionunique(arr){returnArray.from(newSet(arr))//return[...newSet(arr)]}2)双重循环 + splice

外层循环遍历所有元素,里层循环遍历当前元素往后的所有元素,若发现相等则利用 splice 移除掉一个。记得里层循环每次要回退一格,否则会遗漏掉某些元素

functionunique(arr){for(leti=0;i<arr.length;i++){for(letj=i+1;i<arr.length;j++){if(Object.is(arr[i],arr[j])){arr.splice(j,1)j--}}}returnarr}3)新建数组 + includes

新建数组,每次往数组中添加元素之前都检查数组中是否已有该元素:

functionunique(arr){constres=[]arr.forEach((item,index)=>{//也可以if(res.indexOf(item)==-1),但是无法正确判断NaNif(!res,includes(item)){res.push(item)}})}4)reduce + includes

functionunique(arr){returnarr.reduce((acc,cur)=>{//returnacc.includes(cur)?acc:acc.concat(cur)returnacc.includes(cur)?acc:[...acc,cur]},[])}5)新建数组 + sort

根据 sort 的机制(在每个元素上调用 toStrng,之后在字符串层面进行排序),让相等的元素聚集在一起。新建数组,每次往数组中添加元素之前都检查该元素是否等于前面的元素,是则属于重复元素:

functionunique(arr){arr.sort()constres=[arr[0]]for(leti=1;i<arr.length;i++){if(!Object.is(arr[i],arr[i-1])){res.push(arr[i])}}returnres}6)新建数组 + 利用对象属性

这种方法其实和“新建数组 + includes”一样。新建数组,每次往数组中添加元素之前都检查该元素是否已经作为对象的属性:

//对象属性值可以认为是元素重复的次数functionunique(arr){constres=[]constobj={}arr.forEach((item,index)=>{if(!obj[item]){res.push(item)obj[item]=1}else{obj[item]++}})returnres}

这里检测的是对象的属性名,而属性名本质上是一个字符串,因此会认为 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

去掉重复的元素,换个角度来理解就是保留那些索引等于第一次出现时的索引的元素,这样的元素可以用 filter 筛选出来,放到一个数组中:

functionunique(arr){returnarr.filter((item,index)=>index===arr.indexOf(item))}

使用 indexOf 的缺点是无法正确判断 NaN。

以上是“JavaScript数组常见操作有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!