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 高效去除数组重复元素示例代码
Dec 19 Javascript
将查询条件的input、select清空
Jan 14 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
jQuery实现布局高宽自适应的简单实例
May 28 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
基于redis的小程序登录实现方法流程分析
May 25 Javascript
vue中v-model对select的绑定操作
Aug 31 Javascript
js 实现碰撞检测的示例
Oct 28 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函数getenv简介和使用实例
2014/05/12 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
Promise扫盲贴
2019/06/24 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
python实现调用其他python脚本的方法
2014/10/05 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
MySQL面试题目集锦
2016/04/14 面试题
介绍下Java中==和equals的区别
2013/09/01 面试题
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
恰同学少年观后感
2015/06/08 职场文书
经营场所证明范本
2015/06/19 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
Django rest framework如何自定义用户表
2021/06/09 Python
mysqldump进行数据备份详解
2022/07/15 MySQL