JavaScript中比較運(yùn)算符隱式類(lèi)型轉(zhuǎn)換的案例

小編給大家分享一下JavaScript中比較運(yùn)算符隱式類(lèi)型轉(zhuǎn)換的案例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

相信大家在代碼中經(jīng)常看見(jiàn) '==' 和 '==='，但大家真的弄懂了比較運(yùn)算符和其中的隱式轉(zhuǎn)換嘛? 今天就重新認(rèn)識(shí)下比較運(yùn)算符。

全等運(yùn)算符 ===

說(shuō)明: 嚴(yán)格匹配,不會(huì)類(lèi)型轉(zhuǎn)換,必須要數(shù)據(jù)類(lèi)型和值完全一致

先判斷類(lèi)型,如果類(lèi)型不是同一類(lèi)型的話直接為false;

1 對(duì)于基本數(shù)據(jù)類(lèi)型(值類(lèi)型): Number,String,Boolean,Null和Undefined:兩邊的值要一致,才相等
      console.log(null === null)   // true
      console.log(undefined === undefined)  // true
   注意: NaN: 不會(huì)等于任何數(shù),包括它自己
   console.log(NaN === NaN)  // false 

2 對(duì)于復(fù)雜數(shù)據(jù)類(lèi)型(引用類(lèi)型): Object,Array,Function等:兩邊的引用地址如果一致的話,是相等的
     arr1 = [1,2,3];
     arr2 = arr1;
     console.log(arr1 === arr2)   // true

相等運(yùn)算符 ==

非嚴(yán)格匹配: 會(huì)類(lèi)型轉(zhuǎn)換,但是有前提條件一共有五種情況
(接下來(lái)的代碼以 x == y 為示例)

x和y都是null或undefined:
 規(guī)則: 沒(méi)有隱式類(lèi)型轉(zhuǎn)換,無(wú)條件返回true

console.log ( null == undefined );//true
console.log ( null == null );//true
console.log ( undefined == undefined );//true

x或y是NaN : NaN與任何數(shù)字都不等
  規(guī)則：沒(méi)有隱式類(lèi)型轉(zhuǎn)換，無(wú)條件返回false

console.log ( NaN == NaN );//false

x和y都是string，boolean，number
  規(guī)則：有隱式類(lèi)型轉(zhuǎn)換，會(huì)將不是number類(lèi)型的數(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ù)類(lèi)型 : 會(huì)先獲取復(fù)雜數(shù)據(jù)類(lèi)型的原始值之后再左比較
  復(fù)雜數(shù)據(jù)類(lèi)型的原始值： 先調(diào)用valueOf方法，然后調(diào)用toString方法
  valueOf:一般默認(rèn)返回自身
  數(shù)組的toString：默認(rèn)會(huì)調(diào)用join方法拼接每個(gè)元素并且返回拼接后的字符串

console.log ( [].toString () );//空字符串
console.log ( {}.toString () );//[object Object]
注意:  空數(shù)組的toString()方法會(huì)得到空字符串，
      而空對(duì)象的toString()方法會(huì)得到字符串[object Object] （注意第一個(gè)小寫(xiě)o，第二個(gè)大寫(xiě)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ù)類(lèi)型 :
  規(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

經(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)先級(jí)高于關(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

變態(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)用一次，讓對(duì)象a的i屬性自增一次并且返回
    }
 }
 if (a == 1 && a == 2 && a == 3){  //每一次運(yùn)算時(shí)都會(huì)調(diào)用一次a的valueOf()方法
  console.log ( "1" );
 }

以上是“JavaScript中比較運(yùn)算符隱式類(lèi)型轉(zhuǎn)換的案例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！