JavaScript判断两个数组相等的四类方法 今日热搜

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

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

(资料图)

循环比较toString方法join方法JSON.stringify

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

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

一文搞懂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]// 使用everyarr1.length === arr2.length && arr1.every((v,i) => v === arr2[i])// 使用somearr1.length === arr2.length && !arr1.some((v, i) => v !== arr2[i])// 使用filterarr1.length === arr2.length && arr1.filter((v, i) => v !== arr2[i]).length === 0// 使用find和findIndexarr1.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]) // truearr1.length === arr2.length && arr1.filter((v, i) => v !== arr2[i]).length === 0 // truearr1.length === arr2.length && !!arr1.find((v, i) => v !== arr2[i]) // falsearr1.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等则比较无意义，不在本文讨论范围内。

关键词：