Javascript 中數(shù)據(jù)類型那些可能會中招的細(xì)節(jié)

前言

Javascript的數(shù)據(jù)類型對于大家來說一點都不默認(rèn)，主要基本數(shù)據(jù)局類型和引用數(shù)據(jù)類型，都是入門必學(xué)的知識點，而且在日常開發(fā)中，頻繁使用。大家是否都掌握其中的一些細(xì)節(jié)呢？下面我們就詳細(xì)探討一下。

一、number類型注意事項

number類型包括：正數(shù)、負(fù)數(shù)、0、小數(shù)、NaN

NaN：意思是not a number 不是一個有效數(shù)字，但是它是屬于number類型的

(1) = 和 == 和 ===的區(qū)別

• = 是賦值
• == 是判斷左右兩邊的值是否相等(非嚴(yán)格判斷，只要字面相等則相等)
• === 是判斷左右兩邊是否想相等,嚴(yán)格判斷(包含數(shù)據(jù)類型,類型和字面相等才相等)

(2) NaN

• NaN 和 NaN 是不相等的,NaN == NaN返回的是false
• isNaN();檢測一個值不是有效數(shù)字的命題是否成立，是有效數(shù)字則返回false，不是有效數(shù)字返回的才是true

isNaN() 如果檢測的值不是number類型，瀏覽器會默認(rèn)把值轉(zhuǎn)換為number類型，然后在判斷是否為有效數(shù)字

例如：
     console.log(isNaN("123"))  // 打印結(jié)果是 true
步驟: 
   1、首先把"123"轉(zhuǎn)換成number類型的,使用Number()轉(zhuǎn)換方法
   2、然后判斷number類型的值是否滿足isNaN的條件

• Number()方法 強制將其他數(shù)據(jù)類型轉(zhuǎn)為number類型(強制數(shù)據(jù)類型轉(zhuǎn)換)

  Number()方法 強制將其他數(shù)據(jù)類型轉(zhuǎn)為number類型，
  要求：如果是字符串，字符串中一定都需要是數(shù)字才可以轉(zhuǎn)換
  例如：Number("12")返回的結(jié)果是12，Number("12px")返回的結(jié)果就是NaN

• 非強制數(shù)據(jù)類型轉(zhuǎn)換 parseInt()/ parseFloat()

 parseInt: 從左到右，一個個字符查找，把是數(shù)字的轉(zhuǎn)為有效數(shù)字，中途如果遇到了一個非有效數(shù)字，就不在繼續(xù)查找了
 parseFloat: 和上面一樣，可以多識別一個小數(shù)點。

 例如：parseInt('12px')的值為 12
      parseFloat('12.5px')的值為 12.5

二、數(shù)據(jù)類型的轉(zhuǎn)換規(guī)則

常用的boolean轉(zhuǎn)換符號

• ! 一個感嘆號是取反，首先將值轉(zhuǎn)化為布爾類型的值，然后取反
• !! 兩個感嘆號是將其他的數(shù)據(jù)類型轉(zhuǎn)換為 boolean 類型，相當(dāng)于Boolean()

轉(zhuǎn)換規(guī)則：

1、如果只有一個值，判斷這個值是真還是假，遵循：只有 0 NaN "" null undefined 這五個是假，其余的都是真

例如：
    console.log(!3)  // false
    console.log(![]) // false
    console.log(!{}) // false
    
    console.log(!null) // true
    console.log(!0) // true
    console.log(!undefined) //true
    console.log(!"")) //true

注意： 此處 數(shù)字0才為假，如果是字符串的'0',同樣為真

例如：
  if(0){
    console.log("為真")
  }else{
    console.log("為假")
  }
  if('0'){
     console.log("為真")
  }else{
     console.log("為假")
  }
  
  第一個輸出 為假，第二個輸出 為真

2、如果是兩個值比較是否相等，遵循這個規(guī)則：

val1 == val2 兩個值可能不是同一數(shù)據(jù)類型的，如果是 == 比較的話，會進(jìn)行默認(rèn)的數(shù)據(jù)類型轉(zhuǎn)換

• 1)、對象 == 對象，永遠(yuǎn)不相等
• 2)、對象 == 字符串 現(xiàn)將對象轉(zhuǎn)換為字符串(調(diào)用toString的方法)，然后在進(jìn)行比較

  [] 轉(zhuǎn)換為字符串 ""
  {} 轉(zhuǎn)換為字符串 "[object Object]" 
  
  所以:  [] == "" 為 true
        {} == "" 為 false

• 3)、對象 == 布爾類型 對象先轉(zhuǎn)為字符串(toString)，然后把字符串轉(zhuǎn)換為數(shù)字(Number),布爾類型也轉(zhuǎn)換為數(shù)字(true是1 false 是0)，最后讓兩個數(shù)字比較

    例如：
        console.log([] == false) // 為 true
        解析：首先 []轉(zhuǎn)為字符串"",然后字符串轉(zhuǎn)為數(shù)字類型number，Number("")結(jié)果為0，false
        轉(zhuǎn)為數(shù)字類型，Number(false) 結(jié)果也為0，所以 [] == false, 就解析成了 0與0的比較，所以相等，
        返回true

• 4)、對象 == 數(shù)字 對象先轉(zhuǎn)為字符串(toString)，然后把字符串轉(zhuǎn)換為數(shù)字(Number)
• 5)、數(shù)字 == 布爾 布爾類型轉(zhuǎn)換為數(shù)字
• 6)、數(shù)字 == 字符串，字符串轉(zhuǎn)換為數(shù)字

  例如：5 == '5' // 為 true

• 7)、字符串 == 布爾 都轉(zhuǎn)換為數(shù)字
• 8)、null === undefined 結(jié)果是true

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

• 9)、null和undefined 和其他任何數(shù)據(jù)類型都不相等

 console.log(null == 0) // false
 console.log(undefined == 0) // false

3、除了== 是比較，===也是比較(絕對比較)，如果數(shù)據(jù)類型不一樣肯定不相等

  例如：
      console.log(0 == false) // true
      console.log(0 === fasle) // false
      
      console.log(5 == "5") // true
      console.log(5 === "5") // false
      
      console.log(null == undefined) // true
      console.log(null === undefined) // false

三、typeof(數(shù)據(jù)類型檢測)

typeof 用來檢測數(shù)據(jù)類型的，用法：typeof + 要檢查的值,

返回一個字符串，包含了數(shù)據(jù)類型的字符( "number","string","boolean","undefined","function","object")

• typeof null 返回的結(jié)果是 "object"
• typeof undefined 返回的結(jié)果是 "undefined"

雖然null 和 undefined 同為number數(shù)據(jù)類型，但是通過typeof檢測的值不是number，而且也不相同。

• typeof null 結(jié)果是 "object"
• typeof [] 結(jié)果是 "object"

注意：同為對象數(shù)據(jù)類型的 數(shù)組、正則、對象的檢測類型都是"object"

typeof 局限性：不能具體的檢查object下細(xì)分的類型

  console.log(typeof typeof typeof typeof []) // "string"
  此處打印的是"string"

tip：因為typeof 返回的值就是一個字符串，如果用到了兩個以及兩個以上的typeof 返回的都是 "string"類型

四、基本數(shù)據(jù)類型和引用數(shù)據(jù)類型的本質(zhì)區(qū)別

例子：

情景一:
    var num1 = 12;
    var num2 = num1;
    num2++;
    console.log(num1);
   
    
情景二:
    var obj1 = {"name":"張三"};
    var obj2 = obj1;
    obj2.name = "李四";
    console.log(obj1.name);

    情景一打印的值為 12, 情景二打印的值為 "李四"

分析：基本數(shù)據(jù)類型的值是具體的值，此處的var num2=num1;就是將num1的值 12給num2，此時num2和num1的值同為12，但是和num1的num2的值互不相關(guān)，所以不論num2怎么變，num1都是12，都不會改變。引用數(shù)據(jù)類型，存儲的是數(shù)據(jù)內(nèi)存的地址，var obj1 = {"name":"張三"} 是開辟一個空間來存放{"name":"張三"}值，然后將obj1指向存儲值的地址，此時，var obj2 = obj1,就是將obj1指向內(nèi)存空間的地址賦值給obj2，兩個都指向同一個內(nèi)存地址，對應(yīng)的同一個值。所以后面obj2更改內(nèi)存空間里面name的值后，obj1的值也會改變。

寫到最后

重新回顧基礎(chǔ)的知識，發(fā)現(xiàn)以前很懵懂的知識似乎瞬間明白了許多，比如上述的引用數(shù)據(jù)類型指向的是內(nèi)存空間的地址，相賦值操作后，操作賦值后的值會影響原有的值的結(jié)果。所以才有了日常生活中經(jīng)常使用的深拷貝和淺拷貝，就是為了規(guī)避改變兩個值互相影響的情況；以前都最顧著自己快速的去上手做項目，學(xué)習(xí)框架的內(nèi)容，卻忽視了這些最為基本的東西。當(dāng)基礎(chǔ)掌握的足夠扎實的時候，也就會看什么都豁然開朗了。