玖叶教程网

前端编程开发入门

JavaScript 数组常见操作(一)(js数组常用)

前言

数组是 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。

总结

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

~

~ 本文完,感谢阅读!

~

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言