{}+[] = ? 和 []+{} = ? 浅谈JS数据类型转换

时间:2022-09-27 14:51:22

    参加公司技术嘉年华第一季(前端、服务端)的间隙,陈导问了我一个问题:{}+[] 和 []+{}两个表达式的值分别是什么?根据我的理解我觉得结果应该都是"[object Object]",但是结果却并不是这样子的({}+[] = 0  []+{} = '[object Object]'),我就想这不科学呀,一下子颠覆了我所学过的js知识了。于是我决定搞明白这究竟是是什么与原因导致的?

    通过查找资料,发现之所以结果不一样,是因为js解释器把{}当做了代码块语法解析,那么{}+[]就变成+[],这样的话很容易就解释了上面两个表达式的结果了~
    为什么{}在右边就没有被解释成代码块语法呢?这就要讲到+运算符的用法,+可以做数字的加法和字符串的链接,只要有一个是字符串,另外一个就会数据类型转换成字符串,然后进行拼接操作;都为对象的时候,这种情况下会通过valueOf获取对象的值,如果原始值还是对象的话,会通过toString()方法,转化成字符串。
    下面解释一下{}+[]和[]+{}的执行过程:
    {}+[],由+运算符的语法可以知道,会从左向右解析,遇到{}被认为是代码块(语法)被忽略,继续就变成了+[],此时+就不是加法运算符,也不是字符串连接符了,变成了转换数字的运算符了,数组通过valueOf方法获取值还是数组,执行toString方法后变成''空字符串,然后空字符串数据类型转化成数字,就变成了0,也解释了变种{}-[]=-0
    []+{},从左向右解析,[]被转化成''空字符串,{}通过valueOf方法获取原始值还是对象(注意不能通过{}.valurOf()获取,此时{}会被解析成代码块),通过toString方法结果是'[object Object]',接下来解释简单的字符串连接问题了,所以结果是'[object Object]'。注:对象的toString和valueOf都不一样,并且可以自定义。
    扩展:由上面的例子,进而讨论一下JS中数据类型转换的问题
    JS的取值特别灵活,会根据上下文语境,对数据进行隐式的转换(当然也可以通过显示的方法,对数据进行类型转换)。一般情况下,这种数据类型转换多用在运算符运算的时候.js的数据分成两大类,原始值和对象,原始值有:null undefined string number boolean,其他都是对象。js引擎提供三种数据类型转换操作: ToPrimitive(),ToNumber(),ToString()。
    toPrimitive()是将值转化成原始值,有两个参数,第一个需要转换的数据,第二个参数是prefferedType(number或者string),处理的顺序是:首先如果是原始值直接返回原始值,其次执行valueOf方法,如果返回原始值直接返回,如果不是,执行toString方法,转化成字符串。 Date对象第二个参数是string(如果第二个参数是string的话,函数的处理顺序应该把toString方法提到第二步),其他对象都是number。
第一个参数 是否是原始值
valueOf
toString
备注
new Obeject()
Object
'[object Object]'
 
new Number(1)
1 '1' 隐式转换不是对象,可用Object.prototype.isPrototypeOf检测
new Blooean(1)
true 'true' 隐式转换不是对象,可用Object.prototype.isPrototypeOf检测
new Date()
1395985229639
Fri Mar 28 2014 13:40:29 GMT+0800 (中国标准时间)  
 
new Function('console.log(1);')
function anonymous() { console.log(1); }
' function anonymous() { console.log(1); } '
 
...
...
...
...
 
     toNumber将值转化成数字。原始值转换程数字如下表(对象参照 toPrimitive )
原始值 结果
null
+0
undefined
NAN
123
123
'123'
123
true/false
1/+0

 toString将值转化成字符串,原始值转化成字符串如下表(对象参照toPrimitive ):

原始值 结果
null
'null'
undefined
'undefined'
123
'123'
'123a' '123a'
true/false
'true'/'false'
上面是对javascript数据类型转换的一点理解,在这里记录一下。
 
参考资料:
《javascript权威指南(第六版)》