【转】JavaScript中,{}+{}等于多少?
原文链接:http://www.2ality.com/2012/01/object-plus-object.html
译文链接:http://www.cnblogs.com/ziyunfei/archive/2012/09/15/2685885.html
最近,Gary Bernhardt在一个简短的演讲视频“Wat”中指出了一个有趣的JavaScript怪癖:在把对象和数组混合相加时,会得到一些你意想不到的结果.本篇文章会依次讲解这些计算结果是如何得出的.
在JavaScript中,加法的规则其实很简单,只有两种情况:你只能把数字和数字相加,或者字符串和字符串相加,所有其他类型的值都会被自动转换成这两种类型的值. 为了能够弄明白这种隐式转换是如何进行的,我们首先需要搞懂一些基础知识.注意:在下面的文章中提到某一章节的时候(比如§9.1),指的都是ECMA-262语言规范(ECMAScript 5.1)中的章节.
让我们快速的复习一下.在JavaScript中,一共有两种类型的值:原始值(primitives)和对象值(objects).原始值有:undefined, null, 布尔值(booleans), 数字(numbers),还有字符串(strings).其他的所有值都是对象类型的值,包括数组(arrays)和函数(functions).
1.类型转换
加法运算符会触发三种类型转换:将值转换为原始值,转换为数字,转换为字符串,这刚好对应了JavaScript引擎内部的三种抽象操作:ToPrimitive(),ToNumber(),ToString()
1.1 通过ToPrimitive()将值转换为原始值
JavaScript引擎内部的抽象操作ToPrimitive()有着这样的签名:
ToPrimitive(input, PreferredType?)
可选参数PreferredType可以是Number或者String,它只代表了一个转换的偏好,转换结果不一定必须是这个参数所指的类型,但转换结果一定是一个原始值.如果PreferredType被标志为Number,则会进行下面的操作来转换输入的值 (§9.1):
- 如果输入的值已经是个原始值,则直接返回它.
- 否则,如果输入的值是一个对象.则调用该对象的valueOf()方法.如果valueOf()方法的返回值是一个原始值,则返回这个原始值.
- 否则,调用这个对象的toString()方法.如果toString()方法的返回值是一个原始值,则返回这个原始值.
- 否则,抛出TypeError异常.
如果PreferredType被标志为String,则转换操作的第二步和第三步的顺序会调换.如果没有PreferredType这个参数,则PreferredType的值会按照这样的规则来自动设置:Date类型的对象会被设置为String,其它类型的值会被设置为Number.
1.2 通过ToNumber()将值转换为数字
下面的表格解释了ToNumber()是如何将原始值转换成数字的 (§9.3).
参数 | 结果 |
undefined | NaN |
null | +0 |
布尔值 | true被转换为1,false转换为+0 |
数字 | 无需转换 |
字符串 | 由字符串解析为数字.例如,"324"被转换为324 |
如果输入的值是一个对象,则会首先会调用ToPrimitive(obj, Number)将该对象转换为原始值,然后在调用ToNumber()将这个原始值转换为数字.
1.3 通过ToString()将值转换为字符串
下面的表格解释了ToString()是如何将原始值转换成字符串的(§9.8).
参数 | 结果 |
undefined | "undefined" |
null | "null" |
布尔值 | "true" 或者 "false" |
数字 | 数字作为字符串,比如. "1.765" |
字符串 | 无需转换 |
如果输入的值是一个对象,则会首先会调用ToPrimitive(obj, String)将该对象转换为原始值,然后再调用ToString()将这个原始值转换为字符串.
1.4 实践一下
下面的对象可以让你看到引擎内部的转换过程.
var obj = {
valueOf: function () {
console.log("valueOf");
return {}; // 没有返回原始值
},
toString: function () {
console.log("toString");
return {}; // 没有返回原始值
}
}
Number作为一个函数被调用(而不是作为构造函数调用)时,会在引擎内部调用ToNumber()操作:
> Number(obj)
valueOf
toString
TypeError: Cannot convert object to primitive value
2.加法
有下面这样的一个加法操作.
value1 + value2
在计算这个表达式时,内部的操作步骤是这样的 (§11.6.1):
- 将两个操作数转换为原始值 (下面是数学表示法,不是JavaScript代码):
prim1 := ToPrimitive(value1)
prim2 := ToPrimitive(value2)PreferredType被省略,因此Date类型的值采用String,其他类型的值采用Number.
- 如果prim1或者prim2中的任意一个为字符串,则将另外一个也转换成字符串,然后返回两个字符串连接操作后的结果.
- 否则,将prim1和prim2都转换为数字类型,返回他们的和.
2.1 预料到的结果
两个空数组相加时,结果是我们所预料的:
> [] + []
''
[]会被转换成一个原始值,首先尝试valueOf()方法,返回数组本身(this):
> var arr = [];
> arr.valueOf() === arr
true
这样的结果不是原始值,所以再调用toString()方法,返回一个空字符串(是一个原始值).因此,[] + []的结果实际上是两个空字符串的连接.
将一个空数组和一个空对象相加,结果也符合我们的预期:
> [] + {}
'[object Object]'
类似的,空对象转换成字符串是这样的.
> String({})
'[object Object]'
所以最终的结果是 "" 和 "[object Object]" 两个字符串的连接.
下面是更多的对象转换为原始值的例子,你能搞懂吗:
> 5 + new Number(7)
12
> 6 + { valueOf: function () { return 2 } }
8
> "abc" + { toString: function () { return "def" } }
'abcdef'
2.1 意想不到的结果
如果加号前面的第一个操作数是个空对象字面量,则结果会出乎我们的意料(下面的代码在Firefox控制台中运行):
> {} + {}
NaN
这是怎么一回事?原因就是JavaScript引擎将第一个{}解释成了一个空的代码块并忽略了它.NaN其实是后面的表达式+{}计算的结果 (加号以及后面的{}).这里的加号并不是代表加法的二元运算符,而是一个一元运算符,作用是将它后面的操作数转换成数字,和Number()函数完全一样.例如:
> +"3.65"
3.65
转换的步骤是这样的:
+{}
Number({})
Number({}.toString()) // 因为{}.valueOf()不是原始值
Number("[object Object]")
NaN
为什么第一个{}会被解析成代码块呢?原因是,整个输入被解析成了一个语句,如果一个语句是以左大括号开始的,则这对大括号会被解析成一个代码块.所以,你也可以通过强制把输入解析成一个表达式来修复这样的计算结果:
> ({} + {})
'[object Object][object Object]'
另外,一个函数或方法的参数也会被解析成一个表达式:
> console.log({} + {})
[object Object][object Object]
经过前面的这一番讲解,对于下面这样的计算结果,你也应该不会感到吃惊了:
> {} + []
0
在解释一次,上面的输入被解析成了一个代码块后跟一个表达式+[].转换的步骤是这样的:
+[]
Number([])
Number([].toString()) // 因为[].valueOf()不是原始值
Number("")
0
有趣的是,Node.js的REPL在解析类似的输入时,与Firefox和Chrome(和Node.js一样使用V8引擎)的解析结果不同.下面的输入会被解析成一个表达式,结果更符合我们的预料:
> {} + {}
'[object Object][object Object]'
> {} + []
'[object Object]'
下面是SpiderMonkey 和 nodejs 中的结果对比.
3.其他
在大多数情况下,想要弄明白JavaScript中的+号是如何工作的并不难:你只能将数字和数字相加或者字符串和字符串相加.对象值会被转换成原始值后再进行计算.如果你想连接多个数组,需要使用数组的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”(已墙).
4.参考
【转】JavaScript中,{}+{}等于多少?的更多相关文章
- JavaScript中,{}+{}等于多少?
最近,Gary Bernhardt 在一个简短的演讲视频“Wat”中指出了一个有趣的 JavaScript 怪癖: 在把对象和数组混合相加时,会得到一些意想不到的结果. 本篇文章会依次讲解这些计算结果 ...
- [译]JavaScript中,{}+{}等于多少?
最近,Gary Bernhardt在一个简短的演讲视频“Wat”中指出了一个有趣的JavaScript怪癖:在把对象和数组混合相加时,会得到一些你意想不到的结果.本篇文章会依次讲解这些计算结果是如何得 ...
- 如何解决JavaScript中0.1+0.2不等于0.3
console.log(0.1+0.2===0.3)// true or false?? 在正常的数学逻辑思维中,0.1+0.2=0.3这个逻辑是正确的,但是在JavaScript中0.1+0.2!= ...
- 在 javascript 中,为什么 [1,2] + [3,4] 不等于 [1,2,3,4]?
在 stackoverflow 上有人提问:arrays - Why does [1,2] + [3,4] = "1,23,4" in JavaScript? 问题 我想将一个数组 ...
- Javascript 中 switch case 等于 (== )还是 恒等于(===)?
Javascript 中 switch case 等于 (== )还是 恒等于(===)? 可以测试一下以下代码,这个 case 中是 等于(==)还是恒等于(===) <script> ...
- 为什么 JavaScript 中 0.1+0.2 不等于 0.3 ?
本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/2kea7-jACCJmSYBQAwXyIg作者:刘洋 在 js 中进行数学的运算时,会出现0. ...
- JavaScript 中的数据类型
Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...
- JavaScript中‘this’关键词的优雅解释
本文转载自:众成翻译 译者:MinweiShen 链接:http://www.zcfy.cc/article/901 原文:https://rainsoft.io/gentle-explanation ...
- JavaScript中typeof、toString、instanceof、constructor与in
JavaScript 是一种弱类型或者说动态语言.这意味着你不用提前声明变量的类型,在程序运行过程中,类型会被自动确定. 这也意味着你可以使用同一个变量保存不同类型的数据. 最新的 ECMAScrip ...
随机推荐
- 54. Search a 2D Matrix && Climbing Stairs (Easy)
Search a 2D Matrix Write an efficient algorithm that searches for a value in an m x n matrix. This m ...
- Windows下利用Windbg 分析dump
概述: 注册生成dump文件的函数. 当程序收到没有捕获的异常时,调用上述函数,生成dump文件. 利用Windbg结合编译程序时生成的pdb和代码来分析dump文件,定位问题. 如下代码生成dump ...
- MFC webbrowser读取文档的meta分析
IDispatch* pDisp = NULL; IDispatch* pDisp2 = NULL; IHTMLDocument2 *pHtmlDoc2 = NULL; IHTMLElementCol ...
- Linux 组群账户管理
一.Linux组群账户配置文件 1./etc/group文件 /etc/group文件是用户组群的配置文件,内容包括用户和用户组群,并且能显示出用户是归属哪个用户组群或哪几个用户组群.一个用户可以归属 ...
- C++中的RTTI机制解析
RTTI RTTI概念 RTTI(Run Time Type Identification)即通过运行时类型识别,程序能够使用基类的指针或引用来检查着这些指针或引用所指的对象的实际派生类型. RTTI ...
- cs11_c++_lab1
lab1.cpp #include "Point.hh" #include <iostream> #include <cmath> using namesp ...
- CSS子元素居中(父元素宽高已知,子元素未知)
<style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; l ...
- Deep Learning(深度学习)学习笔记整理
申明:本文非笔者原创,原文转载自:http://www.sigvc.org/bbs/thread-2187-1-3.html 4.2.初级(浅层)特征表示 既然像素级的特征表示方法没有作用,那怎样的表 ...
- NO.2
虚拟语气的终结版.英语语法的终结时刻.迎接新的英语挑战!!!
- AIX系统程序异常不释放光驱处理
AIX操作系统有时会出现程序异常不释放光驱,可以用以下命令进行处理: #fuser -kxuc /dev/cd0 或者 #fuser /dev/cd0 以上命令会列出访问光驱设备的所有进程,然后使用k ...