JavaScript判斷兩個陣列相等的四類方法

在JavaScript中，陣列本質上是一種特殊的物件，它的型別值會回傳 object，
如果我們需要比較兩個陣列是否相等，不能像比較基本型別(String、Number、Boolean等)一樣，使用 === (或 ==) 來判斷，所以如果要比較陣列是否相等，需要使用一些特殊方法，關于JS型別的判斷，可見博文typeof詳解，

本文總結了幾種陣列比較的方法，方便我們碰到類似問題時能快速處理，

1. 回圈比較
2. toString方法
3. join方法
4. 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]

// 使用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等則比較無意義，不在本文討論范圍內，

標籤：其他

上一篇：JavaScript判斷兩個陣列相等的四類方法

下一篇：返回列表