JS数据类型转换(显式和隐式)

JS数据类型转换(显式和隐式)

数据类型转换(显式和隐式)

1、JavaScript有七种数据类型包括：简单数据类型（5种）和复杂数据类型（2种）

• 简单数据类型包括：string、number、boolean、null、undefined

• 复杂数据类型包括：object、array

  ​

2、JavaScript的数据类型分为两种情况分别是：显式类型转换和隐式类型转换

• 显式类型转换：主动的使用语法来转换类型 （最常用，阅读性）
• 隐式类型转换：当运算符两边数据类型不一致， 编译器会先转成一致 然后计算

​ 2.1、显式类型转换

​ 2.1.1、其它类型转number类型

        /* 
            1.其它类型转number类型
                1.1转换整数 ：     parseInt(数据)
                1.2转换小数 ：     parseFloat(数据)
                1.3其他类型转数字： Number(数据)
         */
                 //1.转换整数：   parseInt(数据)
        //原理 ：  从左往右依次解析字符，遇到非数字字符结束解析，并且返回解析好的整数
        var num = '123.123a';
        var res = parseInt(num);
        console.log(res);//123
        // console.log(typeof res);// 'number'

        //2.转换小数: parseFloat(数据)
        //原理 ： 与parseInt一致，唯一的区别是可以识别第一个小数点
        var num1 = '123.12.3a';//123.12
        var res1 = parseFloat(num1);
        console.log(res1);// 123.12

        //3.其他类型(undefined与null) 转数字 ：  Number(数据)
        //原理 : (1)可以解析整数和小数   (2)只要有任意非数字字符，则会得到NaN
        console.log(Number('123.12.3a'));//NaN
        // console.log(Number(undefined));// NaN
        // console.log(Number(null));// 0
        // console.log(Number(''));// 0
        // console.log(Number(true));// 1 有
        // console.log(Number(false));// 0 没有

​ 2.1.2、其它类型转string类型

    <script>
        /* 
            其他数据类型转string
                (1)常用 ：   String(数据)
                (2)不常用 :  变量名.toString()
         */

        //(1)常用 ：  String(数据)
        // 可以转换 undefined 与 null
        var num = 10;
        console.log( String(num) );//'10'
        console.log( typeof (String(num))  );//'string'

        var und = undefined;
        console.log(String(und));// 'undefined'
        
        var nul = null;
        console.log(String(nul));// 'null'
        
        //(2) 不常用：  变量名.toString()
        // 无法转换undefined 与 null
        console.log(  num.toString() ); // 10

        // console.log(  nul.toString() ); // 报错
   
    </script>

​ 2.1.3、其它类型转boolean类型

    <script>
        /* 
            其他类型转成boolean 
                （1）唯一语法 ：  Boolean(数据)
                (2)得到false : 八种数据
                    0 , -0 , undefined , null , ''  , false , NaN , document.all()
                (3)得到true : 除开false八种数据之外的一切数据

         */

         //转成false八种数据
         console.log( Boolean(0) );
         console.log( Boolean(-0) );
         console.log( Boolean(undefined) );
         console.log( Boolean(null) );
         console.log( Boolean('') ); // '' 空字符串
         console.log( Boolean(false) ); 
         console.log( Boolean(NaN) ); 
         console.log( Boolean( document.all() ) );
         
    </script>

​ 2.2、隐式类型转换

​

    <script>
        /* 
        1. 隐式类型转换 : 当运算符两边数据类型不一致， 编译器会先转成一致 然后计算。
            1.1 其他类型转成number
                数学正号 :  +num
                自增自减： ++ -- 
                算术运算符 ： + - * / %
            1.2 其他类型转成string
                连接符 ： +
            1.3 其他类型转成boolean
                逻辑非 : !
        */

        //1. 其他类型转成number
        //1.1  数学正号(+号写在前面) ：  +num
        // var num =  +prompt('请输入一个数字');
        // console.log(num);

        //1.2 自增自减
        // var num1 = '10';
        // console.log(num1++);// Number('10')++

        //1.2 算术运算符 ： + - * / %
        var res = '张三' - 100;  // Number('张三') - 100 = NaN - 100 = NaN
        console.log(res);//NaN

        //2. 其他类型转string : 连接符  +

        var res = '10' + 11;//+连接符  （1） ‘10’ + String(11) = '10' + '11' = '1011'
        console.log(res);//'1011'

        /* 注意点 ：算术运算符+  与 连接符+  的隐式转换搞混淆  */
        console.log(true + 1);//算术运算符  Number(true) + 1 = 1 + 1 = 2
        console.log(true + '1');//连接符   String(true) + '1' = 'true' + '1' = true1

        //3. 其他类型转boolean : 逻辑非 !

        console.log(!1);//  (1) Boolean(1) = true  (2)  !true = false

        //4. js经典面试题集锦
        console.log(undefined + null);//Number(undefiend) + Number(null) = NaN + 0 = NaN
        console.log(undefined - null);//Number(undefiend) - Number(null) = NaN - 0 = NaN
        console.log(undefined - undefined);//Number(undefiend) - Number(undefiend) = NaN - NaN = NaN
        console.log(null - null);//Number(null) - Number(null) = 0 - 0 = 0

    </script>