位置: IT常识 - 正文

JavaScript数组(四):判断数组相等的4种方法

编辑:rootadmin
JavaScript数组(四):判断数组相等的4种方法 文章目录前言循环比较toStringjoinJSON.stringify当数组元素是空元素、null、undefined时null 和 undefined空元素总结前言

推荐整理分享JavaScript数组(四):判断数组相等的4种方法,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

在JavaScript中,数组本质上是一种特殊的对象,它的类型值会返回 object。 如果我们需要比较两个数组是否相等,不能像比较基本类型(String、Number、Boolean等)一样,使用 === (或 ==) 来判断,所以如果要比较数组是否相等,需要使用一些特殊方法。关于JS类型的判断,可见博文 typeof使用详解。

本文总结了几种数组比较的方法,方便我们碰到类似问题时能快速处理:

循环比较toString方法join方法JSON.stringify

需要说明的,这里只针对数组元素为原始类型(String、Number、Boolean)的情况。 如果数据元素是复杂类型,如Object、Function等等,则无法通过这些方法进行简单比较了,需要另行特殊处理。而且当存在这类复杂类型时,比较数组是否相等已经意义不大,本文不做讨论。

这也是关于数组的第四篇博文,前面三篇如下:

JavaScript数组(一):类型、判断、索引与length属性 JavaScript数组(二):创建方式、构造函数、空元素与in运算符 JavaScript数组(三):类数组对象

循环比较

使用循环的方法一一比较数组元素的值,可能是我们最先能想到的方式。 循环比较大概可分为两种方式,一种是使用 for、while 等循环语句,相对简单,如下代码所示:

const arr1 = [1, 2, 3], arr2 = [1, 2, 3]// 需要判断两个数组长度arr1.length === arr2.length// 一一比较元素值,有一个不相等就不等for (let i = 0; i < arr1.length; i++) { if (arr2[i] !== arr2[i]) { return false }}

另外一种就是使用数组的循环类实例方法,如 foreach、map 等处理数组循环的实例方法,和使用 for 语句较类似,同样能达到目的。 而使用 every、some、filter 等这类实例方法,则代码实现上会更简单一些,如下所示:

const arr1 = [1, 2, 3], arr2 = [1, 2, 3]// 使用everyarr1.length === arr2.length && arr1.every((v,i) => v === arr2[i])// 使用somearr1.length === arr2.length && !arr1.some((v, i) => v !== arr2[i])// 使用filterarr1.length === arr2.length && arr1.filter((v, i) => v !== arr2[i]).length === 0// 使用find和findIndexarr1.length === arr2.length && arr1.findIndex((v, i) => v !== arr2[i]) === -1

当我们进行循环相关的比较的时候,都使用的是严格相等 ===,会先判断类型是否相等。 但如果需要忽略元素类型时,可以使用 ==,这样,会自动对数组元素进行类型转换后再比较,如 true == 1 会成立。

toString

toString 方法是Object类型对象的实例方法,而JS中Object是几乎所有类型的基类,所以其他类型都能调用该方法。(null和undefined例外,没有实例方法。) toString方法的作用是返回一个对象的字符串形式,这里,我们用它来返回数组的字符串形式的数据。

[1,2,3].toString() // '1,2,3'

以上代码,就是返回数组 [1,2,3] 的字符串形式,以逗号分给元素组成字符串数据,返回的 '1,2,3'。 如果数组元素是复杂类型,如Object对象,则toString返回的结果将不同:

[1,2,{}].toString() // '1,2,[object Object]'

这里toString方法对 {} 直接返回的是 [object Object]。

鉴于此,我们比较数组元素为原始类型的数组时,可以如下这样使用:

[1,2,3].toString() === [1, 2, 3].toString() // true

需要注意的是,如果数组元素为数字的字符串形式,结果也是相同的:

['1', 2, 3].toString() // '1,2,3'[1,2,3].toString() === ['1', 2, 3].toString() // truejoinJavaScript数组(四):判断数组相等的4种方法

join 方法是数组的一个实例方法。 它有一个可选参数,可以作为分隔符,以该分隔符分隔所有数组元素组成字符串数据返回,如果不加参数,默认是以逗号分割。 通过join方法的用法,我们就能知道,如果不提供分隔符的参数,它对数组所起的作用看上去和 toString 方法几乎一样。

[1,2,3].join() === [1, 2, 3].join() // true[1,2,3].join() === ['1', '2', '3'].join() //true

当然,也可以添加分隔符,效果是一样的,如使用空字符:

[1,2,3].join('') // '123'[1,2,3].join('') === ['1', '2', '3'].join('') //true

由上可知,既然join不带参数和toString方法几乎一样,那它们互相之间的比较,本质上都是数组转换成逗号分隔的字符串,所以也是相等的:

[1, '2', true].join() === [1, '2', true].toString() // true[1, '2', true].toString() === [1, '2', true].join() // trueJSON.stringify

JSON.stringify 用于将一个对象或值转换成JSON字符串,如果是数组,一般会这样转换:

JSON.stringify([1, '2', true]) // '[1,"2",true]'

利用这个特点,我们就能通过它进行数组的常规比较:

[1, 2, 3] === [1, 2, 3] // falseJSON.stringify([1, 2, 3]) === JSON.stringify([1, 2, 3]) // trueJSON.stringify([1, '2', true]) === JSON.stringify([1, '2', true]) // true

需要注意的是,JSON.stringify处理字符串是转换结果会带双引号:

JSON.stringify(['1']) // '["1"]'JSON.stringify(['1']) === '["1"]' // trueJSON.stringify(['1']) === '[\'1\']' // false

关于JSON.stringify方法更多的知识,可查看博文 JSON使用详解。

当数组元素是空元素、null、undefined时

以上介绍的数组元素的类型都是原始类型(String、Number、Boolean),但数组元素还可以是另外三种特殊情况:空元素、null、undefined,接下来将简单介绍下出现这三种情况时的比较方式。

null 和 undefined

当使用 JSON.stringify 方法时,空元素、null、undefined这三种类型的元素都会被转换成 null 字符串值,可以很好的判断:

JSON.stringify([1, '2', true, , null, undefined]) // '[1,"2",true,null,null,null]'JSON.stringify([1, '2', true, , null, undefined]) === JSON.stringify([1, '2', true, , null, undefined]) // true

toString 和 join 方法较类似,他们会把这三种类型的值都转换成空字符:

[1, '2', true, , null, undefined].join() // '1,2,true,,,'[1, '2', true, , null, undefined].toString() // '1,2,true,,,'[1, '2', true, , null, undefined].toString() === [1, '2', true, , null, undefined].join() // true

当我们使用上面介绍的第一种循环数组元素的方法进行比较时,null和undefined只需要注意它们两种类型的值是否相等:

null == undefined // truenull === undefined // false

使用严格相等比较的时候,这两种类型不相等。

空元素

数组元素是空元素时,使用循环方式处理,则会有一些不一样,主要和数组的空元素的特点有关:

数组通过下标读取空元素时,返回undefined。当使用 for、while、for-of、find、findIndex 等语法时,空元素会返回 undefined 值;undefined值能被比较,所以这时候进行数组元素比较时,结果是正确的。当使用数组实例方法循环如 forEach、map、every、some、filter 等方法时,空元素会被跳过;由于值被跳过,在使用这些方式进行数组元素比较时,结果可能是错误的。const arr1 = [1, 2, , 3], arr2 = [1, 2, 2, 3]arr1.length === arr2.length && arr1.every((v, i) => v === arr2[i]) // truearr1.length === arr2.length && arr1.filter((v, i) => v !== arr2[i]).length === 0 // truearr1.length === arr2.length && !!arr1.find((v, i) => v !== arr2[i]) // falsearr1.length === arr2.length && arr1.findIndex((v, i) => v !== arr2[i]) === -1 // false

以上代码,数组arr1有一个空元素,与数组arr2的元素并不相同,但是我们使用 every 和 filter 比较得到的值为 true,这显然是不对的;而使用 find 和 findIndex 比较结果为 false ,是正确的。

总结

以上四类数组比较的方式,依据我测试的结果,速度上,循环方式中的 for 语法是最快的,而且该方式还能正确比较空元素、null、undefined三种特殊情况,综合上看使用for循环是最佳选择。

第一种循环类方式,性能表现整体优于另外三种方式。 join方法比toString方法更耗时。 如果数据量不是很大,这几种方式耗时可能都在0.1ms以内,几乎可以忽略。

最后,我们总结下以上内容,主要介绍了四种能够比较常规数组(数组为原始数据类型)是否相等的四种方式。也介绍了当数组元素是另外三种特殊情况(空元素、null、undefined)时,上面介绍的四种比较方式是否有效。当然,如果数组元素是复杂数据类型如Object、Function等则比较无意义,不在本文讨论范围内。

本文链接地址:https://www.jiuchutong.com/zhishi/299464.html 转载请保留说明!

上一篇:【YOLOv7】Python基于YOLOv7的人员跌倒检测系统(源码&部署教程&数据集)(python yolo)

下一篇:在Vue3项目中使用VueCropper裁剪组件(裁剪及预览效果)(vue项目使用rem)

  • 关于网上赚钱的注意事项(关于网上赚钱的作文)

    关于网上赚钱的注意事项(关于网上赚钱的作文)

  • 微信群退出来后怎么恢复(微信群退出去了怎么还能接收到消息)

    微信群退出来后怎么恢复(微信群退出去了怎么还能接收到消息)

  • vega6相当于什么显卡(vega6 graphics相当于什么显卡)

    vega6相当于什么显卡(vega6 graphics相当于什么显卡)

  • 淘宝换绑手机号显示已注册(淘宝换绑手机号需要原手机号验证码吗)

    淘宝换绑手机号显示已注册(淘宝换绑手机号需要原手机号验证码吗)

  • 拼多多删除好友对方还有吗(拼多多删除好友后对方里面还有吗)

    拼多多删除好友对方还有吗(拼多多删除好友后对方里面还有吗)

  • 最小生成树和最短路径的区别(最小生成树和最小支撑树)

    最小生成树和最短路径的区别(最小生成树和最小支撑树)

  • 传输介质的性能指标主要包括(传输介质性能最好的是)

    传输介质的性能指标主要包括(传输介质性能最好的是)

  • 苹果手机突然卡机,也关不了机怎么办(苹果手机突然卡死了关机也关不了)

    苹果手机突然卡机,也关不了机怎么办(苹果手机突然卡死了关机也关不了)

  • kindle可以干什么(kindle可以干啥)

    kindle可以干什么(kindle可以干啥)

  • iphone尚未备份是什么意思(iphone尚未备份是点好还是续费分)

    iphone尚未备份是什么意思(iphone尚未备份是点好还是续费分)

  • 微信怎么找回账单(微信怎么找回账号)

    微信怎么找回账单(微信怎么找回账号)

  • 剪辑电影用什么软件(剪辑电影用什么电脑)

    剪辑电影用什么软件(剪辑电影用什么电脑)

  • 苹果xs是单卡还是双卡(苹果xs是单卡?)

    苹果xs是单卡还是双卡(苹果xs是单卡?)

  • vivo手机取消自动锁屏(vivo手机取消自动美化图片)

    vivo手机取消自动锁屏(vivo手机取消自动美化图片)

  • 小米手环1怎么重启(小米手环1怎么绑定手机)

    小米手环1怎么重启(小米手环1怎么绑定手机)

  • 微软雅黑可以商用吗(微软雅黑商用授权)

    微软雅黑可以商用吗(微软雅黑商用授权)

  • 手机焦距一般多大(手机焦距范围)

    手机焦距一般多大(手机焦距范围)

  • 小爱同学怎么设置网易云(小爱同学怎么设置自定义对话)

    小爱同学怎么设置网易云(小爱同学怎么设置自定义对话)

  • qq发送的文件在哪个文件夹(qq发送的文件在手机哪个文件夹)

    qq发送的文件在哪个文件夹(qq发送的文件在手机哪个文件夹)

  • 多多果园互动留言怎么删掉(多多果园互助群最新2020年8月)

    多多果园互动留言怎么删掉(多多果园互助群最新2020年8月)

  • 搜索历史怎么彻底清除吗(怎么彻底清除搜索历史)

    搜索历史怎么彻底清除吗(怎么彻底清除搜索历史)

  • 小米9se nfc怎么复制门禁卡(小米9senfc怎么用门禁卡)

    小米9se nfc怎么复制门禁卡(小米9senfc怎么用门禁卡)

  • Win11引入4种桌面窗口布局 满足用户在不同场景使用(win11怎么用win10界面)

    Win11引入4种桌面窗口布局 满足用户在不同场景使用(win11怎么用win10界面)

  • RedHat Linux 5安装手册(redhat5.6安装)

    RedHat Linux 5安装手册(redhat5.6安装)

  • 没有成本发票怎么缴纳企业所得税
  • 个体户文化事业建设费征收范围
  • 发票认证没有信用怎么办
  • 企业购买土地如何做账
  • 企业退回企业所得税分录
  • 跨区经营怎么交税
  • 收到政府补助的固定资产的账务处理
  • 税后利润再投资
  • 新公司成立前期人员配置
  • 未分配利润可以转盈余公积吗
  • 小规模转为一般纳税人最新规定
  • 案例分析建筑业差额征税如何进行账务处理?
  • 资产折旧摊销扣什么税
  • 个税手续费返还计入哪个科目
  • 营改增后房地产开发税费一览表
  • 财务负责人必须是本公司员工吗
  • 保险公司代收车船税完税证明在哪里打印
  • 酒店预收款是什么意思
  • 银行中间业务能开具增值税专票吗
  • 收到税务局信息
  • 以前年度损益申报怎么报所得税
  • win10 专业版 企业版
  • 公司自建办公楼
  • 苹果系统的声音
  • 银行结算账户的种类
  • 小规模纳税人没有进项税
  • phpfread
  • 开具增值税发票哪些情形不用交税?
  • 施工单位代建收费标准
  • 残保金的会计处理
  • vue路由实现
  • 广告代理费收取比例
  • 红字专用发票是红色的吗
  • java开源二次开发平台
  • opencv几何变换
  • 联营企业和合营企业是什么意思
  • react避免子组件更新
  • 分公司二季度安全生产分析会内容
  • 全年一次性奖金单独计税还是并入
  • 公司法关于公司变更后权利义务的规定
  • 年度一次性奖励扣税
  • three.js gui
  • 帝国cms源码
  • 企业所得税年报更正申报怎么操作
  • 企业车辆年检费多少钱
  • 公司福利可以发现金吗
  • sql server基本
  • 出售无形资产科目
  • ce认证所需的模块有哪些
  • 用友软件数据导出
  • 留存收益怎么做
  • 应付账款从质保金扣除
  • 福利费的进项税额可以抵扣吗
  • 收银电脑怎么录商品
  • 提交免税申请
  • 待抵扣进项税额什么意思
  • 企业中的消费环境分析
  • 跨年度费用如何计算
  • 会计怎么做的
  • 安全升级
  • Linux下Mysql5.7.19卸载方法
  • 提升英语
  • windows8怎么用
  • 用户请愿地址曝露怎么办
  • windows中常用的菜单有哪三个
  • linux shell 函数参数
  • linux apache 启动
  • js继承的关键字
  • easyui datagrid resize
  • Android游戏开发读后感
  • python2.7多进程
  • nodejs实战
  • Unity 管理www类访问的写法
  • unity破解安装教程
  • js检测类型的方法
  • javascript获取数据
  • jquery移动版
  • linux中安装python的工具包
  • 上饶二手房契税
  • 个人所得税的通知
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设