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); // true

const 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); // false

const 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字符串,转换后结果会带双引号。
在这里插入图片描述

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Java EE初阶二十一】http的简单理解(二)

2. 深入学习http 2.5 关于referer Referer 描述了当前页面是从哪个页面跳转来的&#xff0c;如果是直接在地址栏输入 url(或者点击收藏夹中的按钮) 都是没有 Referer。如下图所示&#xff1a; HTTP 最大的问题在于"明文传输”,明文传输就容易被第三方获取并篡改. …

使用Templ进行Go模板化

使用Templ在Go项目中高效生成动态内容的指南 动态内容生成是Web开发的一个基本方面。无论您是在构建网站、Web应用程序还是API&#xff0c;根据数据和模板生成动态内容的能力都至关重要。在Go编程世界中&#xff0c;一个名为“Templ”的强大工具简化了这一过程。在这份全面的指…

QT day2 2.21

1.使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数 代码&#xff1a; #include "mywidget.h" #include "ui_mywidget.h"MyWidget::MyWidget(QWidget *parent): QWidget(pa…

c#创建安装windows服务

背景:最近在做设备数据对接采集时,遇到一些设备不是标准的Service-Client接口,导致采集的数据不够准确;比如设备如果中途开关机后,加工的数量就会从0开始重新计数,因此需要实时监控设备的数据,进行叠加处理;考略到工厂设备比较多,实时监听接口的数据为每秒3次,因此将…

Stable diffusion UI 介绍-文生图

1.提示词&#xff1a; 你希望图中有什么东西 2.负面提示词&#xff1a;你不希望图中有什么东西 选用了什么模型 使用参数 1.采样器 sampling method 使用什么算法进行采样 2.采样迭代步数 sampling steps 生成图像迭代的步数&#xff0c;越多越好&#xff0c;但是生成速度越大越…

微服务篇之监控

一、为什么要监控 1.问题定位 假设客户端查询一些东西的时候&#xff0c;需要经过网关&#xff0c;然后服务A调用服务H&#xff0c;服务H调用K&#xff0c;服务K调用MySQL&#xff0c;当查询不出来的时候&#xff0c;我们不能快速定位到底是哪个服务的问题&#xff0c;这就需要…

良好的 API 安全策略的重要性

根据 Cloudflare 2024 年 API 安全与管理报告&#xff0c;到 2024 年&#xff0c;API 请求占全球动态互联网流量的 57%&#xff0c;这证实 API 是现代软件开发的重要组成部分。但随着多年来它们的采用不断增加&#xff0c;相关的安全挑战也随之增加。 在过去两年中&#xff0c…

Java零基础 - 关系运算符

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一个人虽可以走的更快&#xff0c;但一群人可以走的更远。 我是一名后…

Java基础API(2) String、StringBuilder详解

文章目录 &#x1f378;1. String类&#x1f349;&#x1f349;1.1 String概述&#x1f349;&#x1f349;1.2 String类的构造方法&#x1f349;&#x1f349;1.3 创建字符串对象的区别对比&#x1f349;&#x1f349;1.4 字符串的比较1.4.1 字符串的比较 &#x1f349;&#x…

【云原生】Docker 安全与CA证书生成

目录 容器的安全行问题 Docker 容器与虚拟机的区别 Docker 存在的安全问题 1.Docker 自身漏洞 2.Docker 源码问题 Docker 架构缺陷与安全机制 1. 容器之间的局域网攻击 2. DDoS 攻击耗尽资源 3. 有漏洞的系统调用 4. 共享root用户权限 Docker 安全基线标准 1. 内…

BOSS直聘招聘经验

招聘低端兼职岗位。流量很大&#xff0c;来的人通常实力也不足。 招聘高端兼职岗位。流量不多。来的人通常具备一定实力。 招聘高薪职位&#xff0c;流量一般&#xff0c;会有有实力的勾搭。 招聘低薪职位&#xff0c;流量一般。通常没什么实力。

【算法与数据结构】200、695、LeetCode岛屿数量(深搜+广搜) 岛屿的最大面积

文章目录 一、200、岛屿数量1.1 深度优先搜索DFS1.2 广度优先搜索BFS 二、695、岛屿的最大面积2.1 深度优先搜索DFS2.2 广度优先搜索BFS 三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、200、岛屿数量 1.1 深度优先搜…

第三百五十八回

文章目录 1. 概念介绍2. 使用方法3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 013pickers2.gif 我们在上一章回中介绍了"如何实现Numberpicker"相关的内容&#xff0c;本章回中将介绍wheelChoose组件.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念…

ChatGPT丨成像光谱遥感技术中的AI革命:ChatGPT应用指南

遥感技术主要通过卫星和飞机从远处观察和测量我们的环境&#xff0c;是理解和监测地球物理、化学和生物系统的基石。ChatGPT是由OpenAI开发的最先进的语言模型&#xff0c;在理解和生成人类语言方面表现出了非凡的能力。本课程重点介绍ChatGPT在遥感中的应用&#xff0c;人工智…

解决弹性布局父元素设置高自动换行,子元素均分高度问题(align-content: flex-start)

案例&#xff1a; <view class"abc"><view class"abc-item" v-for"(item,index) in 8" :key"index">看我</view> </view> <style lang"less">.abc{height: 100px;display: flex;flex-wrap: …

[ Python+OpenCV+Mediapipe ] 实现对象识别

一、写在前面 本文所用例子为个人学习的小结&#xff0c;如有不足之处请各位多多海涵&#xff0c;欢迎小伙伴一起学习进步&#xff0c;如果想法可在评论区指出&#xff0c;我会尽快回复您&#xff0c;不胜感激&#xff01; 所公布代码或截图均为运行成功后展示。 二、本文内容…

【设计模式】使用适配器模式做补偿设计

文章目录 1.概述2.两种适配器模式2.1.类适配器2.2.对象适配器 3.总结 1.概述 适配器模式是一种结构型设计模式&#xff0c;它提供了一个中间层&#xff0c;通过这个中间层&#xff0c;客户端可以使用统一的接口与具有不同接口的类进行交互&#xff0c;也就是说&#xff0c;将一…

Sora横空出世!AI将如何撬动未来?

近日&#xff0c;OpenAI 发布首个视频生成“Sora”模型&#xff0c;该模型通过接收文字指令&#xff0c;即可生成60秒的短视频。 而在2022年末&#xff0c;同样是OpenAI发布的AI语言模型ChatGPT&#xff0c;简化了文本撰写、创意构思以及代码校验等任务。用户仅需输入一个指令&…

1.30数据包络法

数据包络分析法&#xff08;Data Envelopment Analysis&#xff0c;DEA&#xff09;是一种非参数的效率评价方法&#xff0c;用于衡量相对效率和评估多个决策单元&#xff08;DMU&#xff09;的绩效。 在数据包络分析中&#xff0c;每个决策单元都是一个输入和输出数据向量的组…

[Angular 基础] - service 服务

[Angular 基础] - service 服务 之前的笔记就列举三个好了……没想到 Angular 东西这么多(&#xff70; &#xff70;;)……全加感觉越来越凑字数了 [Angular 基础] - 视图封装 & 局部引用 & 父子组件中内容传递 [Angular 基础] - 生命周期函数 [Angular 基础] - 自…