站長資訊網(wǎng)本篇文章給大家介紹一下javascript比較運(yùn)算符（“===”和“==”）的匹配規(guī)則，以及if()條件的判斷結(jié)果，希望對大家有所幫助！
前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用
1. 結(jié)論先行
我們都知道，在JS中，要盡量使用全等運(yùn)算符（“===”），因?yàn)槿冗\(yùn)算符在比較時(shí)都不會進(jìn)行類型的轉(zhuǎn)化，相對而言速度也會更快。那么什么時(shí)候使用相等運(yùn)算符（“==”）呢？以下兩種情況供參考：
-
用于判斷對象的屬性是否存在
let obj = {}; if( obj.a == null ) { //這里相對于：obj.a === null || obj.a === undefined 的簡寫形式，jquery源碼的推薦寫法 }
-
用于判斷函數(shù)的參數(shù)是否存在
function fn( a, b ) { if( a == null ) { //這里也相當(dāng)于 a === null || a === undefined 的簡寫 } }
總結(jié): 一般情況下我們盡量使用“===”來精確判斷，在判斷對象屬性和函數(shù)參數(shù)是否存在時(shí)可以使用“==”。
2. 結(jié)果判斷參照表
接下來讓我們總結(jié)一下各種數(shù)據(jù)類型使用這兩種運(yùn)算符所得到的結(jié)果，其中：綠色表示結(jié)果為true，白色表示結(jié)果為false
2.1 全等運(yùn)算符（“===”）的操作結(jié)果
2.2 相等運(yùn)算符（“==”）操作結(jié)果
2.3 if()條件判斷結(jié)果
3. 具體判斷的邏輯說明
（轉(zhuǎn)載自：js中比較運(yùn)算符隱式類型轉(zhuǎn)換）
3.1 全等運(yùn)算符 （“===”）
說明: 嚴(yán)格匹配,不會類型轉(zhuǎn)換,必須要數(shù)據(jù)類型和值完全一致。
先判斷類型,如果類型不是同一類型的話直接為false; 1 對于基本數(shù)據(jù)類型(值類型): Number,String,Boolean,Null和Undefined:兩邊的值要一致,才相等 console.log(null === null) // true console.log(undefined === undefined) // true 注意: NaN: 不會等于任何數(shù),包括它自己 console.log(NaN === NaN) // false 2 對于復(fù)雜數(shù)據(jù)類型(引用類型): Object,Array,Function等:兩邊的引用地址如果一致的話,是相等的 arr1 = [1,2,3]; arr2 = arr1; console.log(arr1 === arr2) // true
3.2 相等運(yùn)算符 （“==”）
非嚴(yán)格匹配: 會類型轉(zhuǎn)換,但是有前提條件一共有五種情況
(接下來的代碼以 x == y 為示例)
-
x和y都是null或undefined:
規(guī)則: 沒有隱式類型轉(zhuǎn)換,無條件返回true
console.log ( null == undefined );//true console.log ( null == null );//true console.log ( undefined == undefined );//true
-
x或y是NaN : NaN與任何數(shù)字都不等
規(guī)則：沒有隱式類型轉(zhuǎn)換，無條件返回false
console.log ( NaN == NaN );//false
-
x和y都是string，boolean，number
規(guī)則：有隱式類型轉(zhuǎn)換，會將不是number類型的數(shù)據(jù)轉(zhuǎn)成number
console.log ( 1 == true );//true (1) 1 == Number(true) console.log ( 1 == "true" );//false (1) 1 == Number('true') console.log ( 1 == ! "true" );//false (1) 1 == !Boolean('true') (2) 1 == !true (3) 1 == false (4)1 == Number(false) console.log ( 0 == ! "true" );//true console.log(true == 'true') // false
-
x或y是復(fù)雜數(shù)據(jù)類型 : 會先獲取復(fù)雜數(shù)據(jù)類型的原始值之后再左比較
復(fù)雜數(shù)據(jù)類型的原始值： 先調(diào)用valueOf方法，然后調(diào)用toString方法
valueOf:一般默認(rèn)返回自身
數(shù)組的toString：默認(rèn)會調(diào)用join方法拼接每個(gè)元素并且返回拼接后的字符串
console.log ( [].toString () );//空字符串 console.log ( {}.toString () );//[object Object] 注意: 空數(shù)組的toString()方法會得到空字符串， 而空對象的toString()方法會得到字符串[object Object] （注意第一個(gè)小寫o，第二個(gè)大寫O喲） console.log ( [ 1, 2, 3 ].valueOf().toString());//‘1，2，3’ console.log ( [ 1, 2, 3 ] == "1,2,3" );//true (1)[1,2,3].toString() == '1,2,3' (2)'1,2,3' == '1,2,3' console.log({} == '[object Object]');//true
-
x和y都是復(fù)雜數(shù)據(jù)類型 :
規(guī)則只比較地址，如果地址一致則返回true，否則返回false
var arr1 = [10,20,30]; var arr2 = [10,20,30]; var arr3 = arr1;//將arr1的地址拷貝給arr3 console.log ( arr1 == arr2 );//雖然arr1與arr2中的數(shù)據(jù)是一樣，但是它們兩個(gè)不同的地址 console.log ( arr3 == arr1 );//true 兩者地址是一樣 console.log ( [] == [] );//false console.log ( {} == {} );//false
3.3 經(jīng)典面試題
注意:八種情況轉(zhuǎn)boolean得到false: 0 -0 NaN undefined null '' false document.all() console.log([] == 0); //true // 分析:(1) [].valueOf().toString() == 0 (2) Number('') == 0 (3) false == 0 (4) 0 == 0 console.log(![] == 0); //true // 分析: 邏輯非優(yōu)先級高于關(guān)系運(yùn)算符 ![] = false (空數(shù)組轉(zhuǎn)布爾值得到true) console.log([] == []); //false // [] 與右邊邏輯非表達(dá)式結(jié)果比較 //(1) [] == !Boolean([]) (2) [] == !true (3)[] == false (4) [].toString() == false (5)'' == false (6)Number('0') == Number(false) console.log([] == ![]); //true onsole.log({} == {}); //false // {} 與右邊邏輯非表達(dá)式結(jié)果比較 //(1){} == !{} (2){} == !true (3){} == false (4){}.toString() == false (5)'[object Object]' == false (6)Number('[object Object]') == false console.log({} == !{}); //false
3.4 變態(tài)面試題
var a = ??? if(a == 1 && a == 2 && a == 3 ){ console.log(1) } //如何完善a,使其正確打印1 //答案 var a = { i : 0, //聲明一個(gè)屬性i valueOf:function ( ) { return ++a.i; //每調(diào)用一次，讓對象a的i屬性自增一次并且返回 } } if (a == 1 && a == 2 && a == 3){ //每一次運(yùn)算時(shí)都會調(diào)用一次a的valueOf()方法 console.log ( "1" ); }
【
