JavaScript中“ ”的陷阱

主题：JavaScript中“+”的陷阱

精华帖 (5) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)

作者 正文

• zhouyrt
• 等级:
  
• 
• 性别:
  
• 文章: 242
• 积分: 960
• 来自: 北京
• 

   发表时间：2012-02-22   最后修改：前天

< > 猎头职位: 北京: ITeye网站诚聘产品交互设计

相关文章:  

• JavaScript内核系列 第2章 基本概念
• javascript基础
• JavaScript中“+”的陷阱（续）

推荐群组: HTML5
更多相关推荐

先给出示例，据说是某公司的测试题

 

Js代码  

1. {}+{}  

 

结果是什么？

 

先了解下+运算符。JavaScript中运算符 “+” 很简单，有两种意思

 

1，字符串连接

2，数字相加

 

运算时其它值都将转换成这两个类型。

 

 

JavaScript中有基本类型（undefined, null, booleans, numbers, strings）、对象类型（objects, arrays）和函数类型（functions）。

 

类型转换先将对象/函数类型转换成基本类型。然后在根据运算符“+”转成字符串或数字。

 

其它基本类型转成数字有如下规则

Js代码  

1. Number(undefined) // NaN  
2. Number(null)      // 0  
3. Number(true)      // 1  
4. Number(false)     // 0  
5. Number('1')       // 1  

 

其它基本类型转成字符串有如下规则

 

Js代码  

1. String(undefined) // "undefined"  
2. String(null)      // "null"  
3. String(true)      // "true"  
4. String(false)     // "false"  
5. String(1)         // "1"  

 

 

回到上面的题目 ： {}+{}

 

1，先将两个对象直接量转成基本类型，{}的valueOf()还是自己。如下

 

Js代码  

1. var obj = {};  
2. obj.valueOf() === obj; // true  

 

2，转成字符串，{}的toString()是“[object Object]”

 

最后两个字符串连接的结果是“[object Object][object Object]”。

 

 

结果真是这个吗？在浏览器的控制台中测试不是，是NaN。

 

 

原因是第一个{}并非表示对象直接量，而是语句块的意思。参考：Javascript中大括号“{}”的多义性

 

即第一个大括号是语句块，该语句块中没有任何执行语句，可以忽略。演变是这样的

 

1 {}+{}

2 +{}

3 +"[object Object]"

4 NaN

 

 

恍然大悟了，加个小括号强制将第一个大括号转成对象直接量。结果就是期望的了。如

 

 

Js代码  

1. ({}+{})  

 

这时将输出

 

 

补充：node环境中 {}+{} 输出的是“[object Object][object Object]” 却不是 NaN