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 相关文章推荐
理解JavaScript中的事件
Sep 23 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
DWZ刷新dialog解决方法
Mar 03 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 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
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
JS使用正则表达式判断输入框失去焦点事件
2019/10/16 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
廉政教育心得体会
2014/01/01 职场文书
入党积极分子思想汇报
2014/01/02 职场文书
高一新生军训方案
2014/05/12 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python
pycharm无法安装cv2模块问题
2022/05/20 Python