Javascript中比較運算子隱式型別轉換
阿新 • • 發佈:2022-04-15
前言
相信大家在程式碼中經常看見 '==' 和 '===',但大家真的弄懂了比較運算子和其中的隱式轉換嘛? 今天就重新認識下比較運算子。
原文連結:https://segmentfault.com/a/1190000018637123
全等運算子 ===
說明: 嚴格匹配,不會型別轉換,必須要資料型別和值完全一致
先判斷型別,如果型別不是同一型別的話直接為false; 1 對於基本資料型別(值型別): Number,String,Boolean,Null和Undefined:兩邊的值要一致,才相等 console.log(null === null) // true console.log(undefined === undefined) // true 注意: NaN: 不會等於任何數,包括它自己 console.log(NaN === NaN) // false 2 對於複雜資料型別(引用型別): Object,Array,Function等:兩邊的引用地址如果一致的話,是相等的 arr1 = [1,2,3]; arr2 = arr1; console.log(arr1 === arr2) // true
相等運算子 ==
非嚴格匹配: 會型別轉換,但是有前提條件一共有五種情況
(接下來的程式碼以 x == y 為示例)
-
x和y都是null或undefined:
規則: 沒有隱式型別轉換,無條件返回trueconsole.log ( null == undefined );//true console.log ( null == null );//true console.log ( undefined == undefined );//true
-
x或y是NaN : NaN與任何數字都不等
規則:沒有隱式型別轉換,無條件返回falseconsole.log ( NaN == NaN );//false
-
x和y都是string,boolean,number
規則:有隱式型別轉換,會將不是number型別的資料轉成numberconsole.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是複雜資料型別 : 會先獲取複雜資料型別的原始值之後再左比較
複雜資料型別的原始值: 先呼叫valueOf方法,然後呼叫toString方法
valueOf:一般預設返回自身
陣列的toString:預設會呼叫join方法拼接每個元素並且返回拼接後的字串console.log ( [].toString () );//空字串 console.log ( {}.toString () );//[object Object] 注意: 空陣列的toString()方法會得到空字串, 而空物件的toString()方法會得到字串[object Object] (注意第一個小寫o,第二個大寫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都是複雜資料型別 :
規則只比較地址,如果地址一致則返回true,否則返回falsevar arr1 = [10,20,30]; var arr2 = [10,20,30]; var arr3 = arr1;//將arr1的地址拷貝給arr3 console.log ( arr1 == arr2 );//雖然arr1與arr2中的資料是一樣,但是它們兩個不同的地址 console.log ( arr3 == arr1 );//true 兩者地址是一樣 console.log ( [] == [] );//false console.log ( {} == {} );//false
經典面試題
注意:八種情況轉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
// 分析: 邏輯非優先順序高於關係運算符 ![] = false (空陣列轉布林值得到true)
console.log([] == []); //false
// [] 與右邊邏輯非表示式結果比較
//(1) [] == !Boolean([]) (2) [] == !true (3)[] == false (4) [].toString() == false (5)'' == false (6)Number('0') == Number(false)
console.log([] == ![]); //true
onsole.log({} == {}); //false
// {} 與右邊邏輯非表示式結果比較
//(1){} == !{} (2){} == !true (3){} == false (4){}.toString() == false (5)'[object Object]' == false (6)Number('[object Object]') == false
console.log({} == !{}); //false
變態面試題
var a = ???
if(a == 1 && a == 2 && a == 3 ){
console.log(1)
}
//如何完善a,使其正確列印1
//答案
var a = {
i : 0, //宣告一個屬性i
valueOf:function ( ) {
return ++a.i; //每呼叫一次,讓物件a的i屬性自增一次並且返回
}
}
if (a == 1 && a == 2 && a == 3){ //每一次運算時都會呼叫一次a的valueOf()方法
console.log ( "1" );
}