JavaScript中,{}+{}等于多少?

最近,Gary Bernhardt 在一个简短的演讲视频“Wat”中指出了一个有趣的 JavaScript 怪癖: 在把对象和数组混合相加时,会得到一些意想不到的结果。 本篇文章会依次讲解这些计算结果是如何得出的。

在 JavaScript 中,加法的规则其实很简单,只有两种情况:

把数字和数字相加

把字符串和字符串相加

所有其他类型的值都会被自动转换成这两种类型的值。 为了能够弄明白这种隐式转换是如何进行的,我们首先需要搞懂一些基础知识。

注意:在下面的文章中提到某一章节的时候(比如§9.1),指的都是 ECMA-262 语言规范(ECMAScript 5.1)中的章节。

让我们快速的复习一下。 在 JavaScript 中,一共有两种类型的值:

原始值(primitives)

undefined

null

boolean

number

string

对象值(objects)。

除了原始值外,其他的所有值都是对象类型的值,包括数组(array)和函数(function)。

类型转换

加法运算符会触发三种类型转换:

转换为原始值

转换为数字

转换为字符串

通过 ToPrimitive() 将值转换为原始值

JavaScript 引擎内部的抽象操作ToPrimitive()有着这样的签名:

ToPrimitive(input,PreferredType?)

可选参数PreferredType可以是Number或者String。 它只代表了一个转换的偏好,转换结果不一定必须是这个参数所指的类型(汗),但转换结果一定是一个原始值。 如果PreferredType被标志为Number,则会进行下面的操作来转换input(§9.1):

如果input是个原始值,则直接返回它。

否则,如果input是一个对象。则调用obj.valueOf()方法。 如果返回值是一个原始值,则返回这个原始值。

否则,调用obj.toString()方法。 如果返回值是一个原始值,则返回这个原始值。

否则,抛出TypeError异常。

如果PreferredType被标志为String,则转换操作的第二步和第三步的顺序会调换。 如果没有PreferredType这个参数,则PreferredType的值会按照这样的规则来自动设置:

Date类型的对象会被设置为String,

其它类型的值会被设置为Number。

通过 ToNumber() 将值转换为数字

下面的表格解释了ToNumber()是如何将原始值转换成数字的 (§9.3)。

参数结果

undefinedNaN

null+0

booleantrue被转换为1,false转换为+0

number无需转换

string由字符串解析为数字。例如,"324"被转换为324

如果输入的值是一个对象,则会首先会调用ToPrimitive(obj, Number)将该对象转换为原始值, 然后在调用ToNumber()将这个原始值转换为数字。

通过ToString()将值转换为字符串

下面的表格解释了ToString()是如何将原始值转换成字符串的(§9.8)。

参数结果

undefined"undefined"

null"null"

boolean"true" 或者 "false"

number数字作为字符串。比如,"1.765"

string无需转换

如果输入的值是一个对象,则会首先会调用ToPrimitive(obj, String)将该对象转换为原始值, 然后再调用ToString()将这个原始值转换为字符串。

实践一下

下面的对象可以让你看到引擎内部的转换过程。

varobj={valueOf:function(){console.log("valueOf");return{};// not a primitive},toString:function(){console.log("toString");return{};// not a primitive}}

Number作为一个函数被调用(而不是作为构造函数调用)时,会在引擎内部调用ToNumber()操作:

> Number(obj)

valueOf

toString

TypeError: Cannot convert object to primitive value

加法

有下面这样的一个加法操作。

value1+value2

在计算这个表达式时,内部的操作步骤是这样的 (§11.6.1):

将两个操作数转换为原始值 (以下是数学表示法的伪代码,不是可以运行的 JavaScript 代码):

prim1:=ToPrimitive(value1)prim2:=ToPrimitive(value2)

PreferredType被省略,因此Date类型的值采用String,其他类型的值采用Number。

如果 prim1 或者 prim2 中的任意一个为字符串,则将另外一个也转换成字符串,然后返回两个字符串连接操作后的结果。

否则,将 prim1 和 prim2 都转换为数字类型,返回他们的和。

预料到的结果

当你将两个数组相加时,结果正是我们期望的:

> [] + []

''

[]被转换成一个原始值:首先尝试valueOf()方法,该方法返回数组本身(this):

> var arr = [];

> arr.valueOf() === arr

true

此时结果不是原始值,所以再调用toString()方法,返回一个空字符串(string是原始值)。 因此,[] + []的结果实际上是两个空字符串的连接。

将一个数组和一个对象相加,结果依然符合我们的期望:

> [] + {}

'[object Object]'

解析:将空对象转换成字符串时,产生如下结果。

> String({})

'[object Object]'

所以最终的结果其实是把""和"[object Object]"两个字符串连接起来。

更多的对象转换为原始值的例子:

> 5 + new Number(7)

12

> 6 + { valueOf: function () { return 2 } }

8

> "abc" + { toString: function () { return "def" } }

'abcdef'

意想不到的结果

如果+加法运算的第一个操作数是个空对象字面量,则会出现诡异的结果(Firefox console 中的运行结果):

> {} + {}

NaN

天哪!神马情况?(译注:原文没有,是我第一次读到这儿的时候感到太吃惊了,翻译的时候加入的。@justjavac) 这个问题的原因是,JavaScript 把第一个{}解释成了一个空的代码块(code block)并忽略了它。NaN其实是表达式+{}计算的结果 (+加号以及第二个{})。 你在 这里看到的+加号并不是二元运算符「加法」,而是一个一元运算符,作用是将它后面的操作数转换成数字,和Number()函数完全一样 。例如:

> +"3.65"

3.65

以下的表达式是它的等价形式:

+{}

Number({})

Number({}.toString())  // {}.valueOf() isn’t primitive

Number("[object Object]")

NaN

为什么第一个{}会被解析成代码块(code block)呢? 因为整个输入被解析成了一个语句:如果左大括号出现在一条语句的开头,则这个左大括号会被解析成一个代码块的开始。 所以,你也可以通过强制把输入解析成一个表达式来修复这样的计算结果: (译注:我们期待它是个表达式,结果却被解析成了语句,表达式和语句的区别可以查看我以前的『代码之谜』系列的语句与表达式@justjavac

> ({} + {})

'[object Object][object Object]'

一个函数或方法的参数也会被解析成一个表达式:

> console.log({} + {})

[object Object][object Object]

经过前面的讲解,对于下面这样的计算结果,你也应该不会感到吃惊了:

> {} + []

0

在解释一次,上面的输入被解析成了一个代码块后跟一个表达式+[]。 转换的步骤是这样的:

+[]

Number([])

Number([].toString())  // [].valueOf() isn’t primitive

Number("")

0

有趣的是,Node.js 的 REPL 在解析类似的输入时,与 Firefox 和 Chrome(和Node.js 一样使用 V8 引擎) 的解析结果不同。 下面的输入会被解析成一个表达式,结果更符合我们的预料:

> {} + {}

'[object Object][object Object]'

> {} + []

'[object Object]'

3. 这就是所有吗?

在大多数情况下,想要弄明白 JavaScript 中的+号是如何工作的并不难:你只能将数字和数字相加或者字符串和字符串相加。 对象值会被转换成原始值后再进行计算。如果将多个数组相加,可能会出现你意料之外的结果,相关文章请参考在 javascript 中,为什么 [1,2] + [3,4] 不等于 [1,2,3,4]?为什么 ++[[]][+[]]+[+[]] = 10?

如果你想连接多个数组,需要使用数组的 concat 方法:

> [1, 2].concat([3, 4])

[1, 2, 3, 4]

JavaScript 中没有内置的方法来“连接” (合并)多个对象。 你可以使用一个 JavaScript 库,比如 Underscore:

> var o1 = {eeny:1, meeny:2};

> var o2 = {miny:3, moe: 4};

> _.extend(o1, o2)

{eeny: 1, meeny: 2, miny: 3, moe: 4}

注意:和Array.prototype.concat()方法不同,extend()方法会修改它的第一个参数,而不是返回合并后的对象:

> o1

{eeny: 1, meeny: 2, miny: 3, moe: 4}

> o2

{miny: 3, moe: 4}

如果你想了解更多有趣的关于运算符的知识,你可以阅读一下 “Fake operator overloading in JavaScript”(中文正在翻译中)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容