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最新版本的微信消息防撤…

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 …

不破不立,那些年错过的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;版本…

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

美国加息是一种紧缩的钱银政策&#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设…

分享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);">&…

[服务器-数据库]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…

【力扣白嫖日记】1987.上级经理已离职的公司员工

前言 练习sql语句&#xff0c;所有题目来自于力扣&#xff08;https://leetcode.cn/problemset/database/&#xff09;的免费数据库练习题。 今日题目&#xff1a; 1978.上级经理已离职的公司员工 表&#xff1a;Employees 列名类型employee_idintnamevarcharmanager_idint…

DTV的LCN功能介绍

文章目录 LCN简介LCN获取LCN Conflict LCN简介 Logical Channel Number&#xff08;LCN&#xff09;是数字电视系统中用于标识和组织频道的逻辑编号。LCN的目的是为了方便用户浏览和选择频道&#xff0c;使得数字电视接收设备能够根据这些逻辑编号对频道进行排序和显示。 LCN…

学习大数据所需的java基础(5)

文章目录 集合框架Collection接口迭代器迭代器基本使用迭代器底层原理并发修改异常 数据结构栈队列数组链表 List接口底层源码分析 LinkList集合LinkedList底层成员解释说明LinkedList中get方法的源码分析LinkedList中add方法的源码分析 增强for增强for的介绍以及基本使用发2.使…

【成都游戏业:千游研发之都的发展与机遇】

成都游戏业&#xff1a; 千游研发之都的发展与机遇 作为我国西部游戏产业的龙头&#xff0c;成都这座城市正在高速发展&#xff0c;目标是崛起成为千亿级游戏研发之都。多年来&#xff0c;在政策扶持、人才汇聚以及文化底蕴等助力下&#xff0c;成都游戏业已经形成完整的产业链…

MyBatis--02-1- MybatisPlus----条件构造器

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言AbstractWrapper 条件构造器官网文档https://baomidou.com/pages/10c804/#abstractwrapper](https://baomidou.com/pages/10c804/#abstractwrapper)![在这里插入…

安全这么卷了吗?北京,渗透,4k,不包吃住,非实习

起初某HR找人发了条招聘信息 看到被卷到4k一个月被震惊到了 随后发布了朋友圈&#xff0c;引起来众多讨论 对此网友发表众多评价 越来越卷的工作现象确实是一个普遍存在的问题 另外&#xff0c;也可以考虑和雇主沟通&#xff0c; 寻求更合理的工作安排&#xff0c; 或者…

[ 2024春节 Flink打卡 ] -- Paimon

2024&#xff0c;游子未归乡。工作需要&#xff0c;flink coding。觉知此事要躬行&#xff0c;未休&#xff0c;特记 Flink 社区希望能够将 Flink 的 Streaming 实时计算能力和 Lakehouse 新架构优势进一步结合&#xff0c;推出新一代的 Streaming Lakehouse 技术&#xff0c;…

springboot访问webapp下的jsp页面

一&#xff0c;项目结构。 这是我的项目结构&#xff0c;jsp页面放在WEB-INF下的page目录下面。 二&#xff0c;file--->Project Structure,确保这两个地方都是正确的&#xff0c;确保Source Roots下面有webapp这个目录&#xff08;正常来说&#xff0c;应该本来就有&#…