JavaScript中“+”的陷阱深刻理解

一、两个中括号相加
[] + []
中括号没有语句块的作用，因此这里的两个中括号就是一个数组。两个数组（对象类型）相加先要将其转换成值类型（基本类型）。
1，转成值类型调用valueOf，[]的valueOf()还是自己


代码如下:

var arr = [];
arr.valueOf() === arr; // true

2，转成字符串，[]的toString是空字符串


代码如下:

[].toString(); // ""
String([]) // ""

结果出来了。两个空字符串相加，结果仍然是空字符串。即这里的“+”指字符串连接而非数字相加。

二、大括号和中括号的相加


代码如下:

{} + []

注意这里的大括号仍然不是对象直接量，而是空语句块。因此可以去掉它，即相当于


代码如下:

+ []

注意，这时由之前看似的两个运算数变成了实际的单运算数。而“+”运算符当只有一个运算数时只代表一个意思：算术加运算。即这里没有字符串连接的意思了。
中括号的toString()是空字符串，又相当于


代码如下:

+ ""

“+”代表算术加运算，字符串非数字，因此将其转换成数字类型。空字符串转成数字类型在上一篇提到过，为0。
那么最后的结果就是0。

三、中括号和大括号相加


代码如下:

[] + {}

与上面的对比，只是中括号和小括号交换了顺序。结果却不相同。大括号放到右边后，与上面讨论的大括号的意义不同了。这里的大括号就是一个对象直接量而非语句块。
“+” 两边的运算数转成值类型分别是："" 和 "[object Object]"。这时 "+" 表示字符串连接。即


代码如下:

"" + "[object Object]"

结果是 “[object Object]”。

四、小括号也和它们相加试试
突发奇想！好吧，小括号虽然有多义性，但它不能作为运算数。

赞 (0)

相关推荐

  • JavaScript中“+”的陷阱深刻理解

    一.两个中括号相加 [] + [] 中括号没有语句块的作用,因此这里的两个中括号就是一个数组.两个数组(对象类型)相加先要将其转换成值类型(基本类型). 1,转成值类型调用valueOf,[]的valueOf()还是自己 复制代码 代码如下: var arr = []; arr.valueOf() === arr; // true 2,转成字符串,[]的toString是空字符串 复制代码 代码如下: [].toString(); // "" String([]) // "&

  • JavaScript Promise执行流程深刻理解

    JavaScript Promise执行流程深刻理解

    目录 手撕Promise 看完收获 Promise分析 作用 特点 总体实现 resolve和reject初步实现 then方法的实现 Promise.all的实现 手撕Promise 手写一个Promise已经是一个常见的手写功能了,虽然实际工作上可能并不会用到.但是在面试时还是会经常被提起的. 看完收获 实现一个手写promise 对promise执行流程有着更深刻的理解 从底层理解proimse,应对各种面试题 Promise分析 作用 通过链式调用的方式,解决回调地狱的问题. 特点 是E

  • 深入浅析JavaScript中with语句的理解

    深入浅析JavaScript中with语句的理解

    JavaScript 有个 with 关键字, with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式. 也就是在指定的代码区域, 直接通过节点名称调用对象. with语句的作用是暂时改变作用域链.减少的重复输入. 其语法结构为: with(object){ //statements } 举一个实际例子吧: with(document.forms[]){ name.value = "lee king"; address.value = "Peking";

  • JavaScript中常见陷阱小结

    你所创建的所有函数都是区分大小写的 单引号('字符串')和双引号("字符串")在JavaScript中没有特殊的区别,都可以用来创建字符串.但作为一般原则,大多数WEB开发者都选择使用单引号 而不是双引号,因为XHTML规范要求所有XHTML属性值都必须使用双引号括起来. JavaScript不支持重载,在JavaScript中,脚本在执行时不会顾及函数定义时的参数,而是直接使用在作用域链中最后定义的那个函数.这意味着,相同名称的函数永远只存在一个实例 闭包是与作用域相关的一个概念,它

  • 深入理解JavaScript中Ajax

    Ajax不是一种新的编程语言,而是使用现有标准的新方法.AJAX可以在不重新加载整个页面的情况下,与服务器交换数据.这种异步交互的方式,使用户单击后,不必刷新页面也能获取新数据. XMLHttpRequest对象 Ajax的核心是XMLHttpRequest对象(XHR).XHR为向服务器发送请求和解析服务器响应提供了接口.能够以异步方式从服务器获取新数据. 在浏览器中创建对象(只支持IE7及更高的版本): var xhr = new XMLHttpRequest(); XHR的用法 首先要介绍

  • 谈谈JavaScript中function多重理解

    JavaScript 中的 function 有多重意义.它可能是一个构造器(constructor),承担起对象模板的作用: 可能是对象的方法(method),负责向对象发送消息.还可能是函数,没错是函数,和对象没有任何关系独立存在的可以被调用的函数. 由于语言设计者的妥协,在 JavaScript 加入了一些 class 相关的特性,以使 JavaScript 看起来确实象 Java,可以 "面向对象".虽然 JavaScript 添加了 new 和 this, 但却没有 clas

  • 了解javascript中变量及函数的提升

    javascript中变量以及函数的提升,在我们平时的项目中其实还是挺常用的,尤其是大型项目中,不知不觉就会顺手添加一些变量,而有时候自己的不小心就会酿成一些不必要错误,趁有时间整理一下自己对于js中变量及函数提升的理解. 首先,看一个题目: console.log(a); // undefined var a = 1; console.log(a); // 1 console.log(b()); function b(){return 2;} // 2 console.log(c) //报错

  • 对JavaScript中this指针的新理解分享

    一直以来对this的理解只在可以用,会用,却没有去深究其本质.这次,借着<JavaScript The Good Parts>,作了一次深刻的理解.(所有调试都可以在控制台中看到,浏览器F12键) 下面我们一起来看看这个this吧. 在我们声明一个函数时,每个函数除了有定义时的parameters(形参),自身还会有额外的两个参数,一个是this,一个是arguments(实参).arguments就是函数实际接受到的参数,是一个类数组.arguments我只做个简略的介绍,重点我们放在thi

  • 深入理解javascript中的 “this”

    一.前言: 我们知道 "this" 是javascript语言的一个关键字,在编写javascript代码的时候,经常会见到或者用到它. 但是,有一部分开发朋友,对 "this" 一知半解,下面我们就一起来探讨学习下javascript中 "this" 的具体含义吧! 二.This总结: This指针作用域: 1).在全局执行环境中使用this,表示Global对象,在浏览器中就是window对象. 2).当在函数执行环境中使用this时,情况就

  • JavaScript中的this陷阱的最全收集并整理(没有之一)

    当有人问起你JavaScript有什么特点的时候,你可能立马就想到了单线程.事件驱动.面向对象等一堆词语,但是如果真的让你解释一下这些概念,可能真解释不清楚.有句话这么说:如果你不能向一个6岁小孩解释清楚一个东西,那么你自己也不懂这个东西.这句话或许有点夸张,但是极其有道理.个人觉得,如果需要掌握一门语言,掌握它的API只是学了皮毛,理解这门语言的精髓才是重点.提及JavaScript的精髓,this.闭包.作用域链.函数是当之无愧的.这门语言正式因为这几个东西而变得魅力无穷. 博客的标题是<J

随机推荐