JavaScript数组(四):判断数组相等的4种方法

这篇具有很好参考价值的文章主要介绍了JavaScript数组(四):判断数组相等的4种方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

在JavaScript中,数组本质上是一种特殊的对象,它的类型值会返回 object
如果我们需要比较两个数组是否相等,不能像比较基本类型(String、Number、Boolean等)一样,使用 === (或 ==) 来判断,所以如果要比较数组是否相等,需要使用一些特殊方法。关于JS类型的判断,可见博文 typeof使用详解。

本文总结了几种数组比较的方法,方便我们碰到类似问题时能快速处理:

  1. 循环比较
  2. toString方法
  3. join方法
  4. JSON.stringify

需要说明的,这里只针对数组元素为原始类型(String、Number、Boolean)的情况
如果数据元素是复杂类型,如Object、Function等等,则无法通过这些方法进行简单比较了,需要另行特殊处理。而且当存在这类复杂类型时,比较数组是否相等已经意义不大,本文不做讨论。

这也是关于数组的第四篇博文,前面三篇如下:

JavaScript数组(一):类型、判断、索引与length属性
JavaScript数组(二):创建方式、构造函数、空元素与in运算符
JavaScript数组(三):类数组对象

循环比较

使用循环的方法一一比较数组元素的值,可能是我们最先能想到的方式。
循环比较大概可分为两种方式,一种是使用 forwhile 等循环语句,相对简单,如下代码所示:

const arr1 = [1, 2, 3], arr2 = [1, 2, 3]
// 需要判断两个数组长度
arr1.length === arr2.length
// 一一比较元素值,有一个不相等就不等
for (let i = 0; i < arr1.length; i++) {
  if (arr2[i] !== arr2[i]) {
    return false
  }
}

另外一种就是使用数组的循环类实例方法,如 foreachmap 等处理数组循环的实例方法,和使用 for 语句较类似,同样能达到目的。
而使用 everysomefilter 等这类实例方法,则代码实现上会更简单一些,如下所示:

const arr1 = [1, 2, 3], arr2 = [1, 2, 3]
// 使用every
arr1.length === arr2.length && arr1.every((v,i) => v === arr2[i])
// 使用some
arr1.length === arr2.length && !arr1.some((v, i) => v !== arr2[i])
// 使用filter
arr1.length === arr2.length && arr1.filter((v, i) => v !== arr2[i]).length === 0
// 使用find和findIndex
arr1.length === arr2.length && arr1.findIndex((v, i) => v !== arr2[i]) === -1

当我们进行循环相关的比较的时候,都使用的是严格相等 ===,会先判断类型是否相等。
但如果需要忽略元素类型时,可以使用 ==,这样,会自动对数组元素进行类型转换后再比较,如 true == 1 会成立。

toString

toString 方法是Object类型对象的实例方法,而JS中Object是几乎所有类型的基类,所以其他类型都能调用该方法。(null和undefined例外,没有实例方法。)
toString方法的作用是返回一个对象的字符串形式,这里,我们用它来返回数组的字符串形式的数据。

[1,2,3].toString() // '1,2,3'

以上代码,就是返回数组 [1,2,3] 的字符串形式,以逗号分给元素组成字符串数据,返回的 '1,2,3'
如果数组元素是复杂类型,如Object对象,则toString返回的结果将不同:

[1,2,{}].toString() // '1,2,[object Object]'

这里toString方法对 {} 直接返回的是 [object Object]

鉴于此,我们比较数组元素为原始类型的数组时,可以如下这样使用:

[1,2,3].toString() === [1, 2, 3].toString() // true

需要注意的是,如果数组元素为数字的字符串形式,结果也是相同的:

['1', 2, 3].toString() // '1,2,3'
[1,2,3].toString() === ['1', 2, 3].toString() // true

join

join 方法是数组的一个实例方法。
它有一个可选参数,可以作为分隔符,以该分隔符分隔所有数组元素组成字符串数据返回,如果不加参数,默认是以逗号分割。
通过join方法的用法,我们就能知道,如果不提供分隔符的参数,它对数组所起的作用看上去和 toString 方法几乎一样。

[1,2,3].join() === [1, 2, 3].join() // true
[1,2,3].join() === ['1', '2', '3'].join() //true

当然,也可以添加分隔符,效果是一样的,如使用空字符:

[1,2,3].join('') // '123'
[1,2,3].join('') === ['1', '2', '3'].join('') //true

由上可知,既然join不带参数和toString方法几乎一样,那它们互相之间的比较,本质上都是数组转换成逗号分隔的字符串,所以也是相等的:

[1, '2', true].join() === [1, '2', true].toString() // true
[1, '2', true].toString() === [1, '2', true].join() // true

JSON.stringify

JSON.stringify 用于将一个对象或值转换成JSON字符串,如果是数组,一般会这样转换:

JSON.stringify([1, '2', true]) // '[1,"2",true]'

利用这个特点,我们就能通过它进行数组的常规比较:

[1, 2, 3] === [1, 2, 3] // false
JSON.stringify([1, 2, 3]) === JSON.stringify([1, 2, 3]) // true
JSON.stringify([1, '2', true]) === JSON.stringify([1, '2', true]) // true

需要注意的是,JSON.stringify处理字符串是转换结果会带双引号:

JSON.stringify(['1']) // '["1"]'
JSON.stringify(['1']) === '["1"]' // true
JSON.stringify(['1']) === '[\'1\']' // false

关于JSON.stringify方法更多的知识,可查看博文 JSON使用详解。

当数组元素是空元素、null、undefined时

以上介绍的数组元素的类型都是原始类型(String、Number、Boolean),但数组元素还可以是另外三种特殊情况:空元素nullundefined,接下来将简单介绍下出现这三种情况时的比较方式。

null 和 undefined

当使用 JSON.stringify 方法时,空元素、null、undefined这三种类型的元素都会被转换成 null 字符串值,可以很好的判断:

JSON.stringify([1, '2', true, , null, undefined]) // '[1,"2",true,null,null,null]'
JSON.stringify([1, '2', true, , null, undefined]) === JSON.stringify([1, '2', true, , null, undefined]) // true

toStringjoin 方法较类似,他们会把这三种类型的值都转换成空字符:

[1, '2', true, , null, undefined].join() // '1,2,true,,,'
[1, '2', true, , null, undefined].toString() // '1,2,true,,,'
[1, '2', true, , null, undefined].toString() === [1, '2', true, , null, undefined].join() // true

当我们使用上面介绍的第一种循环数组元素的方法进行比较时,null和undefined只需要注意它们两种类型的值是否相等:

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

使用严格相等比较的时候,这两种类型不相等。

空元素

数组元素是空元素时,使用循环方式处理,则会有一些不一样,主要和数组的空元素的特点有关:

  • 数组通过下标读取空元素时,返回undefined。
  • 当使用 forwhilefor-offindfindIndex 等语法时,空元素会返回 undefined 值;undefined值能被比较,所以这时候进行数组元素比较时,结果是正确的。
  • 当使用数组实例方法循环如 forEachmapeverysomefilter 等方法时,空元素会被跳过;由于值被跳过,在使用这些方式进行数组元素比较时,结果可能是错误的。
const arr1 = [1, 2, , 3], arr2 = [1, 2, 2, 3]
arr1.length === arr2.length && arr1.every((v, i) => v === arr2[i]) // true
arr1.length === arr2.length && arr1.filter((v, i) => v !== arr2[i]).length === 0 // true
arr1.length === arr2.length && !!arr1.find((v, i) => v !== arr2[i]) // false
arr1.length === arr2.length && arr1.findIndex((v, i) => v !== arr2[i]) === -1 // false

以上代码,数组arr1有一个空元素,与数组arr2的元素并不相同,但是我们使用 everyfilter 比较得到的值为 true,这显然是不对的;而使用 findfindIndex 比较结果为 false ,是正确的。

总结

以上四类数组比较的方式,依据我测试的结果,速度上,循环方式中的 for 语法是最快的,而且该方式还能正确比较空元素、null、undefined三种特殊情况,综合上看使用for循环是最佳选择

第一种循环类方式,性能表现整体优于另外三种方式。
join方法比toString方法更耗时。
如果数据量不是很大,这几种方式耗时可能都在0.1ms以内,几乎可以忽略。

最后,我们总结下以上内容,主要介绍了四种能够比较常规数组(数组为原始数据类型)是否相等的四种方式。也介绍了当数组元素是另外三种特殊情况(空元素、null、undefined)时,上面介绍的四种比较方式是否有效。当然,如果数组元素是复杂数据类型如Object、Function等则比较无意义,不在本文讨论范围内。文章来源地址https://www.toymoban.com/news/detail-790120.html

到了这里,关于JavaScript数组(四):判断数组相等的4种方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript判断数组对象是否含有某个值的方法(6种)

    文章内容 文章链接 vue3 antd table表格的增删改查(一) input输入框根据搜索【后台管理系统纯前端filter过滤】 https://blog.csdn.net/XSL_HR/article/details/128072584?spm=1001.2014.3001.5501 vue3 antd table表格的增删改查(二) input输入框根据搜索【后台管理系统 请求后端接口 前后端

    2024年02月06日
    浏览(63)
  • JavaScript:js数组/对象遍历方法

    一、js遍历方法 序号 方法 描述 1 for 使用最基本的for循环可以遍历数组 2 for of for...of语句用来遍历可迭代对象(包括数组、Set、Map、字符串等),它可以替代传统的for循环和forEach()方法。for...of循环每次迭代都将返回一个值,而不是索引。 3 for in for...in语句用来遍历对象的可

    2024年02月09日
    浏览(56)
  • javascript设置数组对象中的key值方法

    方法一:保留旧数组 key 和 value ; 方法二:不保留旧数组 key 和 value ; 1说明:使用map循环,在map循环内创建一个新对象,将item要改变的key赋给新创建的对象里面新key值,然后push给一个新创建的数组newArr即可; 2 使用forEach循环 + for循环,通过Object.keys()来改变属性key;

    2024年02月16日
    浏览(47)
  • js 判断两个字符串是否相等(有两种方法)

    使用比较运算符判断两个字符串是否相等 可以使用比较运算符 === 或 == 来判断两个字符串是否相等。例如: 在上述代码中,我们定义了两个字符串变量 str1 和 str2 ,并使用 === 运算符来比较它们的值。如果两个字符串相等,则输出 两个字符串相等 ;否则输出 两个字符串不相

    2024年02月05日
    浏览(78)
  • 小程序this.setData修改对象、数组中的值

    在微信小程序的前端开发中,使用this.setData方法修改data中的值,其格式为 this.setData({ ‘参数名1’: 值1,‘参数名2’: 值2)} 注意:如果是简单变量,参数名可以不加引号。 下面提供2种方式对data中的对象、数组中的数据进行修改: 假设原数据为: 方式一:使用[‘字符串’]

    2024年04月25日
    浏览(36)
  • 微信小程序this.setData修改对象、数组中的值

    在微信小程序的[前端开发]中,使用this.setData方法修改data中的值,其格式为: 需要注意的是,如果是简单变量,这里的参数名可以不加引号。 经过测试,可以使用3种方式对data中的对象、数组中的数据进行修改。 假设原数据为: 方式一: 使用字符串,例如: 方式二: 构造

    2024年02月10日
    浏览(52)
  • [开发|java] java 比较两个对象的指定属性的值是否相等

    Java中比较两个对象的指定属性的值是否相等,可以使用Apache Commons Lang库中的EqualsBuilder类。EqualsBuilder提供了一种便捷的方法来比较两个对象的属性值是否相等,具体步骤如下: 通过构造器创建一个EqualsBuilder对象。 调用EqualsBuilder对象的append方法,传入需要比较的两个对象以

    2024年02月16日
    浏览(57)
  • 判断两个数组是否相等

    在判断两个数组是否相等之前,我们应该弄清楚数组怎样才算相等,官方给的解释是这样的: Returns true if the two specified arrays of ints are equal to one another. Two arrays are considered equal if both arrays contain the same number of elements, and all corresponding pairs of elements in the two arrays are equal. In other

    2024年02月15日
    浏览(62)
  • JS判断对象、数组是否包含某个属性、某个值

    可以使用以下几种方法来判断对象是否包含某个属性: 1. in 操作符: 使用 in 操作符可以检查对象是否包含指定的属性。它会检查对象及其原型链上的所有属性。 2. hasOwnProperty() 方法: hasOwnProperty() 是对象的内置方法,用于检查对象自身是否具有指定的属性(不包括原型链上

    2024年02月09日
    浏览(72)
  • 判断两个vector数组是否相等

    判断两个vector数组是否相等是可以直接使用==或者!=的 因为vector内部都进行了相关运算符的重载,还可以进行比较大小 下面这道简单搜索题就用到了这个性质,浅看一下吧 【问题描述】给定一个n个整数的集合X={x1,x2,…xn}(X中可能包含重复元素)和整数y,找出和等于y的X的子集

    2024年02月12日
    浏览(65)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包