目錄

• 循環(huán)比較
• toString
• join
• JSON.stringify
• 當(dāng)數(shù)組元素是空元素、null、undefined時(shí)
• null 和 undefined
• 空元素
• 總結(jié)

在JavaScript中，數(shù)組本質(zhì)上是一種特殊的對(duì)象，它的類型值會(huì)返回 object。

如果我們需要比較兩個(gè)數(shù)組是否相等，不能像比較基本類型(String、Number、Boolean等)一樣，使用 === (或 ==) 來判斷，所以如果要比較數(shù)組是否相等，需要使用一些特殊方法。關(guān)于JS類型的判斷，可見博文 typeof使用詳解。

本文總結(jié)了幾種數(shù)組比較的方法，方便我們碰到類似問題時(shí)能快速處理。

• 循環(huán)比較
• toString方法
• join方法
• JSON.stringify

需要說明的，這里只針對(duì)數(shù)組元素為原始類型(String、Number、Boolean)的情況。

如果數(shù)據(jù)元素是復(fù)雜類型，如Object、Function等等，則無法通過這些方法進(jìn)行簡單比較了，需要另行特殊處理。而且當(dāng)存在這類復(fù)雜類型時(shí)，比較數(shù)組是否相等已經(jīng)意義不大，本文不做討論。

這也是關(guān)于數(shù)組的第四篇博文，前面三篇如下：

循環(huán)比較

使用循環(huán)的方法一一比較數(shù)組元素的值，可能是我們最先能想到的方式。
循環(huán)比較大概可分為兩種方式，一種是使用 for、while 等循環(huán)語句，相對(duì)簡單，如下代碼所示：

const arr1 = [1, 2, 3], arr2 = [1, 2, 3]
// 需要判斷兩個(gè)數(shù)組長度
arr1.length === arr2.length
// 一一比較元素值，有一個(gè)不相等就不等
for (let i = 0; i < arr1.length; i++) {
  if (arr2[i] !== arr2[i]) {
    return false
  }
}

另外一種就是使用數(shù)組的循環(huán)類實(shí)例方法，如 foreach、map 等處理數(shù)組循環(huán)的實(shí)例方法，和使用 for 語句較類似，同樣能達(dá)到目的。
而使用 every、some、filter 等這類實(shí)例方法，則代碼實(shí)現(xiàn)上會(huì)更簡單一些，如下所示：

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

當(dāng)我們進(jìn)行循環(huán)相關(guān)的比較的時(shí)候，都使用的是嚴(yán)格相等 ===，會(huì)先判斷類型是否相等。

但如果需要忽略元素類型時(shí)，可以使用 ==，這樣，會(huì)自動(dòng)對(duì)數(shù)組元素進(jìn)行類型轉(zhuǎn)換后再比較，如 true == 1 會(huì)成立。

toString

toString 方法是Object類型對(duì)象的實(shí)例方法，而JS中Object是幾乎所有類型的基類，所以其他類型都能調(diào)用該方法。(null和undefined例外，沒有實(shí)例方法。)
toString方法的作用是返回一個(gè)對(duì)象的字符串形式，這里，我們用它來返回?cái)?shù)組的字符串形式的數(shù)據(jù)。

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

以上代碼，就是返回?cái)?shù)組 [1,2,3] 的字符串形式，以逗號(hào)分給元素組成字符串?dāng)?shù)據(jù)，返回的 '1,2,3'。
如果數(shù)組元素是復(fù)雜類型，如Object對(duì)象，則toString返回的結(jié)果將不同：

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

這里toString方法對(duì) {} 直接返回的是 [object Object]。

鑒于此，我們比較數(shù)組元素為原始類型的數(shù)組時(shí)，可以如下這樣使用：

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

需要注意的是，如果數(shù)組元素為數(shù)字的字符串形式，結(jié)果也是相同的：

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

join

join 方法是數(shù)組的一個(gè)實(shí)例方法。

它有一個(gè)可選參數(shù)，可以作為分隔符，以該分隔符分隔所有數(shù)組元素組成字符串?dāng)?shù)據(jù)返回，如果不加參數(shù)，默認(rèn)是以逗號(hào)分割。

通過join方法的用法，我們就能知道，如果不提供分隔符的參數(shù)，它對(duì)數(shù)組所起的作用看上去和 toString 方法幾乎一樣。

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

當(dāng)然，也可以添加分隔符，效果是一樣的，如使用空字符：

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

由上可知，既然join不帶參數(shù)和toString方法幾乎一樣，那它們互相之間的比較，本質(zhì)上都是數(shù)組轉(zhuǎn)換成逗號(hào)分隔的字符串，所以也是相等的：

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

JSON.stringify

JSON.stringify 用于將一個(gè)對(duì)象或值轉(zhuǎn)換成JSON字符串，如果是數(shù)組，一般會(huì)這樣轉(zhuǎn)換：

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

利用這個(gè)特點(diǎn)，我們就能通過它進(jìn)行數(shù)組的常規(guī)比較：

[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處理字符串是轉(zhuǎn)換結(jié)果會(huì)帶雙引號(hào)：

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

關(guān)于JSON.stringify方法更多的知識(shí)，可查看博文JSON.parse 和 JSON.stringify 詳解

當(dāng)數(shù)組元素是空元素、null、undefined時(shí)

以上介紹的數(shù)組元素的類型都是原始類型(String、Number、Boolean)，但數(shù)組元素還可以是另外三種特殊情況：空元素、null、undefined，接下來將簡單介紹下出現(xiàn)這三種情況時(shí)的比較方式。

null 和 undefined

當(dāng)使用 JSON.stringify 方法時(shí)，空元素、null、undefined這三種類型的元素都會(huì)被轉(zhuǎn)換成 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 方法較類似，他們會(huì)把這三種類型的值都轉(zhuǎn)換成空字符：

[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

當(dāng)我們使用上面介紹的第一種循環(huán)數(shù)組元素的方法進(jìn)行比較時(shí)，null和undefined只需要注意它們兩種類型的值是否相等：

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

使用嚴(yán)格相等比較的時(shí)候，這兩種類型不相等。

空元素

數(shù)組元素是空元素時(shí)，使用循環(huán)方式處理，則會(huì)有一些不一樣，主要和數(shù)組的空元素的特點(diǎn)有關(guān)：

• 數(shù)組通過下標(biāo)讀取空元素時(shí)，返回undefined。
• 當(dāng)使用 for、while、for-of、find、findIndex 等語法時(shí)，空元素會(huì)返回 undefined 值；undefined值能被比較，所以這時(shí)候進(jìn)行數(shù)組元素比較時(shí)，結(jié)果是正確的。
• 當(dāng)使用數(shù)組實(shí)例方法循環(huán)如 forEach、map、every、some、filter 等方法時(shí)，空元素會(huì)被跳過；由于值被跳過，在使用這些方式進(jìn)行數(shù)組元素比較時(shí)，結(jié)果可能是錯(cuò)誤的。

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

以上代碼，數(shù)組arr1有一個(gè)空元素，與數(shù)組arr2的元素并不相同，但是我們使用 every 和 filter 比較得到的值為 true，這顯然是不對(duì)的；而使用 find 和 findIndex 比較結(jié)果為 false ，是正確的。

總結(jié)

以上四類數(shù)組比較的方式，依據(jù)我測(cè)試的結(jié)果，速度上，循環(huán)方式中的 for 語法是最快的，而且該方式還能正確比較空元素、null、undefined三種特殊情況，

綜合上看使用for循環(huán)是最佳選擇。

第一種循環(huán)類方式，性能表現(xiàn)整體優(yōu)于另外三種方式。

join方法比toString方法更耗時(shí)。

如果數(shù)據(jù)量不是很大，這幾種方式耗時(shí)可能都在0.1ms以內(nèi)，幾乎可以忽略。

最后，我們總結(jié)下以上內(nèi)容，主要介紹了四種能夠比較常規(guī)數(shù)組(數(shù)組為原始數(shù)據(jù)類型)是否相等的四種方式。也介紹了當(dāng)數(shù)組元素是另外三種特殊情況(空元素、null、undefined)時(shí)，上面介紹的四種比較方式是否有效。當(dāng)然，如果數(shù)組元素是復(fù)雜數(shù)據(jù)類型如Object、Function等則比較無意義，不在本文討論范圍內(nèi)。。

到此這篇關(guān)于JavaScript判斷兩個(gè)數(shù)組相等的4類方法總結(jié)的文章就介紹到這了,更多相關(guān)JavaScript判斷數(shù)組相等內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！