在JavaScript中,數組本質上是一種特殊的對象,它的類型值會返回 `object`。 如果我們需要比較兩個數組是否相等,不能像比較基本類型(String、Number、Boolean等)一樣,使用 ` ` (或 `==`) 來判斷,所以如果要比較數組是否相等,需要使用一些特殊方法。關於JS類型 ...
在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]
// 使用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等則比較無意義,不在本文討論範圍內。