JavaScript判斷兩個數組相等的4類方法總結
目錄
- 循環比較
- toString
- join
- JSON.stringify
- 當數組元素是空元素、null、undefined時
- null 和 undefined
- 空元素
- 總結
在JavaScript中，數組本質上是一種特殊的對象，它的類型值會返回 object。
如果我們需要比較兩個數組是否相等，不能像比較基本類型(String、Number、Boolean等)一樣，使用 === (或 ==) 來判斷，所以如果要比較數組是否相等，需要使用一些特殊方法。關于JS類型的判斷，可見博文 typeof使用詳解。
本文總結了幾種數組比較的方法，方便我們碰到類似問題時能快速處理。
- 循環比較
- toString方法
- join方法
- JSON.stringify
需要說明的，這里只針對數組元素為原始類型(String、Number、Boolean)的情況。
如果數據元素是復雜類型，如Object、Function等等，則無法通過這些方法進行簡單比較了，需要另行特殊處理。而且當存在這類復雜類型時，比較數組是否相等已經意義不大，本文不做討論。
這也是關于數組的第四篇博文，前面三篇如下：
循環比較
使用循環的方法一一比較數組元素的值，可能是我們最先能想到的方式。
循環比較大概可分為兩種方式，一種是使用 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.parse 和 JSON.stringify 詳解
當數組元素是空元素、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判斷兩個數組相等的4類方法總結的文章就介紹到這了,更多相關JavaScript判斷數組相等內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持！
網公網安備