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.rhkb.cn/news/261702.html

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

相关文章

Go语言中的TLS加密:深入crypto/tls库的实战指南

Go语言中的TLS加密&#xff1a;深入crypto/tls库的实战指南 引言crypto/tls库的核心组件TLS配置&#xff1a;tls.Config证书加载与管理TLS握手过程及其实现 构建安全的服务端创建TLS加密的HTTP服务器配置TLS属性常见的安全设置和最佳实践 开发TLS客户端应用编写使用TLS的客户端…

⭐北邮复试刷题LCR 052. 递增顺序搜索树__DFS (力扣119经典题变种挑战)

LCR 052. 递增顺序搜索树 给你一棵二叉搜索树&#xff0c;请 按中序遍历 将其重新排列为一棵递增顺序搜索树&#xff0c;使树中最左边的节点成为树的根节点&#xff0c;并且每个节点没有左子节点&#xff0c;只有一个右子节点。 示例 1&#xff1a; 输入&#xff1a;root [5,…

⭐北邮复试刷题LCR 037. 行星碰撞__栈 (力扣119经典题变种挑战)

LCR 037. 行星碰撞 给定一个整数数组 asteroids&#xff0c;表示在同一行的小行星。 对于数组中的每一个元素&#xff0c;其绝对值表示小行星的大小&#xff0c;正负表示小行星的移动方向&#xff08;正表示向右移动&#xff0c;负表示向左移动&#xff09;。每一颗小行星以相…

stm32和嵌入式linux可以同步学习吗?

在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「stm3的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01;如果需要使用STM32&#xff0c;建…

TCP 三次握手和四次挥手

为了准确无误地把数据送达目标处&#xff0c;TCP协议采用了三次握手策略。 1 TCP 三次握手漫画图解 如下图所示&#xff0c;下面的两个机器人通过3次握手确定了对方能正确接收和发送消息(图片来源网络)。 简单示意图&#xff1a; 客户端–发送带有 SYN 标志的数据包–一次握手…

如何使用Docker部署开源Leanote蚂蚁笔记并发布个人博客至公网

最近&#xff0c;我发现了一个超级强大的人工智能学习网站。它以通俗易懂的方式呈现复杂的概念&#xff0c;而且内容风趣幽默。我觉得它对大家可能会有所帮助&#xff0c;所以我在此分享。点击这里跳转到网站。 文章目录 1. 安装Docker2. Docker本地部署Leanote蚂蚁笔记3. 安装…

2000-2022年各省城乡收入差距泰尔指数数据(原始数据+计算过程+结果)

2000-2022年各省城乡收入差距泰尔指数数据&#xff08;原始数据计算过程结果&#xff09; 1、时间&#xff1a;2000-2022年 2、指标&#xff1a;地区、居民可支配收入&#xff08;元&#xff09;、农村家庭可支配&#xff08;元&#xff09;、城市家庭可支配&#xff08;元&a…

【Algorithms 4】算法(第4版)学习笔记 10 - 3.3 平衡查找树(上篇)

文章目录 前言参考目录学习笔记0&#xff1a;符号表 ST 的回顾1&#xff1a;2-3 查找树1.1&#xff1a;定义1.2&#xff1a;2-3 树 demo 演示1.2.1&#xff1a;搜索&#xff1a;成功命中1.2.2&#xff1a;搜索&#xff1a;未命中1.2.3&#xff1a;插入&#xff1a;2-节点1.2.4&…

IP地理位置查询定位:技术原理与实际应用

在互联网时代&#xff0c;IP地址是连接世界的桥梁&#xff0c;而了解IP地址的地理位置对于网络管理、个性化服务以及安全监控都至关重要。IP数据云将深入探讨IP地理位置查询定位的技术原理、实际应用场景以及相关的隐私保护问题&#xff0c;旨在为读者提供全面了解和应用该技术…

猫头虎分享已解决Bug || SyntaxError: Unexpected token < in JSON at position 0

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

ubuntu制作windows的u盘启动盘

概要&#xff1a; 本篇演示在ubuntu22.04中制作windows10的u盘启动盘 一、下载woeusb 1、下载woeusb 在浏览器中输入https://github.com/woeusb/woeusb/releases访问woeusb 点击红色矩形圈出来的部分&#xff0c;下载woeusb 2、安装wimtools wimtools是woeusb的一个必须的…

LiveGBS流媒体平台GB/T28181功能-自定义收流端口区间30000至30249UDP端口TCP端区间配置及相关端口复用问题说明

LiveGBS自定义收流端口区间30000至30249UDP端口TCP端区间配置及相关端口复用问题说明 1、收流端口配置1.1、INI配置1.2、页面配置 2、相关问题3、最少可以开放多少端口3.1、端口复用3.2、配置最少端口如下 4、搭建GB28181视频直播平台 1、收流端口配置 1.1、INI配置 可在lives…

开启智能互动新纪元——ChatGPT提示词工程的引领力

目录 提示词工程的引领力 高效利用ChatGPT提示词方法 提示词工程的引领力 近年来&#xff0c;随着人工智能技术的迅猛发展&#xff0c;ChatGPT提示词工程正逐渐崭露头角&#xff0c;为智能互动注入了新的活力。这一技术的引入&#xff0c;使得人机交流更加流畅、贴近用户需求&…

基于CNN-GRU-Attention的时间序列回归预测matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 CNN&#xff08;卷积神经网络&#xff09;部分 4.2 GRU&#xff08;门控循环单元&#xff09;部分 4.3 Attention机制部分 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版…

自动化测试测试框架封装改造

PO模式自动化测试用例 PO设计模式是自动化测试中最佳的设计模式&#xff0c;主要体现在对界面交互细节的封装&#xff0c;在实际测试中只关注业务流程就可以了。 相较于传统的设计&#xff0c;在新增测试用例后PO模式有如下优点&#xff1a; 1、易读性强 2、可扩展性好 3、…

网络图谱构建系统目前已实现的功能

一.移动智能终端&#xff1a; 1.主页面&#xff1a; 地图层调用百度地图api。要在百度地图开发社区申请密钥和服务。 界面中卡片&#xff0c;悬浮按钮&#xff0c;上标题栏都采用谷歌公司material desgin设计风格。 2.标题栏&#xff1a; 采用toolbar&#xff0c;可以应用程…

基于springboot的线上阅读系统项目实战

文章目录 目录 文章目录 前言 一、功能设计 二、功能实现 2.1 用户模块实现 2.1.1 登入注册功能 2.1.2 修改功能 2.1.3 充值功能 2.1.4 会员功能 2.1.5 阅读记录 2.2 书架模块实现 2.2.1 增加功能 2.2.2 移除功能 2.2.3 排序功能 2.3 书库模块实现 2.3.1 排行榜功能 2.3.2 分类…

Android全新UI框架之常用ComposeUI组件

在Compose中&#xff0c;每个组件都是一个带有Composable注解的函数&#xff0c;被称为Composable。Compose已经预置了很多基于MD设计规范的Composable组件。 在布局方面&#xff0c;Compose提供了Column、Row、Box三种布局组件(感觉跟flutter差不多)&#xff0c;类似于传统视图…

几个常见的C/C++语言冷知识

当涉及到C/C语言时&#xff0c;有一些冷知识可能并不为人所熟知&#xff0c;但却可以让你更深入地理解这门古老而强大的编程语言。以下是一些有趣的C/C语言冷知识。 1. 数组的下标可以是负数 在我们日常的C语言编程中&#xff0c;数组是一个非常常见的数据结构。我们习惯性地使…

Flutter学习4 - Dart数据类型

1、基本数据类型 num、int、double &#xff08;1&#xff09;常用数据类型 num类型&#xff0c;是数字类型的父类型&#xff0c;有两个子类 int 和 double 通过在函数名前加下划线&#xff0c;可以将函数变成私有函数&#xff0c;私有函数只能在当前文件中调用 //常用数据…