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 相关文章推荐
Jquery实战_读书笔记1—选择jQuery
Jan 22 Javascript
Jquery选择子控件"大于号"和" "区别介绍及使用示例
Jun 25 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
vue addRoutes路由动态加载操作
Aug 04 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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
PHP 编写的 25个游戏脚本
2009/05/11 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
php实现算术验证码功能
2018/12/05 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
pandas 透视表中文字段排序方法
2018/11/16 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
Flask配置Cors跨域的实现
2019/07/12 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
世界汽车零件:World Car Parts
2019/09/04 全球购物
体育专业自荐书
2014/05/29 职场文书
IT工程师岗位职责
2014/07/04 职场文书
社区娱乐活动方案
2014/08/21 职场文书
初三语文教学反思
2016/03/03 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python