Js如何判断两个数组是否相等?


本文目录

  • 1、通过数组自带方法比较
  • 2、通过循环判断
  • 3、`toString()`
  • 4、`join()`
  • 5、`JSON.stringify()`


日常开发,时不时会遇到需要判定2个数组是否相等的情况,需要实现考虑的场景有:

  • 先判断长度,长度不等必然不等
  • 元素位置
  • 其他情况考虑
    • '1'1 (Object的key是字符串, Map的key没有限制)
    • NaN
    • nullundefined

1、通过数组自带方法比较

// 方式1
function isArrEqual1(arr1, arr2) {if (arr1.length !== arr2.length) {return false;}return arr1.every((v, i) => v === arr2[i]);// return !arr1.some((v, i) => v !== arr2[i]);// return arr1.filter((v, i) => v !== arr2[i]).length === 0;// return arr1.findIndex((v, i) => v !== arr2[i]) === -1;
}// 测试
const arr1 = [-2, "-1", 0, 0.1, 1, "2", "a", "", undefined, null],arr2 = [-2, "-1", 0, 0.1, 1, "2", "a", "", undefined, null];isArrEqual1(arr1, arr2); // true

数组自带的方法,比较适合的有:every、some、filter、findIndex

这种方式严格限制了数组元素长度、类型、位置必须一致。

注意包含NaN也无法比较!NaN是JS中唯一一个与自身不相等的存在!判断NaN是否属于同一个值得用Object.is(),如:Object.is(NaN, NaN); // true

2、通过循环判断

// 方式2
function isArrEqual2(arr1, arr2) {if (arr1.length !== arr2.length) {return false;}for (let i = 0; i < arr1.length; i++) {if (arr1[i] !== arr2[i]) {return false;}}return true;
}

这种判定方法限制及说明同上述方法1。

3、toString()

// 方式3
function isArrEqual3(arr1, arr2) {if (arr1.length !== arr2.length) {return false;}return arr1.toString() === arr2.toString();
}// 测试
isArrEqual3(arr1, arr2); // trueconst arr3 = ['', 1, null, undefined, {}, { a: 1 }, NaN, [], [2, 3], new Date()],arr4 = ['', "1", undefined, null, {}, { a: 2 }, NaN, [], [2, "3"], new Date()];isArrEqual3(arr3, arr4); // true

toString 方法是Object类型对象的实例方法,作用是返回一个对象的字符串形式。

这种方式限制了数组长度和元素位置,但是会发现有些元素类型没有严格限制,这是由于js本身进行的数据隐式转换!

在控制台查看通过toString转化后的数组,得到的结果如下:
在这里插入图片描述

此外,对数组、空数组、对象、空对象等引用类型,由于toString转换结果都是[object Object],所以在比较的时候都会判定为相等!

还有,需要注意:

null == undefined // true
null === undefined // false

4、join()

// 方式4
function isArrEqual4(arr1, arr2) {if (arr1.length !== arr2.length) {return false;}return arr1.join() === arr2.join();
}

join 方法是数组的一个实例方法,如果join这个方法如果不传如分割符,其实作用几乎和toString一样,所以实现效果和限制同toString。
在这里插入图片描述

5、JSON.stringify()

// 方式5 [推荐]
function isArrEqual5(arr1, arr2) {if (arr1.length !== arr2.length) {return false;}return JSON.stringify(arr1) === JSON.stringify(arr2);
}// 测试
isArrEqual5(arr1, arr2); // true
isArrEqual5(arr3, arr4); // falseconst arr5 = [undefined, null, "", {}, { a: 1 }, NaN, [], [2, 3], new Date()],arr6 = [undefined, null, "", {}, { a: 1 }, NaN, [], [2, 3], new Date()];isArrEqual5(arr5, arr6); // true

JSON.stringify 用于将一个对象或值转换成JSON字符串,转换后结果会带双引号。
在这里插入图片描述

从测试结果可以看到,这个比较方式也严格的限制了数组长度、元素位置和元素类型,在日常中比较推荐此种方案~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/695260.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring Boot中的@Scheduled注解:定时任务的原理与实现

1. 前言 本文将详细探讨Spring Boot中Scheduled注解的使用&#xff0c;包括其原理、实现流程、步骤和代码示例。通过本文&#xff0c;读者将能够了解如何在Spring Boot应用中轻松创建和管理定时任务。 2. Scheduled注解简介 在Spring框架中&#xff0c;Scheduled注解用于标记…

《Python 语音转换简易速速上手小册》第5章 音频数据处理(2024 最新版)

文章目录 5.1 音频数据的基本处理5.1.1 基础知识5.1.2 主要案例&#xff1a;音频剪辑工具案例介绍案例 Demo案例分析 5.1.3 扩展案例 1&#xff1a;自动音量调节器案例介绍案例 Demo案例分析 5.1.4 扩展案例 2&#xff1a;语音识别预处理案例介绍案例 Demo案例分析 5.2 使用 Py…

手把手教您安装2024最新版微信消息防撤回插件

文章目录 &#x1f4d6; 介绍 &#x1f4d6;&#x1f3e1; 环境 &#x1f3e1;&#x1f4d2; 使用方法 &#x1f4d2;&#x1f4dd; 步骤一&#x1f4dd; 步骤二 ⚓️ 相关链接 ⚓️ &#x1f4d6; 介绍 &#x1f4d6; 本文与大家分享一个大神开发的2024最新版本的微信消息防撤…

解决vite打包出现 “default“ is not exported by “node_modules/...问题

项目场景&#xff1a; vue3tsvite项目打包 问题描述 // codemirror 编辑器的相关资源 import Codemirror from codemirror;error during build: RollupError: "default" is not exported by "node_modules/vue/dist/vue.runtime.esm-bundler.js", impor…

修改Springboot默认序列化工具Jackson的配置

如果我们在Spring Boot应用中手动定义并注入了一个ObjectMapper Bean&#xff0c;那么这个自定义的ObjectMapper实例会替换掉Spring Boot默认配置的ObjectMapper。当Spring容器中存在多个同类型的Bean时&#xff0c;默认情况下最后一个创建的Bean将作为首选Bean&#xff08;如果…

Tomcat 学习之 Servlet

目录 1 Servlet 介绍 2 创建一个 Servlet 3 web.xml 介绍&#xff08;不涉及 filter 和 listener 标签&#xff09; 3.1 display-name 3.2 welcome-file-list 3.3 servlet 3.4 session-config 3.5 error-page 4 Tomcat 如何根据 URL 定位到 Servlet 5 执行 Servlet …

debezium源码之启动快照7步曲

欢迎收藏关注点赞&#xff0c; 持续输出CDC、debezium、flinkcdc内容&#xff0c;比心 代码仓库地址&#xff1a;https://github.com/debezium/debezium/blob/main/debezium-core/src/main/java/io/debezium/relational/RelationalSnapshotChangeEventSource.java 代码版本de…

不破不立,那些年错过的Python

随着OpenAI的发展&#xff0c;Python的重要性不言而喻。不知你是否和我一样&#xff0c;不知道曾经说过多少次我要学Python&#xff0c;都没有执行起来… 近期我在知识库中更新了一波Python教程&#xff0c;选取了这一篇分享给大家。 前言 很多时候我们需要让程序变成交互性的…

Linux系统——nginx服务介绍

一、Nginx——高性能的Web服务端 Nginx的高并发性能优于httpd服务 1.nginx概述 Nginx是由1994年毕业于俄罗斯国立莫斯科鲍曼科技大学的同学为俄罗斯rambler.ru公司开发的&#xff0c;开发工作最早从2002年开始&#xff0c;第一次公开发布时间是2004年10月4日&#xff0c;版本…

CSS基础和选择器

【一】CSS基础 【1】什么是CSS CSS&#xff08;层叠样式表&#xff09;是一种用于描述HTML&#xff08;超文本标记语言&#xff09;文档外观样式的语言。它通过定义样式规则来控制网页的布局、字体、颜色、背景等外观效果&#xff0c;使网页变得更加美观和可读。 【2】注释语…

第二证券:美国加息对中国股市的影响?美联储加息利好还是利空股市?

美国加息是一种紧缩的钱银政策&#xff0c;会招引出资者添加银行的出资&#xff0c;导致社会上的流动钱银减少&#xff0c;然后间接地导致股市流动资金减少&#xff0c;股市跌落&#xff0c;引起商场上的出资者恐慌&#xff0c;大量卖出&#xff0c;添加商场上的空方力量&#…

电路设计(25)——4位数字频率计的multism仿真及PCB设计

1.设计要求 使用4位数码管&#xff0c;显示输入信号的频率。完成功能仿真后&#xff0c;用AD软件&#xff0c;画出原理图以及PCB。 2.电路设计 输入信号的参数为&#xff1a; 可见&#xff0c;输入为168HZ&#xff0c;测量值为170HZ&#xff0c;误差在可接受的范围内。 3.PCB设…

C++ 和 C#的区别

如是我闻&#xff1a; C#&#xff08;发音为 “C sharp”&#xff09;和C是两种流行的编程语言&#xff0c;它们各有特点和用途。下面是这两种语言的一些主要区别&#xff1a; 设计理念和用途: C: 是一种多范式编程语言&#xff0c;支持过程化编程、面向对象编程、泛型编程等。…

小程序怎么开发?怎么开发自己的小程序

一、明确需求与定位 在开发小程序之前&#xff0c;需要明确需求. 首先&#xff0c;明确小程序的定位非常重要。我们需要确定小程序是为了提供便捷的购物体验还是特定领域的服务。明确定位可以帮助我们更好地设计和优化小程序的功能&#xff0c;以符合用户的期望和需求。 其次…

VIO第3讲:基于优化的IMU与视觉信息融合之视觉残差雅可比推导

VIO第3讲&#xff1a;基于优化的IMU与视觉信息融合之视觉残差函数构建 文章目录 VIO第3讲&#xff1a;基于优化的IMU与视觉信息融合之视觉残差函数构建3 视觉重投影残差的 Jacobian3.1 视觉重投影残差① 估计值&#xff08;预测值&#xff09;<1> 推导<2> 引出因子…

分享Video.js观看Web视频流

界面效果 HTML结构 <div class"homePopup" ><div class"search_box animate__animated animate__fadeInDown" style"display: none;"><div class"van-search" style"background: rgba(0, 0, 0, 0);">&…

物业第三方满意度调查抽样方法有哪些

本文由群狼调研&#xff08;湖南售楼中心神秘顾客&#xff09;出品&#xff0c;欢迎转载&#xff0c;请注明出处。在物业服务行业中&#xff0c;了解业主的需求和满意度至关重要。随着市场竞争的加剧&#xff0c;越来越多的物业公司选择通过第三方来进行满意度调查。物业第三方…

[服务器-数据库]MongoDBv7.0.4不支持ipv6访问

文章目录 MongoDBv7.0.4不支持ipv6访问错误描述问题分析错误原因解决方式 MongoDBv7.0.4不支持ipv6访问 错误描述 报错如下描述 Cannot connect to MongoDB.No suitable servers found: serverSelectionTimeoutMS expired: [failed to resolve 2408]问题分析 首先确定其是…

Android14 InputManager-InputReader的处理

IMS启动时会调用InputReader.start()方法 InputReader.cpp status_t InputReader::start() {if (mThread) {return ALREADY_EXISTS;}mThread std::make_unique<InputThread>("InputReader", [this]() { loopOnce(); }, [this]() { mEventHub->wake(); });…

Java SE 入门到精通—基础语法【Java】

敲重点&#xff01; 本篇讲述了比较重要的基础&#xff0c;是必须要掌握的 1.程序入口 在Java中&#xff0c;main方法是程序的入口点&#xff0c;是JVM&#xff08;Java虚拟机&#xff09;执行Java应用程序的起始点。 main方法的方法签名必须遵循下面规范&#xff1a; publ…