JavaScript隐式转换之道

151 阅读3分钟

JavaScript的数据类型隐式转换主要分为三种情况

场景一:算术运算符

转化原则:大致是换为数值,个别是换为字符串

-*/%运算符

①字面量及new内置对象,true为1;false为0

②null为0

③undefined为NaN

④字符串的字面量及new内置对象,空字符串为0,纯数字为数字本身,带有非数字时为NaN;

⑤对象及数组等引用类型,先变为字符串,再根据④进行转变

+号运算符

以上④、⑤情况下,作为拼接符使用

场景二:==比较运算符

转换原则为:

布尔值是一种特殊的数字,所以参与运算就三种类型,数字、字符串、对象

数字和字符串为基本类型,对象为引用类型

引用类型必须转化为基本类型进行比较

如果两个基本类型进行比较时,如字符串和数字比较时,目标是数字

具体参考以下详细说明:

①布尔值和数字,变为数字

②字符串和数字,变为数字

③对象和字符串,对象变为字符串

④对象和数字,对象变为字符串,再变为数字;

⑤对象和布尔值,对象变为字符串,再变为数字;布尔值变为数字

    // 布尔值——>数值
    console.log(true+1);//1+1
    console.log(false+12);//0+12

    // null、undefined——>数值
    console.log(null+12);//0+12
    console.log(undefined+12);//NaN

    //字符串——>数值
    // ①做运算时,+号为拼接,其他运算符变为数值,其中''为0,纯数字时变为数字本身,有其他非数字时,直接为NaN
    var chuan = '';
    console.log(chuan+12);// 字符串拼接,结果为12
    console.log(chuan-12);// 转换为0,结果为-12

    var chuan = '0';
    console.log(chuan+12);// 字符串拼接,结果为012
    console.log(chuan-12);// 转换为0,结果为-12

    var chuan = '1';
    console.log(chuan+12);// 字符串拼接,结果为112
    console.log(chuan-12);// 转换为1,结果为-11

    var chuan = '1a';
    console.log(chuan+12);// 字符串拼接,结果为1a12
    console.log(chuan-12);// 转换为1a,结果为NaN

    // ②做对比时==,其中''为0,其他纯数字时为数字本身,有其他非数字时,为NaN
    // ③做对比时===,全部为false,因为类型不一样
    var dui = '';
    if(dui==0){
        console.log(true);
    }else{
        console.log(false);
    }
    if(dui===0){
        console.log(true);
    }else{
        console.log(false);
    }

    var dui = '0';
    if(dui==0){
        console.log(true);
    }else{
        console.log(false);
    }
    if(dui===0){
        console.log(true);
    }else{
        console.log(false);
    }

    var dui = '1';
    if(dui==1){
        console.log(true);
    }else{
        console.log(false);
    }
    if(dui===1){
        console.log(true);
    }else{
        console.log(false);
    }

    var dui = '1a';
    if(dui==NaN){
        console.log(true);
    }else{
        console.log(false);//false 因为NaN不等于NaN
    }
    if(dui===NaN){
        console.log(true);
    }else{
        console.log(false);
    }


    // 对象——>数值
    // 对象时,+号运算符时,为拼接,拼接到最后一个元素上,其他运算符为NaN
    var duixiang = {name:1};
    console.log(duixiang+1);
    console.log(duixiang-1);
    // 数组时,+号运算符时,为拼接,拼接到最后一个元素上,其他运算符为NaN
    var duixiang = [1,2,3];
    console.log(duixiang+1);
    console.log(duixiang-1);

    // new出来的字符串对象,+号为拼接符,其他运算符变为对应数字
    var duixiang = new String('1');
    console.log(duixiang+1);
    console.log(duixiang-1);
    // new出来的数值对象,变为对应数字
    var duixiang = new Number(1);
    console.log(duixiang+1);
    console.log(duixiang-1);
    // new出来的布尔值对象,true为1,false为0
    var duixiang = new Boolean(true);
    console.log(duixiang+1);
    console.log(duixiang-1);

场景三:if()语句

转化原则:换为布尔值进行判断

①数值型——>布尔值 0和NaN为false,其他均为true

②字符串——>布尔值 只有空字符串''为false,其他均为true

③null、undefined——>为false

④对象(数组、正则、函数)——>只要是对象(null除外),都为true

⑤所有new操作符创建的对象——>都为true

⑥两个逻辑非!!,可以把类型变为布尔值,如 !!0的值为false、!!{}的值为true

总结:0、NaN、''、null、undefined 5种形式为false,其他都为true

    // 数值——>布尔值
    var ling = 0;
    var ling = -0;
    var ling = NaN;
    var ling = 3;
    var ling = -3;
    if(ling){
        console.log(true);
    }else{
        console.log(false);
    }
    // 字符串——>布尔值
    var zifu = '';
    var zifu = '0';
    var zifu = '-0';
    var zifu = '12';
    var zifu = 'false';
    var zifu = 'true';
    var zifu = '[]';
    if(zifu){
        console.log(true);
    }else{
        console.log(false);
    }
    // null、undefined——>布尔值
    var teshu = undefined;
    var teshu = null;
    if(teshu){
        console.log(true);
    }else{
        console.log(false);
    }
    // 对象——>布尔值
    var dui = {};
    var dui = [];
    var dui = function(){};
    var dui = /./;
    var dui = new Date();
    if(dui){
        console.log(true);
    }else{
        console.log(false);
    }