美文网首页
Javascripe类型判断与转换

Javascripe类型判断与转换

作者: 阿秃 | 来源:发表于2021-03-11 20:00 被阅读0次

    基础数据类型判断

    typeof 用于返回值的类型

    typeof 1; //number
    typeof '1'; //string
    

    //instaceOf - 对于区分对象和数组

    //typeof 不好使了
    typeof {}; //object
    typeof []; //object
    //使用instaceOf
    console.log([] instanceof Array);//true
    console.log([] instanceof Object);//true,
    console.log({} instanceof Array);//false
    

    判断null 的方法

    var a = null;
    (!a && typeof a === "object"); //true
    

    关于NaN - 非数字数值类型

    console.log(typeof NaN === "number");  //true NaN 是number
    console.log(NaN === NaN); //false NaN 和任何东西都不相等,甚至它自己
    console.log(isNaN('123')) //false isNaN在判断类型的时候,会首先将它转为Number,注意是使用Number(), 而不是parseInt(),转化之后再判断isNaN
    console.log(isNaN({})) // true {}无法转为数字
    console.log(isNaN('uuu'));//true 
    

    什么是JS的包装类型

    在javascript中, 基本类型式没有属性和方法的,但是为了便于操作基本类型的值,在调用基本类型的属性或方法时 Javascript会在后台隐式的将基本类型的值转换位对象

    const a = "abc";
    a.length; //3
    a.toUpperCase(); //"ABC"
    

    在访问abc.length 时, Javascript将’abc' 在后台转换成String('abc'),然后再访问其length属性

    任何new 出来的都是实例对象 , 比如

    var tt = new Boolean(false);
    console.log(tt); //Boolean{false} 它是一个对象
    

    如何使用Object.prototype.toString 来判断值的类型,为什么使用它可以判断值的类型?

    在任何值上调用Object.prototype.toString 方法,都会返回一个[object NativeConstructorName] 格式的字符串。每个类在内部都有一个[[Class]] 属性, 这个属性中就指定了上述字符串中的构造函数名。

    Object.prototype.toString.call({name:'Jack'}) //[object object]
    Object.prototype.toString.call(function(){}) //[object Function]
    Object.prototype.toString.call(/name/) //[object RegExp]
    Object.prototype.toString.call(null); //"[object Null]"
    Object.prototype.toString.call(undefined); //"[object Undefined]"
    
    基本类型值式没有构造函数的,为什么也能返回构造函数名呢? 这是因为在toString被调用时, Javascript 将基本类型值转换成了包装类型

    javascript中如何进行显式类型转换

    Javascript的类型转换的结果总是得到string、number和boolean类型的一种

    string和number的相互转换
    const a = 18
    const b = String(18) //'18'
    const c = Number(b) //18
    
     // 字符串变成number也可以像下面这样
    const a1 = 18
    const b = a.toString()
    
    const a = '18'
    const b = +a //18
    
    const a2 = '18px'
    const b2 = parseInt(a2) //18
    const c = Number(a2) //NaN
    

    可以看出,parseInt 与 Number 不同的地方在于, parseInt允许传入非数字字符,其从左往右解析,遇到非数字字符就会停下, 而Number不允许传入非数字字符

    任意值转换boolean

    使用Boolean函数来显式地将任意值转为boolean

    const a = '123'
    const b = undefined
    const c = 0;
    Boolean(a) //true
    Boolean(b) //false
    Boolean(c) //false
    //实践中最常用的方法是使用!! 符号
    const a = '123'
    const b = undefined
    const c = 0
    !!a //true
    !!b //false
    !!c //false
    

    注意题目中的类型转换是这种形式:String(123), 而不是这样: new String(123), 因为第一个才是进行包装类型转换,而第二个是生成实例

    关于一元操作符+ 还有一个用法,那就是将日期对象转换成number
    var date = new Date("Mon, 1Mar 2020 08:53:06")
    +date //1583013186000
    

    JavaScript 中如何进行隐式类型转换

    以下是基本类型的值在不同操作符的情况下隐式转换的规则

      • 操作符
        当+操作符的两边有至少一个string 类型变量时,两边的变量都会被隐式转换为字符串;其它情况下两边的变量都会被转换为“数字”
    1+'23' //'123'
    1+false //1
    1+true //2
    '1' + false //'false'
    false + true //1
    

    2.-、*、\ 操作符
    这三个操作符时为数字操作而设计的, 所以操作符两边的变量都会被转换成数字, 注意NaN也是一个数字

    1*'23' //23
    1*false //0
    1/'aa' //NaN
    

    3.对于==操作符
    操作符两边的值都尽量转成number

    3 == true //false, 3 转为number为3,true 转为number为1
    '0' == false // true, '0' 转为number为0, false转为number 为0
    '0' == 0 //true
    
    1. 对于 < 和 > 比较符
      如果两边都是字符串,则比较字母表顺序:
    'ca' < 'bd' //false
    'a'<'b' //true
    

    其它情况下,转换为数字再比较:

    '12' < 13 //true
    false > -1 //true
    

    以上说的是基本类型的隐式转换,而对象会被ToPrimitive 转换为基本类型再进行转换:

    var a = {}
    a>2 //false
    

    其对比过程如下:

    a.valueOf() // {}
    a.toString() //"[object Object]", 现在是一个字符串了
    Number(a.toString()) //NaN, 根据上面< 和 > 操作符的规则,要转换成数字
    NaN > 2 //false 得出比较结果
    

    再来个例子

    var a = {name:'Jack'}
    var b = {age:18}
    a+b  //"[object Object][object Object]"
    

    运算过程如下:

    a.valueOf() //{} 
    a.toString() //"[object Object]"
    b.valueOf() //{}
    b.toString() //"[object Object]"
    a + b //"[object Object][object Object]"
    

    相关文章

      网友评论

          本文标题:Javascripe类型判断与转换

          本文链接:https://www.haomeiwen.com/subject/pnufpktx.html