JavaScript判断数据类型、JavaScript数据类型转换

半夜删你代码·

已于 2022-04-20 22:54:17 修改

阅读量429

点赞数 1

文章标签：前端

于 2022-04-20 22:47:29 首次发布

本文链接：https://blog.csdn.net/m0_60376759/article/details/124308825

版权

基本数据类型：String，、Number、Boolean、Undefined、Null、Symbol

引用数据类型：Object 数组函数

1.判断数据类型-typeof

typeof可以识别出基本类型String，、Number、Boolean、Undefined、Symbol，但是不能识别null。不能识别引用数据类型，会把null、array、object统一归为object类型,但是可以识别出function。

所以typeof可以用来识别一些基本类型

        <script>
    // typeof可以识别出基本类型String，、Number、Boolean、Undefined、Symbol，
    // 但是不能识别null,null返回的是object
            var str = 'abc';
            console.log(typeof str);

            var num = 207204858;
            console.log(typeof num);

            var bool = true;
            console.log(typeof bool);

            var unde = undefined;
            console.log(typeof unde);

            // 把null归类为object
            var nu = null;
            console.log(typeof nu);

            var sym = Symbol();
            console.log(typeof sym);

            // 引用数据类型
            // array 
            // var arr = [];
            // console.log(typeof arr);

            // obj
            // var obj = {};
            // console.log(typeof obj);

            // function
            function a(){}
            console.log(typeof a);


            // 总结：
            // typeof 可以识别基本数据类型的
            // string number boolean undefined symbol,不能识别null
            //        可以识别引用数据的类型function
            // 但是不可以识别array  object

        </script>

2.判断数据类型-instanceof

instanceof不能识别出基本的数据类型 String，、Number、Boolean、Undefined、Null、Symbol

但是可以检测出引用类型，如array、object、function，同时对于是使用new声明的类型，它还可以检测出多层继承关系。

instanceof 只能判断的是引用数据类型

注意：使用instanceof的时候那么判断undefined、null类型需要判断是Object类型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>03_判断数据类型-instanceof</title>
    </head>
    <body>
        <script>
            // 基本数据类型
            // var str = 'abc';
            // console.log(str instanceof String);

            // var num = 123;
            // console.log(num instanceof Number);

            // var bool = true;
            // console.log(bool instanceof Boolean);

            // 注意：使用instanceof的时候 那么判断undefined类型 需要
            // 判断是Object类型
            // var unde = undefined;
            // console.log(unde instanceof Object);

            // var nu = null;
            // console.log(nu instanceof Object);

            // var sym = Symbol();
            // console.log(sym instanceof Symbol);

            // 引用数据类型
            // 对象
            var obj = {};
            console.log(obj instanceof Object);

            // 数组
            var arr = [];
            console.log(arr instanceof Array);

            // 函数
            function a(){}
            console.log(a instanceof Function);

            // 注意：
            // instanceof 只能判断的是引用数据类型
        </script>
    </body>
</html>

3.constructor

null、undefined没有construstor方法，因此constructor不能判断undefined和null。

        <script>
            // constructor判断基本数据类型的
            // 由于undefined和null没有constructor方法 所以不能使用

            // string
            var str = 'abcd';
            console.log(str.constructor === String);

            // number
            var num = 10010;
            console.log(num.constructor === Number);

            // boolean
            var bool = false;
            console.log(bool.constructor === Boolean);

            // symbol
            var sym = Symbol();
            console.log(sym.constructor === Symbol);

            // undefined
            // var unde = undefined;
            // console.log(unde.constructor === Object);

            // null
            var nu = null;
            console.log(nu.constructor === Object);

            // 总结：constructor可以判断基本数据类型的数据 但是由于
            // undefined和null没有constructor方法 所以不可以使用
            // string number booolean symbol都可以使用
        </script>

4.判断数据类型-tostring

此方法可以相对较全的判断js的数据类型。

        <script>    
            // 基本数据类型
            //      string
            var str = 'abc';
            console.log(Object.prototype.toString.call(str));
            //      number
            var num = 123;
            console.log(Object.prototype.toString.call(num));
            //      boolean
            var bool = true;
            console.log(Object.prototype.toString.call(bool));
            //      undefined
            var unde = undefined;
            console.log(Object.prototype.toString.call(unde));
            //      null
            var nu = null;
            console.log(Object.prototype.toString.call(nu));
            //      symbol
            var sym = Symbol();
            console.log(Object.prototype.toString.call(sym));


            // 引用数据类型
            //      object
            var obj = {};
            console.log(Object.prototype.toString.call(obj));
            //      arr
            var arr = [];
            console.log(Object.prototype.toString.call(arr));
            //      function
            function a(){}
            console.log(Object.prototype.toString.call(a));
        </script>

判断基本数据类型：使用的是typeof

判断引用数据类型：使用的是instanceof

JavaScript数据类型转换

1.Number方法

Number()方法将其他类型转换成number类型 Number方法会返回一个转换后的值

转换后为0的转换

（1）字符串：console.log(Number('0'));

（2）空字符串 Number转换之后是0 ：console.log(Number(''));

（3）如果字符串中都是空格的话那么结果就是0：console.log(Number(' '));

（4）数字：console.log(Number(0));

（5）布尔：console.log(Number(false));

（6）null：console.log(Number(null));

        <script>
            //string
            // console.log(Number('123'));
            // console.log(Number('-123'));
            // console.log(Number('1.23'));
            // console.log(Number('-1.23'));
            // console.log(Number('0'));    //---->0

            // 空字符串 Number转换之后是0
            console.log(Number(''));     //----->0
            // 如果字符串中都是空格的话 那么结果就是0
            console.log(Number('         ')); //----->0
            // NaN
            // console.log(Number('a'));
            // console.log(Number('李'));
            // console.log(Number('1a'));

            // number
            // console.log(Number(1));
            // console.log(Number(-1));
            // console.log(Number(1.1));
            // console.log(Number(-1.1));
            // console.log(Number(0));      ------>0
            // console.log(Number(NaN));  //NaN
            // console.log(Number(Infinity));  //Infinity
            // console.log(Number(Number.MAX_VALUE));
            // console.log(Number(Math.PI));

            // boolean
            // console.log(Number(true)); // 1
            // console.log(Number(false));// 0  ------>0

            // undefined  
            // console.log(Number(undefined));  //NaN

            // null
            // console.log(Number(null));          //------->0
        </script>

2.数字类型转换-parseInt

parseInt是一个全局方法,它可以把值转换为整数

第1步,先解析位置0处的字符,如果不是有效数字,则直接返回 NaN.
第2步,如果位置0处的字符是数字,或者可以转换为有效数字,则继续解析位置1处的字符,如果不是有效数字,则直接返回位置0处的有效数字。
第3步,以此类推,按从左到右的顺序,逐个分析每个字符,直到发现非数字字符为止。
第4步,parseInt()将把前面分析合法的数字字符全部转换为数值并返回。

        <script>
            // string
            console.log(parseInt('1'));
            console.log(parseInt('-1'));
            // parseInt解析整数  
            // 解析到第一个非数字的字符就停止
            console.log(parseInt('1.2'));
            console.log(parseInt('-1.2'));
            console.log(parseInt('0'));

            console.log(parseInt('1a2b3c'));
            console.log(parseInt('123a'));
            console.log(parseInt('a123'));

            // number
            console.log(parseInt(1));
            console.log(parseInt(-1));
            console.log(parseInt(1.2));
            console.log(parseInt(-1.2));
            console.log(parseInt(0));
            console.log(parseInt(NaN));
            console.log(parseInt(Infinity));

            // boolean
            console.log(parseInt(true));
            console.log(parseInt(false));

            // undefined
            console.log(parseInt(undefined));

            // null
            console.log(parseInt(null));


        </script>

3.数字类型转换-parseFloat

parseFloat()也是一个全局方法，它可以把值转换成浮点数，即它能够识别第一个出现的小数点，而第二个小数点视为非法。解析过程和parseInt相同。

        <script>
            // string
            console.log(parseFloat('1'));
            console.log(parseFloat('-1'));
            console.log(parseFloat('1.2'));
            console.log(parseFloat('-1.2'));
            console.log(parseFloat('0'));

            console.log(parseFloat('1.2.3.4'));
            console.log(parseFloat('1.2a.3'));
            console.log(parseFloat('a1.2'));

            // number
            console.log(parseFloat(1));
            console.log(parseFloat(-1));
            console.log(parseFloat(1.3));
            console.log(parseFloat(-1.3));
            console.log(parseFloat(0));
            console.log(parseFloat(0.0));

            console.log(parseFloat(NaN));
            console.log(parseFloat(Infinity)); //Infinity

            // boolean
            console.log(parseFloat(true));
            console.log(parseFloat(false));

            // undefined
            console.log(parseFloat(undefined));

            // null
            console.log(parseFloat(null));
        </script>

数字类型转换时

console.log(parseInt(Infinity)); 返回NaN

console.log(parseFloat(Infinity)); 返回Infinity

4.运算符转换

如果变量乘以1，则变量会被JS自动转换成数值，如果无法转换成合法数值，则返回NaN

        <script>
            // var a = '1';
            // console.log(typeof a);

            // 将字符串进行了*1 那么结果就变成了数字类型
            var b = a * 1;
            console.log(typeof b);

            // var a = '1';
            // console.log(typeof a);

            // var b = a - 0;
            // console.log(typeof b);


            // var a = '1';
            // console.log(typeof a);

            // var b = a / 1;
            // console.log(typeof b);

            
            var a = '1';
            console.log(typeof a);

            var b = a + 0;
            console.log(typeof b);


        </script>