js数组常用的方法及用法（JavaScript数组(四)：判断数组相等的4种方法）

前言

在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]) { return false } }

另外一种就是使用数组的循环类实例方法  

     

     

     

，如 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] // 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)    
    
    
    
，但数组元素还可以是另外三种特殊情况：空元素 


     


     


     


、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 // true null === 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等则比较无意义

 




 




 




 ，不在本文讨论范围内



















。