js中[]+{}、{}+[]、[]+[]、{}+{} 的那些事
首先,我们先看看下为什么会有这种可(ke)爱(wu)的问题· _ ·!!
都知道js是一种弱语言,则其中的弱类型导致js的隐式类型转换频繁,所以题中的括号,一眼望去并不是多好判断;
先来康康在js里的隐式规则:
- js在进行加法(+)运算的时候, 会先推测两个操作数是不是number类型;如果是,则直接相加得出结果。
注:加法运算符(+)运算法则从右往左起 详见:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
- 如果其中有一个操作数为string,则将另一个操作数隐式的转换为string,然后进行字符串拼接得出结果。
- 如果操作数为对象或者是数组这种复杂的数据类型,那么就将两个操作数都转换为字符串,进行拼接。
- 如果操作数是像boolean这种的基本数据类型,那么就将操作数转换为number相加得出结果(true:1,false:0)。
明白这些那题目上的问题就不算问题了,嘻嘻嘻嘻😁
[]+{} // "[object,Object]"
解析:没啥问题,正常来看,[]==>' ' {}==>[object,Object] 二者都为复杂数据类型,转换为字符串形式,在进行拼接
{}+[] // 0
惊不惊喜,意不意外,刺不刺激,出乎意料,不按套路出牌😂
解析:js在解析{}把它当成一片代码,但里面没有内容,so解析为空,真正参与运算的则是+[], ('+'又可以判断相加的数据类型是不是可为数字),而[]又可转为number类型0,Number([])==>0(很绕叭),答案不言而喻~
那问题来了,如何证明{}
被看作一个代码块而不是一个js对象呢?很简单, 我们可以在{}
里写上一些语句,比如:
{console.log('hello')}==>hello
[]+[] // ""
解析:没啥好狡辩的,相同的数据类型,把他们都转为字符串类型,String([])==>"",拼接就OK了~
{}+{} // "[object Object][object Object]"
解析:狡辩+1,相同的数据类型,把他们都转为字符串类型,String({})==>"[object Object]",拼接就OK了~
来个附加题玩玩:(!+[]+[]).length 得结果是什么???
天使😈微笑,答案评论出来叭~~~详解见 V