您好,登錄后才能下訂單哦!
這篇文章主要介紹“JavaScript判斷兩個(gè)數(shù)組相等的方法有哪些”的相關(guān)知識(shí),小編通過(guò)實(shí)際案例向大家展示操作過(guò)程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“JavaScript判斷兩個(gè)數(shù)組相等的方法有哪些”文章能幫助大家解決問(wèn)題。
使用循環(huán)的方法一一比較數(shù)組元素的值,可能是我們最先能想到的方式。
循環(huán)比較大概可分為兩種方式,一種是使用 for
、while
等循環(huán)語(yǔ)句,相對(duì)簡(jiǎn)單,如下代碼所示:
const arr1 = [1, 2, 3], arr2 = [1, 2, 3] // 需要判斷兩個(gè)數(shù)組長(zhǎng)度 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
語(yǔ)句較類似,同樣能達(dá)到目的。
而使用 every
、some
、filter
等這類實(shí)例方法,則代碼實(shí)現(xiàn)上會(huì)更簡(jiǎn)單一些,如下所示:
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
方法是Object類型對(duì)象的實(shí)例方法,而JS中Object是幾乎所有類型的基類,所以其他類型都能調(diào)用該方法。(null和undefined例外,沒(méi)有實(shí)例方法。)
toString方法的作用是返回一個(gè)對(duì)象的字符串形式,這里,我們用它來(lái)返回?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
方法是數(shù)組的一個(gè)實(shí)例方法。
它有一個(gè)可選參數(shù),可以作為分隔符,以該分隔符分隔所有數(shù)組元素組成字符串?dāng)?shù)據(jù)返回,如果不加參數(shù),默認(rèn)是以逗號(hào)分割。
通過(guò)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
用于將一個(gè)對(duì)象或值轉(zhuǎn)換成JSON字符串,如果是數(shù)組,一般會(huì)這樣轉(zhuǎn)換:
JSON.stringify([1, '2', true]) // '[1,"2",true]'
利用這個(gè)特點(diǎn),我們就能通過(guò)它進(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 詳解
以上介紹的數(shù)組元素的類型都是原始類型(String、Number、Boolean),但數(shù)組元素還可以是另外三種特殊情況:空元素
、null
、undefined
,接下來(lái)將簡(jiǎn)單介紹下出現(xiàn)這三種情況時(shí)的比較方式。
當(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ù)組通過(guò)下標(biāo)讀取空元素時(shí),返回undefined。
當(dāng)使用 for
、while
、for-of
、find
、findIndex
等語(yǔ)法時(shí),空元素會(huì)返回 undefined
值;undefined值能被比較,所以這時(shí)候進(jìn)行數(shù)組元素比較時(shí),結(jié)果是正確的。
當(dāng)使用數(shù)組實(shí)例方法循環(huán)如 forEach
、map
、every
、some
、filter
等方法時(shí),空元素會(huì)被跳過(guò);由于值被跳過(guò),在使用這些方式進(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
,是正確的。
關(guān)于“JavaScript判斷兩個(gè)數(shù)組相等的方法有哪些”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。