文章目录
前言
在JavaScript中,数组本质上是一种特殊的对象,它的类型值会返回
object
。
如果我们需要比较两个数组是否相等,不能像比较基本类型(String、Number、Boolean等)一样,使用
===
(或
==
) 来判断,所以如果要比较数组是否相等,需要使用一些特殊方法。关于JS类型的判断,可见博文 typeof使用详解。
本文总结了几种数组比较的方法,方便我们碰到类似问题时能快速处理:
- 循环比较
- toString方法
- join方法
- JSON.stringify
需要说明的,这里只针对数组元素为原始类型(String、Number、Boolean)的情况。
如果数据元素是复杂类型,如Object、Function等等,则无法通过这些方法进行简单比较了,需要另行特殊处理。而且当存在这类复杂类型时,比较数组是否相等已经意义不大,本文不做讨论。
这也是关于数组的第四篇博文,前面三篇如下:
JavaScript数组(一):类型、判断、索引与length属性
JavaScript数组(二):创建方式、构造函数、空元素与in运算符
JavaScript数组(三):类数组对象
循环比较
使用循环的方法一一比较数组元素的值,可能是我们最先能想到的方式。
循环比较大概可分为两种方式,一种是使用
for
、
while
等循环语句,相对简单,如下代码所示:
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]){returnfalse}}
另外一种就是使用数组的循环类实例方法,如
foreach
、
map
等处理数组循环的实例方法,和使用
for
语句较类似,同样能达到目的。
而使用
every
、
some
、
filter
等这类实例方法,则代码实现上会更简单一些,如下所示:
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]// falseJSON.stringify([1,2,3])===JSON.stringify([1,2,3])// trueJSON.stringify([1,'2',true])===JSON.stringify([1,'2',true])// true
需要注意的是,JSON.stringify处理字符串是转换结果会带双引号:
JSON.stringify(['1'])// '["1"]'JSON.stringify(['1'])==='["1"]'// trueJSON.stringify(['1'])==='[\'1\']'// false
关于JSON.stringify方法更多的知识,可查看博文 JSON使用详解。
当数组元素是空元素、null、undefined时
以上介绍的数组元素的类型都是原始类型(String、Number、Boolean),但数组元素还可以是另外三种特殊情况:
空元素
、
null
、
undefined
,接下来将简单介绍下出现这三种情况时的比较方式。
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
toString
和
join
方法较类似,他们会把这三种类型的值都转换成空字符:
[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// truenull===undefined// false
使用严格相等比较的时候,这两种类型不相等。
空元素
数组元素是空元素时,使用循环方式处理,则会有一些不一样,主要和数组的空元素的特点有关:
- 数组通过下标读取空元素时,返回undefined。
- 当使用
for
、while
、for-of
、find
、findIndex
等语法时,空元素会返回undefined
值;undefined值能被比较,所以这时候进行数组元素比较时,结果是正确的。 - 当使用数组实例方法循环如
forEach
、map
、every
、some
、filter
等方法时,空元素会被跳过;由于值被跳过,在使用这些方式进行数组元素比较时,结果可能是错误的。
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的元素并不相同,但是我们使用
every
和
filter
比较得到的值为
true
,这显然是不对的;而使用
find
和
findIndex
比较结果为
false
,是正确的。
总结
以上四类数组比较的方式,依据我测试的结果,速度上,循环方式中的
for
语法是最快的,而且该方式还能正确比较空元素、null、undefined三种特殊情况,综合上看使用for循环是最佳选择。
第一种循环类方式,性能表现整体优于另外三种方式。
join方法比toString方法更耗时。
如果数据量不是很大,这几种方式耗时可能都在0.1ms以内,几乎可以忽略。
最后,我们总结下以上内容,主要介绍了四种能够比较常规数组(数组为原始数据类型)是否相等的四种方式。也介绍了当数组元素是另外三种特殊情况(空元素、null、undefined)时,上面介绍的四种比较方式是否有效。当然,如果数组元素是复杂数据类型如Object、Function等则比较无意义,不在本文讨论范围内。
版权归原作者 前端江湖 所有, 如有侵权,请联系我们删除。