JavaScript类型转换

在这里插入图片描述

1.原始值到原始值的转换

1.原始值转化为布尔值

所有的假值(undefined、null、0、-0、NaN、””)会被转化为 false,其他都会被转为 true。

2.原始值转化为字符串

都相当于 原始值 + “”

注意:null和undefined这两个值没有toSting()方法,但是可以通过+""方法或者通过String()函数转换成字符串。

var a = null+" "
typeof a   //string

var b = String(null);
typeof b   //string

x+""相当于 String(x)。

3.原始值转化为数字

+" 66" // 66
+" 6 7 " // NaN

布尔转数字:true -> 1, false -> 0
字符串转数字:以数字表示的字符串可以直接会转为字符串,如果字符串头尾有空格会忽略,但是空格在中间,转换结果就是 NaN。

2.原始值到对象的转换

null 和 undefined 转对象直接抛异常。
原始值通过调用 String()、Number()、Boolean()构造函数,转换为他们各自的包装对象。

3.对象到原始值的转换

1.对象转化为布尔都为true

2.对象到字符串:

如果对象有 toString() 方法,就调用 toString() 方法。如果该方法返回原始值,就讲这个值转化为字符串。
如果对象没有 toString() 方法或者 该方法返回的不是原始值,就会调用该对象的 valueOf() 方法。如果存在就调用这个方法,如果返回值是原始值,就转化为字符串。

3.对象到数字

对象转化为数字做了跟对象转化为字符串做了想同的事儿,不同的是后者是先调用 valueOf 方法,如果调用失败或者返回不是原始值,就调用 toString 方法。

4.补充
一些常用内置对象toString方法和valueOf的转换规则。

toString相关:
在这里插入图片描述

valueOf相关:
在这里插入图片描述

附注:![]转换成!true,但是[]转换成0,[true]转换成1.[]非空就转换成1

在这里插入图片描述

4.==运算符如何进行类型转换

1.如果一个值是null,另一个值是undefined,则相等

2.如果一个是字符串,另一个值是数字,则把字符串转换成数字,进行比较

3.如果任意值是true,则把true转换成1再进行比较;如果任意值是false,则把false转换成0再进行比较

4.如果一个是对象,另一个是数值或字符串,把对象转换成基础类型的值再比较。对象转换成基础类型,利用它的 toString 或者 valueOf 方法。 js 核心内置类,会尝试 valueOf 先于 toString(可以理解为对象优先转换成数字);例外的是 Date,Date 利用的是 toString 转换。非 js 核心的对象,通过自己的实现中定义的方法转换成原始值。

5.+运算符如何进行类型转化

1.如果作为一元运算符就是转化为数字,常常用来将字符串转化为数字

+"2"   //2
+false   //0

2.如果作为二元运算符就有两种转换方式

  • 两边如果有字符串,另一边一会转化为字符串进行相加
  • 如果没有字符串,两边都会转化为数字进行相加,对象也根据前面的方法转化为原始值数字。
  • 如果其中的一个操作数是对象,则将对象转换成原始值,日期对象会通过 toString() 方法进行转换,其他对象通过 valueOf()方法进行转换,但是大多数方法都是不具备可用的 valueOf() 方法,所以还是会通过 toString() 方法执行转换。

流程图如下:

在这里插入图片描述

6.实战分析

1.[]+[] // ""

_1. 首先运算符是 + 运算符而且很明显是二元运算符,并且有对象,所以选择最后一点,操作数是对象,将对象转换为原始值。

_2. 两边对象都是数组,左边的数组先调用 valueOf() 方法无果,然后去调用 toString(), 方法,在 toString() 的转化规则里面有『将数组转化为字符串,用逗号分隔』,由于没有其他元素,所以直接是空字符串 “”。

_3. 因为加号有一边是字符串了,所以另外一边也转为 字符串,所以两边都是空字符串 “”。

_4. 所以加起来也是空字符串 “”。

(! + [] + [] + ![]).length // 9

_1. 首先我们会看到挺多一元运算符,「+」、「!」,对于一元运算符是右结合性,所以可以画出以下运算顺序。

在这里插入图片描述

_2. 对于+[],数组是会被转化为数字的而不是字符串,可见「+ 运算符如何进行类型转化」的第一条,所以经过第一步就会转化为

(!0 + [] + “false”).length

_3. 第二步比较简单,0 转化为布尔值就是 false,所以经过第二步就转化为

(true + [] + “false”).length

_4. 第三步中间的 []会转为空字符串,在「+ 运算符如何进行类型转化」第二条的第三点,对象会被转转化为原始值,就是空字符,所以经过第三步之后就会变成

(“true” + “false”).length

_5. 第五步就比较简单啦,最终就是

附录:

在这里插入图片描述

参考文章:https://www.imooc.com/article/253958


下面是一些补充:

1.对数据类型有期待的语句和表达式:

1、期待boolean类型的 : if 语句 、 do while 语句 、 while do 语句 、 && || ! (与或非逻辑表达式) 、 ? : ( 三目运算符)

2、期待number类型的 : + - * / % (算数运算符) 、 ++ – (增量/减量运算符) 、 > 、 >= 、 < 、 <= 数字比较

3、期待字符串的: + (字符串连接) 、 > 、 >= 、 < 、 <= 字母排序比较

4、特殊的 : == 、 != (不)相等运算符,在检测两个操作数是否相等时,会进行类型转换;(注意 : === 、!== 是(不)严格相等运算符,是不会进行类型转换的)

需要说明的是,1中当然可以传入表达式,但是表达式返回的结果也肯定会返回boolean类型的值,或者返回值被转换为boolean;2和3有一些重复的运算符 : + 、 > 、 >= 、 < 、 <= ,这些运算符在不同场景下发生自动转换的时候,会有不同的优先级。

有如下场景:

1 + 1   // 2  
'1' + '1'  // '11' 
'1' + 1   // "11"
'1' + null   //  "1null"
'1' + {}   //  "1[object Object]"
'1' + new Date()  //  "1Wed Jun 20 2018 11:49:55 GMT+0800 (中国标准时间)"
1 + {}   // "1[object Object]"
1 + new Date()  //  "1Wed Jun 20 2018 11:56:56 GMT+0800 (中国标准时间)"
1 + []   //  "1"
1 + null  // 1

从例子中可以看到,+ 的转换其实是优先转换为字符串的,如果有一个操作数是对象的话,会转化为原始值(除了Date对象是调用toString()方式转换 , 其他对象都会调用 valueOf() 进行转换 , 但是由于多数对象只是简单的继承了valueOf() , 只会返回对象,而不是一个原始值,所以会再调用toString进行转换) , 所以这里可以简单的理解为:都会转换为字符串 。 另一个操作数也会转换为字符串.

“+”还有特殊的用法,就是转换为数字,如下。

+ null   //  0
+ undefined  //  NaN
+ {}  //  NaN
+ new Date()  //  1529467646682
+ ["5"]  //  5
+ "4"  //  4

+{}   //NaN
+[]   //0

> 、 >= 、 < 、 <= 这些比较运算符的规则和 + 类似,不过是会优先转换为数字进行比较。

// 作用 : 比较数值大小或者再字母表中的位置。也是期待数字和字符串!
1、两个操作数中只要有一个不是字符串,则两个值都转为数字 
"3" > "11"    //  true   字符串比较
3 > "11"      // false   11 转换为数字 
true > '0'    // true true 和 ‘0’ 都转换为数字 
2、对象同样会转换为原始值(不过这里的Date对象也是优先调用valueOf ,返回的是毫秒数,其他的和上述 + 的一样),如果转换后有一个字不是字符串,则两个值也都需要转换为数字    

1000 > new Date()  // false
100000000000000000000000 > new Date()  //  true   date对象转换为数字
"100000000000000000000000" > new Date()  //  true  左值也随着 date对象一起转换为数字
'11' > ["3"]  //  false  数组转为字符串,所以这里是字符串比较

还可以查看:
https://www.imooc.com/article/39977
https://www.imooc.com/article/38254
https://www.imooc.com/article/37556
https://www.imooc.com/article/72694
https://www.imooc.com/article/263737
https://www.imooc.com/article/75329

https://www.imooc.com/article/40069
https://www.imooc.com/article/39970

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值