总结分享JavaScript数组常见操作

相关推荐：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数组常见操作的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！