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针对DOM的应用分析(四)
Apr 15 Javascript
通过jQuery源码学习javascript(三)
Dec 27 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
JavaScript常用内置对象用法分析
Jul 09 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
react中props 的使用及进行限制的方法
Apr 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中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
electron制作仿制qq聊天界面的示例代码
2018/11/26 Javascript
Seajs源码详解分析
2019/04/02 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
网络安全类面试题
2015/08/01 面试题
简历中求职的个人自我评价
2013/12/03 职场文书
会计出纳员的自我评价
2014/01/15 职场文书
接待员岗位职责范本
2015/04/15 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
2016春季运动会开幕词
2016/03/04 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
2019感恩宣传标语!
2019/07/05 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
Python编程源码报错解决方法总结经验分享
2021/10/05 Python