美文网首页JavaScript 进阶营
JS隐式数据类型转换

JS隐式数据类型转换

作者: 哎呦_連啓 | 来源:发表于2019-06-04 09:35 被阅读0次

隐式数据类型转换介绍

前面有总结过 JS数据类型转换 Number(), toString(), parseInt()等都是属于强制转换。有时我们遇到当运算符在运算时,如果两边数据类型不统一,CPU无法计算,这是编译器会自动将运算符两边的数据做一个数据类型转换,转换成一样的数据类型在进行运算,这种无需程序员手动转换,而由编译器自动转换的方式就称为隐式转换。

隐式转换规则

1.转为number类型:+ - * / ++ --(算数运算符) > < >= <= == != === !==(比较运算符);
2.转为string类型:+ 不仅是算术运算符,还可以做为字符串连接符把数据转换成string类型;
3.转为boolean类型: !(逻辑非运算符)
另外需要补充的一点常用的几种运算符各运算符优先级:
算术运算符:+ - * / ++ --
比较运算符: > < >= <= == != === !==
逻辑运算符:&& || !
赋值运算符:= += -= *= /=
算术运算符 > 比较运算符 > 逻辑运算符 > 赋值运算符

字符串连接符与算术隐式转换规则混淆
    console.log(1 + true);      //2
    console.log(1 + "true");        //"1true"
    console.log(1 + undefined);     //NaN
    console.log(1 + null);      //1

+两边有一边是字符串,那这个+就是字符串连接符,它会把其他数据类型调用String()方法转成字符串然后拼接;
+做为算术运算符会把其他数据类型调用Number()转成数字然后做加法运算;
布尔值true会被转换数字 1
undefined会被转换为 NaN
null会转换为数字 0

比较运算符会把其他数据类型转换number数据类型后再比较
    console.log("2" > 10);      //false
    console.log("a" > 10);      //false
    console.log(10 > "a");      //false
    console.log(Number("a"));      //NaN
    console.log("2" > "10");        //true    '2'.charCodeAt() > '10'.charCodeAt() = 50 > 49 = true
    console.log(false == 0);        //true
    console.log(false == "");       //true
    console.log(Number(false));       //0
    console.log(NaN == NaN);        //false
    console.log(undefined == null);     //true
    console.log(Number(NaN));       //NaN
    console.log(Number(undefined));     //NaN
    console.log(Number(null))       //0

比较运算符的一边是字符串的时候,会调用 Number() 方法把字符串转换成数字在进行比较;
当关系运算符两边都是字符串的时候,此时同时转成number然后比较关系。重点:此时并不是按照Number()的形式转成数字,而是按照字符串对应的unicode编码来转成数字,使用 字符串.charCodeAt(字符下标,默认为0) 方法可以查看字符的unicode编码。
布尔值和数字比较时,会把布尔值通过 Number() 转成数字再进行比较,true转成 1false 转成 0
字符串和布尔值比较时,会把字符串和布尔值都通过 Number() 转成数字再进行比较
在javascript中有两种特殊情况无视规则:1. null == undefined; 2. NaN和谁都不相等,包括他自己

复杂数据类型的隐式转换

复杂数据类型转成number数据类型:
1.先使用 valueOf() 方法获取原始值,如果原始值不是number数据类型,则使用 toString() 方法转成string;
2.再通过 Number() 方法装成number数据类型
需要注意的:空数组的toString()方法会得到空字符串,而空对象的toString()方法会得到字符串[object Object]

    console.log([1,2] == '1,2');        //true  先将左边数组转成string,然后右边也是string则转成unicode编码运算
    console.log([] == 0);       //true  默认通过同String()转成空字符串,再通过Number("")转成0
    var a = {};
    console.log(a == 0);        //false
    console.log(a.valueOf().toString());        //"[object Object]"
逻辑非隐式转换和比较运算符隐式转换搞混淆

0-0NaNundefinednull""(空字符串)这几种情况转换布尔类型会得到 false,除了这几种情况外所有数据类型都会得到 true

    //大坑
    console.log ( [] == 0 );        //true
    console.log ( ! [] == 0 );      //true
    //神坑
    console.log ( [] == ! [] );     //true
    console.log ( [] == [] );       //false
    //史诗级坑
    console.log({} == !{});     //false
    console.log({} == {});      //false

[]0比较:
(1)[].valueOf().toString() 得到空字符串
(2)Number("") == 0 成立
![]0比较:
(1)逻辑非优先级高于关系运算符 ![] = false (空数组转布尔得到true,然后取反得到false)
(2)false == 0 成立
[]![]比较:
(1) [].valueOf().toString() 得到空字符串 ""
(2) ![] = false
(3) Number("") == Number(false) 成立 都是0
[][]比较:
引用类型数据存在堆内存中,栈内存中存储的是地址,所以他们的结果是false
{}!{}比较:
(1) {}.valueOf().toString() 得到字符串'[object Object]'
(2) !{} = false
(3) Number('[object Object]') == Number(false) 不成立,因为转换到最后 是NaN0比较,所以结果为 false
{}{}比较:
引用类型数据存在堆内存中,栈内存中存储的是地址,所以他们的结果是false

相关文章

  • JS里的数据类型转换

    在js中,数据类型转换分为显式数据类型转换和隐式数据类型转换。 1, 显式数据类型转换 a:转数字: 1)Numb...

  • JS隐式数据类型转换

    隐式数据类型转换介绍 前面有总结过 JS数据类型转换 Number(), toString(), parseInt...

  • JavaScript的显式转换和隐式转换

    js的显式转换和隐式转换都是数据类型的转换;js的数据类型是弱类型的,即可以给变量赋值为任意的数据类型,当进行运算...

  • 隐式转换 显示转换

    ####一.隐式转换 **1) 查看数据类型** *typeof* ```js 案例: v...

  • JS的基本小结

    JS基本输出方式 JS数据类型 变量 常量 变量常量小练习 声明提前 隐式转换 显示转换/强制转换

  • 隐式转换的规则

    问题:隐式转换的规则是什么 说起JS的隐式转换规则,我们可以说下JS的基础数据类型 JS的七中类型 我们所熟知的J...

  • JavaScript类型转换

    在js中数据类型转换一般分为两种,即强制类型转换和隐式类型转换(利用js弱变量类型转换)。 强制类型转换 即通过使...

  • JavaScript 01 (JS引入/变量/数据类型/类型转换

    JS的引入及调试,常量,字面量,变量,JS中的数据类型,JS的运算符,JS的运算符之隐式类型转换,强制类型转换,M...

  • Js汇总(一)

    一、Js数据类型: 二 、隐式转换 // + 加号 拼接/运算(如果在运算是里面 第 )// -减号 ...

  • Java数据类型与运算符

    隐式转换 在这段代码中就发生了隐式数据类型转换,本来是byte数据类型的y因为与int x相加,byte被隐式提升...

网友评论

    本文标题:JS隐式数据类型转换

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