JavaScript数组常见操作技巧
本文主要包括：
- 创建数组
- 判断是不是数组
- 类数组和数组的转换
- 数组去重
- 各位看官可根据自身需求选择食用。
一、创建数组
创建数组是基本功，其方法主要包括以下几种：
const arr = [1,2,3] // 数组字面量
const arr = [,,,] // 三元素空位数组（hole array）
const arr = new Array(4) // [,,,,]
const arr = new Array(4,2) // [4,2]
const arr = Array.of(1,2,3) // [1,2,3]其中，我们一般最常用的是数组字面量法。
二、判断是不是数组
判断是不是数组的方法主要有：
// 方法一
[1,2,3] instanceof Array
// 方法二
[1,2,3].constructor === Array
// 方法三
Object.prototype.toString.call([1,2,3]) === '[object Array]'
// 方法四
Array.isArray([1,2,3])
// 方法五（兼容写法）
function isArray(arr){
return Array.isArray ?
Array.isArray(arr):Object.prototype.toString.call(arr) === '[object Array]'
}一般最常用的应该是 isArray 方法。
三、类数组和数组的转换
我们有时碰到的数据结构不是纯数组，一般将其归类为“类数组”，类数组可以借助以下方法转为纯数组：
const x = document.querySelectorAll('a');
// 方法一
Array.prototype.slice.call(x);
// 方法二
Array.from(x);
Array.from(x,mapFn,thisArg);
// 方法三
[...x]
// 方法四
function toArray(x){
let res = []
for(item of x){
res.push(item)
}
return res
}
// 方法五
Array.apply(null,x)
// 方法六
[].concat.apply([],x)方法五和六本质上都是利用了 apply 的特点，即传给 apply 的第二个参数（数组或者类数组）会被转换为一个参数列表，这些参数再送到调用的方法（new Array 或者 concat）中。
四、数组去重
数组去重，本质上都需要比较两个元素是否相等，如果相等，则抛弃一个元素。为了准确地判断，这里统一使用 Object.is 进行比较。
1.利用 set 去重
set 要求元素不重复，因此将数组转换为 set 之后就可以去重了，接着再转换回数组即可。
function unique(arr){
return Array.from(new Set(arr))
// return [...new Set(arr)]
}
2.双重循环 + splice
外层循环遍历所有元素，里层循环遍历当前元素往后的所有元素，若发现相等则利用 splice 移除掉一个。记得里层循环每次要回退一格，否则会遗漏掉某些元素
function unique(arr){
for(let i = 0;i < arr.length;i++){
for(let j = i + 1;i < arr.length;j++){
if(Object.is(arr[i],arr[j])){
arr.splice(j,1)
j--
}
}
}
return arr
}3.新建数组 + includes
新建数组，每次往数组中添加元素之前都检查数组中是否已有该元素：
function unique(arr){
const res = []
arr.forEach((item,index) => {
// 也可以 if(res.indexOf(item) == -1)，但是无法正确判断 NaN
if(!res,includes(item)){
res.push(item)
}
})
}4.reduce + includes
function unique(arr){
return arr.reduce((acc,cur) => {
// return acc.includes(cur) ? acc : acc.concat(cur)
return acc.includes(cur) ? acc : [...acc,cur]
},[])
}5.新建数组 + sort
根据 sort 的机制（在每个元素上调用 toStrng，之后在字符串层面进行排序），让相等的元素聚集在一起。新建数组，每次往数组中添加元素之前都检查该元素是否等于前面的元素，是则属于重复元素：
function unique(arr){
arr.sort()
const res = [arr[0]]
for(let i = 1;i < arr.length;i++){
if(!Object.is(arr[i],arr[i-1])){
res.push(arr[i])
}
}
return res
}6.新建数组 + 利用对象属性
这种方法其实和“新建数组 + includes”一样。新建数组，每次往数组中添加元素之前都检查该元素是否已经作为对象的属性：
// 对象属性值可以认为是元素重复的次数
function unique(arr){
const res = []
const obj = {}
arr.forEach((item,index) => {
if(!obj[item]){
res.push(item)
obj[item] = 1
} else {
obj[item]++
}
})
return res
}这里检测的是对象的属性名，而属性名本质上是一个字符串，因此会认为 obj[true] 和 obj["true"] 是相等的，从而导致元素 true 或者元素 "true" 未能放入新数组中
7.利用 map
本质上和上面的方法是一样的，但是不需要新建数组：
function unique(arr){
let map = new Map()
for(item of arr){
if(!map.has(item)){
map.set(item,true)
}
}
return [...map.keys()]
}8.filter + indexOf
去掉重复的元素，换个角度来理解就是保留那些 索引 等于 第一次出现时的索引 的元素，这样的元素可以用 filter 筛选出来，放到一个数组中：
function unique(arr){
return arr.filter((item,index) => index === arr.indexOf(item))
}使用 indexOf 的缺点是无法正确判断 NaN。
到此这篇关于JavaScript 数组常见操作技巧的文章就介绍到这了,更多相关JavaScript 数组操作技巧内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
