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的第二个参数（数组或者类数组）会被转换为一个参数列表，这些参数再送到调用的方法（newArray或者concat）中。

数组去重数组去重，本质上都需要比较两个元素是否相等，如果相等，则抛弃一个元素。

为了准确地判断，这里统一使用Object.is进行比较。

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

functionunique(arr){returnArray.from(newSet(arr))//return[...newSet(arr)]}2）双重循环+splice外层循环遍历所有元素，里层循环遍历当前元素往后的所有元素，若发现相等则利用splice移除掉一个。

记得里层循环每次要回退一格，否则会遗漏掉某些元素functionunique(arr){for(leti=0;i3）新建数组+includes新建数组，每次往数组中添加元素之前都检查数组中是否已有该元素：functionunique(arr){constres=[]arr.forEach((item,index)=>{//也可以if(res.indexOf(item)==-1)，但是无法正确判断NaNif(!res,includes(item)){res.push(item)}})}4）reduce+includesfunctionunique(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;i6）新建数组+利用对象属性这种方法其实和“新建数组+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。

总结以上就是与数组有关的一些基本操作方法总结。

~~本文完，感谢阅读！~学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！大家好，我是〖编程三昧〗的作者隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！