JavaScript判断两个数组相等的方法有哪些

发布时间:2023-02-24 15:56:10 作者:iii
来源:亿速云 阅读:132

这篇文章主要介绍“JavaScript判断两个数组相等的方法有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“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.parse 和 JSON.stringify 详解

当数组元素是空元素、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

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

空元素

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

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 ,是正确的。

关于“JavaScript判断两个数组相等的方法有哪些”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

推荐阅读:
  1. Javascript中如何使用Date对象
  2. 怎么测试JavaScript框架库jQuery

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript

上一篇:CTF中的PHP特性函数有哪些

下一篇:pytorch中backward的参数含义是什么

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》