天天看點

【又見JavaScript】面試準備必練的關于JS值的顯式類型轉換/隐式類型轉換

關于JS值的顯式類型轉換/隐式類型轉換

顯式類型轉換

Number()

當( )内需轉換的值不同時:

  • 值是“123”或“3.14159”這種以數字組成的字元串時,傳回數字類型的123,3.14159
  • 值是“abc”或“23a”,有字元組成的字元串,或 undefined 時,傳回數字類型的NaN
  • 值是true、false、null(不是字元串)的關鍵字時,傳回1,0,0

parseInt()

: 隻能轉換成整型,從第一位開始判斷是否為數字

parseInt(value,radix)

  • radix 是進制,可以是按不同進制轉換,ES5規定如果省略就代表用十進制解析

    當( )内需轉換的值不同時:

    • 值是“123”/“3.14159”這種以數字組成的字元串時,傳回小數點前面的數字,不會四舍五入;
    • 值是true、false、null、undefined、NaN(不是字元串)的關鍵字時,傳回NaN;
    • 值是數字開頭的,且有字元組成的字元串如“123ab11”時,傳回字元前的數字;
    • 值是以字元開頭,且有數字組成的字元串如“fff88”時,傳回NaN;

parseFloat()

隻接受一個參數,隻能使用十進制去解析

  • 會把有小數點的數字字元串轉換出來
  • 若想保留幾位小數,使用

    .toFixed()

    方法,( )裡填需要保留幾位,此方法傳回的值會四舍五入

String()

轉換為字元串

  • 平時更多使用 值+“” (引号)去進行字元串的轉換
  • toString(value,radix)

    也可以填radix 幾進制的轉換

Boolean()

  • undefined | null | NaN | “” | 0 轉換的值都為 false
  • 其餘都是true

隐式類型轉換

  • 自增/自減
    var a = '123'; 
    a++; // 先将a隐式轉換了,Number(a)再進行自增; 
    console.log(a);
               
  • “+” 号拼接
    var a = 'a' + 1; 
     // 先将數字1隐式轉換了,Number(1),再進行拼接; 
    console.log(a); // a1
               
  • “*  /  -” 号 數學運算:有對象時,對象先轉換為字元串再轉換為數字進行計算
    var a = "3" * 2; // 先把string隐式轉換為number Number(3)
    console.log(a); // 6
    
    // 在字元串前面加上正負号,也會使得字元串轉換為Number
    var num = "123";
    console.log(typeof(+ num)) // number 負号也是如此 不過是負的
    var n = "abc";
    console.log(typeof(+ n)+":" + + n ); // number:NaN 負号也是如此
               
  • “>  <  >=  <=” 的使用
    var a = '1' > 2; // 先Number(1) -> 再與數字2作比較
    console.log(a); // false
    // 補充: 兩個字元串的比較
    var b = 'a' > 'c'; // 根據ascii碼值進行比較
    console.log(b); 
    
    var a1 = 2 > 1 > 3; // 注意,這裡有中間有一次轉換!!
    //1) 2>1 -> true 
    //2) true->1 先隐式轉換為數字1,Number(true)再比較
    //3) 1>3 -> false
    var a2 = 2 > 1 == 1; // 2>1 -> true true == 1 -> true
    console.log(a1,a1); // false true
               

一些浏覽器的運算 | 比較 | 轉換規律

“ == ” 相等 and “ === ” 絕對相等的區分 🤷‍♀️

  1. == 相等的比較規律/轉換規則(含隐式轉換):
    1. 對象 == 字元串:其中的對象會先轉換為字元串(aka:執行了對象.toString()),再比較

      eg.  [10] == ‘10’;// true

    2. null == undefined:結果為 true(===時不等)

      0 == null:結果為 false(與底層機制的轉換不同有關)

      ❗注意:他們倆兄弟(null和undefined),既不大于0,也不小于0,更不等于0

      且 null & undefined 和其它值都不相等 (0 是有自己的記憶體空間的值,而null是沒有自己的記憶體空間的)

    3. NaN 和任何類型的值相比較都不相等(包括它自己)
    4. 剩下的兩邊不同時都是轉換為數字進行比較【對象轉數字:

      Number(對象.toString())

    練習題1:
    [] == false;
    // [] -> [].toString() -> '' -> Number('') -> 0
    // false -> 0
    // true
               
    練習題2:
    ![] == false;
    // 涉及運算符優先級:
    // 		先進行![],再進行 == 比較
    
    // ![] -> !true -> false
    // false == false 
    
    // 結果 true
    !![] //true
    
    !!NaN //false
               
  2. === 絕對相等的比較規律/轉換規則:

    兩邊的類型、值都一緻才相等,類型不同時,直接不對等,不會進行隐式轉換;項目中用它更好👏

以上兩個相等的差別,隻要掌握了隐式轉換就不難了解和區分啦~

isNaN()的判斷規則

  • 先把其它類型值進行

    Number()

    的轉換為數字再檢測是否為非數NaN,傳回true 或 false
  • 檢測步驟總結:

    Number(值)

    --> 判斷是否為NaN --> 傳回Boolean值
  • 也就是說,我們能根據

    Number()

    的轉換規律即可自行判斷其傳回值:

代碼輸出一下來驗證:

console.log(isNaN(123)); // false 本身就不是非數
console.log(isNaN("123")); // false 在Number("123")轉換後 不是非數
console.log(isNaN("a")); // true Number("a")後,是NaN
console.log(isNaN(null));// false Number(null)後,是0
console.log(isNaN(undefined)); // true Number(undefined)後,是NaN
           

typeof 😎

  • 可能傳回的值

    object(null)

    /

    boolean

    /

    number

    /

    string

    /

    undefined

    /

    function

  • 檢測特點
    • 傳回的結果都是字元串
    • 因為傳回的都是字元串

      ,是以兩個及以上的typeof一起使用時得出的結果都是"string"!!!
  • 局限性

    (所有的值在記憶體中都是按照二進制存儲的,當檢測的資料類型為

    null

    時,對應的二進制編碼是000,

    typeof

    會把所有二進制碼為0的資料顯示為

    object

    ,是以其對null的檢測結果是

    object

    • typeof null => "object"

    • typeof 不能細分對象類型(檢測普通對象或者數組對象等都是"object")
    【又見JavaScript】面試準備必練的關于JS值的顯式類型轉換/隐式類型轉換

在 Chrome 浏覽器中,可以通過控制台顯示的字型與顔色直覺判斷出資料類型

【又見JavaScript】面試準備必練的關于JS值的顯式類型轉換/隐式類型轉換

繼續閱讀