文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript数组常见操作技巧有哪些

2023-06-29 02:04

关注

这篇文章主要介绍“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数组常见操作技巧有哪些”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网行业资讯频道,小编每天都会为大家更新不同的知识点。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯