JavaScript中“+”的陷阱深刻理解


Posted in Javascript onDecember 04, 2012

一、两个中括号相加
[] + []
中括号没有语句块的作用,因此这里的两个中括号就是一个数组。两个数组(对象类型)相加先要将其转换成值类型(基本类型)。
1,转成值类型调用valueOf,[]的valueOf()还是自己

var arr = []; 
arr.valueOf() === arr; // true

2,转成字符串,[]的toString是空字符串
[].toString(); // "" 
String([]) // ""

结果出来了。两个空字符串相加,结果仍然是空字符串。即这里的“+”指字符串连接而非数字相加。

二、大括号和中括号的相加

{} + []

注意这里的大括号仍然不是对象直接量,而是空语句块。因此可以去掉它,即相当于
+ []

注意,这时由之前看似的两个运算数变成了实际的单运算数。而“+”运算符当只有一个运算数时只代表一个意思:算术加运算。即这里没有字符串连接的意思了。
中括号的toString()是空字符串,又相当于
+ ""

“+”代表算术加运算,字符串非数字,因此将其转换成数字类型。空字符串转成数字类型在上一篇提到过,为0。
那么最后的结果就是0。

三、中括号和大括号相加

[] + {}

与上面的对比,只是中括号和小括号交换了顺序。结果却不相同。大括号放到右边后,与上面讨论的大括号的意义不同了。这里的大括号就是一个对象直接量而非语句块。
“+” 两边的运算数转成值类型分别是:"" 和 "[object Object]"。这时 "+" 表示字符串连接。即
"" + "[object Object]"

结果是 “[object Object]”。

四、小括号也和它们相加试试
突发奇想!好吧,小括号虽然有多义性,但它不能作为运算数。

Javascript 相关文章推荐
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
Javascript实现图片不间断滚动的代码
Jun 22 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 Javascript
JS实现购物车基本功能
Nov 08 Javascript
将光标定位于输入框最右侧实现代码
Dec 04 #Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 #Javascript
js 限制数字 js限制输入实现代码
Dec 04 #Javascript
JSON语法五大要素图文介绍
Dec 04 #Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 #Javascript
cument.execCommand()用法深入理解
Dec 04 #Javascript
页面只能打开一次Cooike如何实现
Dec 04 #Javascript
You might like
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
域名和cookie问题(域名后缀)
2012/10/10 PHP
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
php中关于换行的实例写法
2019/09/26 PHP
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
python输入整条数据分割存入数组的方法
2018/11/13 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
职业培训师职业生涯规划
2014/02/18 职场文书
《太阳》教学反思
2014/02/21 职场文书
2014年安全生产责任书
2014/07/22 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书