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

时间：2023-03-09 00:12:54
{}+[] = ? 和 []+{} = ? 浅谈JS数据类型转换

参加公司技术嘉年华第一季（前端、服务端）的间隙，陈导问了我一个问题：{}+[] 和 []+{}两个表达式的值分别是什么？根据我的理解我觉得结果应该都是"[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权威指南（第六版）》

相关文章