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 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
js模仿hover的具体实现代码
Dec 30 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
webpack配置之后端渲染详解
Oct 26 Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
深入理解redux之compose的具体应用
Jan 12 Javascript
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
将光标定位于输入框最右侧实现代码
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数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
详细介绍Python的鸭子类型
2016/09/12 Python
python 实现UTC时间加减的方法
2018/12/31 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
python 随机森林算法及其优化详解
2019/07/11 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
GWT的应用有哪两种部署模式
2012/12/21 面试题
给妈妈洗脚活动方案
2014/08/16 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
务虚会发言材料
2014/12/25 职场文书
老人节主持词
2015/07/04 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
html中两种获取标签内的值的方法
2022/06/16 jQuery