JavaScript雙等號(hào)(==)與三等號(hào)(===)的區(qū)別舉例詳解
前言:
雙等號(hào)與三等號(hào)區(qū)別,是近年面試的高頻考點(diǎn),但相信不少前端老兵都只知道大概的區(qū)別。別慌,希望看完本文章能讓你掌握這個(gè)知識(shí)點(diǎn)。
一.等于操作符(==)
當(dāng)使用雙等號(hào)(==)進(jìn)行比較時(shí),JS首先會(huì)判斷兩個(gè)值類型是否相同。如果兩個(gè)值類型相同,則直接進(jìn)行比較;如果兩個(gè)值類型不同,會(huì)先將比較的兩個(gè)值轉(zhuǎn)換為相同的類型,然后再進(jìn)行比較(一般情況,下面會(huì)講特殊情況)。
在類型轉(zhuǎn)換過(guò)程中,JS遵循以下規(guī)則:
1.如果比較的兩個(gè)值類型相同,則直接返回比較結(jié)果。
console.log(1 == 1) //true
2.如果比較的兩個(gè)值類型不同,則先將比較的兩個(gè)值轉(zhuǎn)換為相同的類型,然后再進(jìn)行比較(一般情況,下面會(huì)講特殊情況)。
(1)如果一個(gè)值是數(shù)字,另一個(gè)值是字符串,JS會(huì)嘗試將字符串轉(zhuǎn)換為數(shù)字,然后再進(jìn)行比較。
console.log(1 == "1") //true
(2)Boolean 和其他任何類型比較,Boolean 首先被轉(zhuǎn)換為 Number 類型。
console.log(true == 1) //true console.log(true == "1") //true
(3)兩個(gè)值都是引用類型且類型相同,它們指向的是同一個(gè)內(nèi)存地址的話,返回true。
console.log({} == {}) //false 雖然類型相同,但引用地址不同
const obj = {}
console.log(obj == obj) //true 引用地址相同(4)如果一個(gè)值是引用類型,另一個(gè)值是原始類型,JS會(huì)嘗試使用valueOf()或toString()方法將引用類型轉(zhuǎn)換為原始類型的值,然后再進(jìn)行比較。
console.log("[object Object]" == {}) // true, 對(duì)象和字符串比較,沒(méi)有自定義valueOf方法,對(duì)象通過(guò) toString 得到一個(gè)基本類型值
const obj = {
valueOf: function () {
return 1
},
}
console.log(obj == 1) // true 對(duì)象和字符串比較,有自定義valueOf方法,調(diào)用valueOf方法
console.log("1,2,3" == [1, 2, 3]) // true, 數(shù)組和字符串比較,沒(méi)有自定義valueOf方法 數(shù)組通過(guò) toString 得到一個(gè)基本類型值3.在特殊情況下,如果比較的兩個(gè)值的類型不同,不會(huì)進(jìn)行類型轉(zhuǎn)換,直接進(jìn)行比較。
(1)null == undefined比較結(jié)果是true。null、undefined和其他任何結(jié)果的比較值都為false,但是null和null,undefined和undefined為true。
console.log(null == undefined) //true console.log(null == null) //true console.log(null == "") //false console.log(null == 0) //false console.log(null == false) //false console.log(undefined== undefined) //true console.log(undefined == "") //false console.log(undefined == 0) //false console.log(undefined == false) //false
(2)NaN和其他任何類型比較是false(包括和它自己)
console.log(NaN == NaN) //false console.log(NaN == undefined) //false
二.全等操作符(===)
1.如果比較的兩個(gè)值類型不同,直接返回false。
console.log(1 === "1") //false
2.如果比較的兩個(gè)值是數(shù)字,并且它們具有相同的值,返回true。
3.如果比較的兩個(gè)值是字符串,并且它們具有相同的值,返回true。
4.如果比較的兩個(gè)值是布爾值,并且它們具有相同的真值或假值,返回true。
5.如果比較的兩個(gè)值是引用類型,它們指向的是同一個(gè)內(nèi)存地址,返回true。
console.log({} === {}) //false 雖然類型,內(nèi)容相同,但引用地址不同
const obj = {}
console.log(obj === obj) //true 引用地址相同6.如果比較的兩個(gè)值都是null或都是undefined,它們被視為相等的,返回true。
console.log(null === undefined) //false console.log(null === null) //true console.log(null === "") //false console.log(null === 0) //false console.log(null === false) //false console.log(undefined=== undefined) //true console.log(undefined === "") //false console.log(undefined === 0) //false console.log(undefined === false) //false
7.NaN和其他任何類型比較是false(包括和它自己)
console.log(NaN === NaN) //false console.log(NaN === undefined) //false console.log(NaN === 0) //false console.log(NaN === null) //false console.log(NaN === "") //false
三.區(qū)別:
1.雙等號(hào)比較可能會(huì)進(jìn)行類型轉(zhuǎn)換,是寬松比較;而三等號(hào)不會(huì)進(jìn)行類型轉(zhuǎn)換,是嚴(yán)格比較
2.null和undefined的比較不同
雙等號(hào)下null和undefined比較返回為true;而三等號(hào)下null和undefined比較返回為false
console.log(null == undefined) //true console.log(null === undefined) //false
在實(shí)際開發(fā)中更推薦用三等號(hào)進(jìn)行比較,能提高安全性,因?yàn)殡p等號(hào)比較可能會(huì)進(jìn)行類型轉(zhuǎn)換,可能會(huì)帶來(lái)意外的結(jié)果。當(dāng)然你能正確使用雙等號(hào)的話,使用雙等號(hào)也無(wú)所謂,能提高代碼簡(jiǎn)潔性。(但是據(jù)我所知,蠻多喜歡用雙等號(hào)的前端開發(fā)者多多少少容易出bug,小編之前幫一位同事改bug,發(fā)現(xiàn)幾個(gè)bug都是由雙等號(hào)引起的)
總結(jié)
到此這篇關(guān)于JavaScript雙等號(hào)(==)與三等號(hào)(===)區(qū)別的文章就介紹到這了,更多相關(guān)js雙等號(hào)和三等號(hào)區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JavaScript中比較操作符的用法及對(duì)比詳解(===、==、=== null、===““)
- JavaScript 中的 `==` 和 `===` 操作符詳解
- JavaScript中雙等號(hào)(==)和三等號(hào)(===)有何不同以及何時(shí)使用它們?cè)斀?/a>
- 詳解JavaScript運(yùn)算符中==和===的區(qū)別
- JavaScript/TypeScript中==和===的區(qū)別詳解
- JS中==、===你分清楚了嗎
- javascript中的相等操作符(==與===區(qū)別)
- 一文詳解JavaScript中==和===的區(qū)別與正確使用場(chǎng)景
相關(guān)文章
詳細(xì)總結(jié)Javascript中的焦點(diǎn)管理
相信大家都知道焦點(diǎn)作為javascript中的一個(gè)重要功能,基本上和頁(yè)面交互都離不開焦點(diǎn)。但卻少有人對(duì)焦點(diǎn)管理系統(tǒng)地做總結(jié)歸納。本文就javascript中的焦點(diǎn)管理作詳細(xì)介紹,有需要的朋友們可以參考借鑒。2016-09-09
JavaScript如何把兩個(gè)數(shù)組對(duì)象合并過(guò)程解析
這篇文章主要介紹了JavaScript如何把兩個(gè)數(shù)組對(duì)象合并過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
微信小程序?qū)崿F(xiàn)可拖動(dòng)懸浮圖標(biāo)(包括按鈕角標(biāo)的實(shí)現(xiàn))
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)可拖動(dòng)懸浮圖標(biāo)(包括按鈕角標(biāo)的實(shí)現(xiàn)),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12
javascript表單驗(yàn)證 - Parsley.js使用和配置
大家還記得我們?cè)?jīng)介紹過(guò)的表單驗(yàn)證jquery插件jquery.validationEngine吧;天介紹的Parsley同樣也可以幫助你只使用簡(jiǎn)單的配置即可實(shí)現(xiàn)表單驗(yàn)證功能,基于它的強(qiáng)大DOM-API,感興趣的你可以不要錯(cuò)過(guò)了哦2013-01-01
關(guān)于IE瀏覽器以及Firefox下的javascript冒泡事件的響應(yīng)層級(jí)
原來(lái)是由于IE瀏覽器以及Firefox對(duì)于冒泡型事件的支持層次不同造成的。(如對(duì)冒泡事件不是很了解可先查詢相關(guān)資料)2010-10-10
javascript Array.sort() 跨瀏覽器下需要考慮的問(wèn)題
最近組里項(xiàng)目需要一個(gè)簡(jiǎn)單的Table排序的功能,這個(gè)功能實(shí)現(xiàn)起來(lái)很簡(jiǎn)單,并且網(wǎng)上也有很多現(xiàn)成的代碼,因此任務(wù)很快完成。2009-12-12

