Js判断两个数组是否相等的几种常见场景

 更新时间:2024年07月09日 10:38:00   作者:英子的搬砖日志  
无论是在开发中还是面试时,在js中判断变量是否相等,都是一个比较常见的问题,这篇文章主要给大家介绍了关于Js判断两个数组是否相等的几种常见场景,需要的朋友可以参考下

前言

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

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

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字符串,转换后结果会带双引号。

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

总结

到此这篇关于Js判断两个数组是否相等的几种常见场景的文章就介绍到这了,更多相关Js判断两个数组相等内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • layer弹出层中H5播放器全屏出错的解决方法

    layer弹出层中H5播放器全屏出错的解决方法

    本文主要介绍了layer弹出层中H5播放器全屏出错解决&属性poster底图占满video的方法,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • Javascript实现Array和String互转换的方法

    Javascript实现Array和String互转换的方法

    这篇文章主要介绍了Javascript实现Array和String互转换的方法,涉及JavaScript中toString方法与split方法的使用技巧,需要的朋友可以参考下
    2015-12-12
  • 分享十八个杀手级JavaScript单行代码

    分享十八个杀手级JavaScript单行代码

    这篇文章主要给大家分享了十八个杀手级JavaScript单行代码,这些单行代码可以帮助你提高工作效率并可以帮助调试代码,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友可以参考下
    2021-10-10
  • js实现点击切换checkbox背景图片的简单实例

    js实现点击切换checkbox背景图片的简单实例

    下面小编就为大家带来一篇js实现点击切换checkbox背景图片的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 微信小程序使用swiper组件实现类3D轮播图

    微信小程序使用swiper组件实现类3D轮播图

    在写微信小程序时,有写到实现3D轮播图的效果,可以直接使用微信小程序中自带的组件swiper来实现。下面通过实例代码给大家介绍微信小程序轮播图的实现方法,感兴趣的朋友一起看看吧
    2018-08-08
  • JS设计模式之命令模式的用法详解

    JS设计模式之命令模式的用法详解

    JavaScript中的命令模式是一种设计模式,它提供了一种将命令封装为对象的方式,从而允许我们将请求与实际执行该请求的操作对象解耦,这种模式可以在不同的场景中使用,例如实现撤销/重做操作、队列任务等,本文我们将讲解命令设计模式在JS中的使用
    2023-08-08
  • uni-app中Navigator组件的用法详解及传参方式

    uni-app中Navigator组件的用法详解及传参方式

    这篇文章主要给大家介绍了关于uni-app中Navigator组件的用法详解及传参方式的相关资料,在实际应用开发中我们经常要使用到路由跳转,在uniapp官网中提供了navigator内置组件,供我们使用,需要的朋友可以参考下
    2023-09-09
  • JS Object构造函数之Object.freeze

    JS Object构造函数之Object.freeze

    这篇文章主要介绍了JS Object构造函数之Object.freeze,对JS感兴趣的同学,可以深入了解下
    2021-04-04
  • 清除浏览器缓存的几种方法总结(必看)

    清除浏览器缓存的几种方法总结(必看)

    下面小编就为大家带来一篇清除浏览器缓存的几种方法总结(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12
  • 微信小程序中slot插槽基本使用方法实例

    微信小程序中slot插槽基本使用方法实例

    之前竟然听到有人跟我说微信小程序没有组件插槽功能,下面这篇文章主要给大家介绍了关于微信小程序中slot插槽基本使用方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11

最新评论