JavaScript的隐式转换

一、 JavaScript 数据类型

js中有7种数据类型,可以分为两类:原始类型、对象类型。

简单数据类型(也称为原始类型):Undefined、Null、Boolean、Number、String 和 Symbol。ES6 中新增了一种 Symbol 。这种类型的对象永不相等,即始创建的时候传入相同的值,可以解决属性名冲突的问题,做为标记。
复杂数据类型叫 Object(对象)。Object 是一种无序名值对的集合。

二、 JavaScript 隐式转换

在js中,当运算符在运算时,如果两边数据不统一,CPU就无法计算,这时我们编译器会自动将运算符两边的数据做一个数据类型转换,转成一样的数据类型再计算。
这种无需程序员手动转换,而由编译器自动转换的方式就称为隐式转换。
在js中,想要将对象转换成原始值,必然会调用toNumber() 和 toPrimitive() 方法,是内部的。
toNumber() 方法,比较好理解,就是转换成 Number 类型,类似 Number() 方法。
该函数形式如下:
toPrimitive(input,preferedType?)
input是输入的值,preferedType是期望转换的类型,他可以是字符串,也可以是数字。

1. 隐式转换规则

  1. 转成string类型: +(字符串连接符)

  2. 转成number类型:++/–(自增自减运算符) + - * / %(算术运算符) > < >= <= == != === !== (关系运算符)

  3. 转成boolean类型:!(逻辑非运算符)

涉及隐式转换最多的两个运算符 + 和 ==。

2. + 运算符

+运算符即可数字相加,也可以字符串相加。所以转换时很麻烦,有些也比较难理解:
1.字符串连接符+:会把其他数据类型调用String()方法转成字符串然后拼接
2.算术运算符+:会把其他数据类型调用Number()方法转成数字然后做加法计算

//+是字符串连接符:
//String(1)+'true'='1true'
console.log( 1 + "true")://"1true"
//+是算术运算符:
//1 + Number(true)=1+1=2
console.log ( 1 + true);//2
//1+ Number(undefined)=1+NaN=NaN
console.log( 1 + undefined);// NaN
//1+Number(null)=1+0=1
console.log( 1 + null);//1

3. == 运算符

1.对象和布尔值比较

对象和布尔值进行比较时,对象先转换为字符串,然后再转换为数字,布尔值直接转换为数字

[] == true;  //false

[]转换为字符串’’,然后转换为数字0,true转换为数字1,所以为false

2.对象和字符串比较

对象和字符串进行比较时,对象转换为字符串,然后两者进行比较。

[1,2,3] == '1,2,3' // true  

[1,2,3]转化为’1,2,3’,然后和’1,2,3’, so结果为true;

3.对象和数字比较

对象和数字进行比较时,对象先转换为字符串,然后转换为数字,再和数字进行比较。

[1] == 1;  // true  

对象先转换为字符串再转换为数字,二者再比较 [1] => ‘1’ => 1 所以结果为true

4.字符串和数字比较

字符串和数字进行比较时,字符串转换成数字,二者再比较。

'1' == 1 // true

5.字符串和布尔值比较

字符串和布尔值进行比较时,二者全部转换成数值再比较。

'1' == true; // true 

6.布尔值和数字比较

布尔值和数字进行比较时,布尔转换为数字,二者比较。

true == 1 // true

其实规律很简单,大家可以记下边这个图
数据转换
在这里插入图片描述

如图,任意两种类型比较时,如果不是同一个类型比较的话,则按如图方式进行相应类型转换,如对象和布尔比较的话,对象 => 字符串 => 数值 布尔值 => 数值。

[] == false;
![] == false;

这两个的结果都是true,第一个是,对象 => 字符串 => 数值0 false转换为数字0,这个是true应该没问题,
第二个前边多了个!,则直接转换为布尔值再取反,转换为布尔值时,空字符串(’’),NaN,0,null,undefined这几个外返回的都是true, 所以! []这个[] => true 取反为false,所以![] == false为true。

4. >运算符

  1. 当关系运算符两边有一边是字符串的时候,会将其他数据类型使用Number()转换,然后比较关系↓

    console.log("2">10 );//false Number(2)>10=2 >10=false
    
  2. 当关系运算符两边都是字符串的时候,此时同时转成number然后比较关系。此时并不是按照Number()的形式转成数字,而是按照字符串对应的unicode编码来转成数字。使用这个方法可以查看字符的unicode编码:字符串.charCodeAt(字符下标,默认为0).

    console.log("2">"10");//true
    //'2'.charCodeAt()>'10'charCodeAt()=50>49=true
    console.log("2".charCodeAt())://数字50
    console log("10".charCodeAt())://数字49(默认返回第一个字符的编码,如果想要查自第二个字符可以传参下标)
    

    多个字符从左往右依次比较↓

    console.log( "abc" > "b" );//false
    先比较'a''b','a''b'不等,则直接得出结果
    console log ( "abc" > "aad")//true
    先比较'a''a',两者相等,继续比较第二个字符
    'b''a' ,得出结果,
    console.log("a".charCodeAt())://数字97
    console.log("b".charCodeAt())://数字98
    
  3. 特殊情况(无视规则):
    如果数据类型是 undefined与null,,得出固定的结果

console.log( undefined == undefined);//true
console.log( undefined == null);//true
console.log( null == null);//true
console.log( NaN == NaN );//false
console.log( Number('as') == NaN );//false

Null类型的比较不等于1或0(实际上,null仅与undefined 相当),但当强制转换ToNumber(null)===0;(但一定要注意区分null和0)
NaN与任何数据比较都是NaN ,Number(‘as’) 输出 NaN 。NaN == NaN 为什么是 false。其实 js 规定的NaN 不等于NaN。

5. 复杂数据类型

在隐式转换时会先转成String,然后再转成Number运算

{}+[]//0
[]+{}//"[object Object]"
0+{}//"0[object Object]"
{}+0//0

是因为{}可以是空块或空对象文字,具体取决于上下文。

可以是一元加运算符,也可以是连接运算符,具体取决于上下文。
第一个代码示例是一个空块,它可能也不存在,使表达式相同+[],意思是“空数组转换为数字”。

你不能把一个块作为一个函数参数,所以第二个代码示例{}是一个对象,代码的意思是“用一个数组来传递一个对象”(隐式地将对象和数组转换为字符串)。换句话说,{} + []表达式是一个empty代码块,后面跟array一个数字(Number[])的约束。

在第二个示例中,您只是向concat数组提供了一个对象文字(空对象)。这就是你收到的原因[object Object]。

实例:
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
空数组的toString()方法会得到空字符串,而空对象的toString()方法会得到字符串[object Object] (注意第一个小写o,第二个大写O)
在这里插入图片描述
在这里插入图片描述
== 等号两边都为对象时,比较的是地址

[]==[]//false
{}=={}//false
  • 14
    点赞
  • 94
    收藏
    觉得还不错? 一键收藏
  • 11
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值