在 stackoverflow 上有人提问:arrays
- Why does [1,2] + [3,4] = "1,23,4" in JavaScript?

问题

我想将一个数组追加到另一个数组的后面,于是我在 firebug 编写如下代码:

[1,2] + [3,4]

但是,出乎意料,它却输出了:

"1,23,4"

而没有输出我期望的:

[1,2,3,4]

这是怎么回事呢?为什么 [1,2] + [3,4] 不等于 [1,2,3,4]

类似问题还有:为什么 ++[[]][+[]]+[+[]] = 10?

解答

JavaScript 的 + 运算符有两个目的:

  1. 将两个数相加;

  2. 将两个字符串连接。

规范并没有定义 + 运算符在数组上的行为,所以javascript 首先 把数组转换成字符串,然后在字符串上进行 + 运算。

如果想连接两个数组,可以使用数组的 concat 方法:

[1, 2].concat([3, 4]) // [1, 2, 3, 4]

javascript 中的 + 运算符概述

下面简单介绍一下 + 运算符,有兴趣的话可以看看我以前写的 代码之谜(三)-
运算符

JavaScript 具有 6 种内置 数据类型: (译注:从给出的连接看,原作者的意思应该是 原始类型系统 的数据类型,JavaScript
事实上有两套类型系统。 第一套类型系统是用 typeof 来识别,称之为原始(primitive)类型系统,而第二套类型系统是以它为基础,从 object 这一种类型中发展起来的,即对象类型系统,对象类型系统用instanceof 来识别。@justjavac

  • undefined

  • boolean

  • number

  • string

  • function

  • object

需要注意的是,null 和 [] 是两个截然不同的类型,当使用 typeof 运算时,它们却都返回 object
但是在使用 + 运算符时,在这两种情况下的工作方式是不同的。

在JavaScript 中,数组不是基本类型,它的存在仅仅是一个糖衣语法,它其实是 Array 类的实例。(ps:function 其实也是 Function 类实例的糖衣语法。)

如果说道现在你脑子还是清醒的,是时候加点儿猛料了。javascript 的对象包装器类型例如 new Number(5)new
Boolean(true)
 和 new String("abc") 也都是 object 类型,它们不是数字,布尔,字符串。然而,对于算数运算符 Number 和 Boolean 表现的为数字。

还记得我前面说过的 + 运算符吗?它的操作对象是 数字和字符串,也就是 NumberBooleanString 或者numberbooleanstring

下面的表格就是 + 运算符对于不同类型进行运算后,得到的结果类型

----------------------------------------------------------------------------------------
| undefined | boolean | number | string | function | object | null | array
---------------------------------------------------------------------------------------- undefined | number | number | number | string | string | string | number | string boolean | number | number | number | string | string | string | number | string number | number | number | number | string | string | string | number | string string | string | string | string | string | string | string | string | string function | string | string | string | string | string | string | string | string object | string | string | string | string | string | string | string | string null | number | number | number | string | string | string | number | string array | string | string | string | string | string | string | string | string -------------------------------------------------------------------------------------------

本表适用于 Chrome 13, Firefox 6, Opera 11 and IE9。课外作业:检查其他的浏览器兼容性。

注意:用户自定义对象进行 + 运算不一定总产生一个字符串结果。这主要取决于 对象类型到原生类型转换 的实现方式。

例如:

var o = {
valueOf : function () { return 4; }
};

计算 o + 2 将得到 6, 是一个数字 number;计算 o
+ '2'
 得到 '42', 是一个字符串 string。

在 javascript 中,为什么 [1,2] + [3,4] 不等于 [1,2,3,4]?的更多相关文章

  1. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  2. javascript中的this与函数讲解

    前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...

  3. JavaScript 中的数据类型

    Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...

  4. javascript中的操作符详解1

    好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...

  5. 掌握javascript中的最基础数据结构-----数组

    这是一篇<数据结构与算法javascript描述>的读书笔记.主要梳理了关于数组的知识.部分内容及源码来自原作. 书中第一章介绍了如何配置javascript运行环境:javascript ...

  6. javascript中变量提升的理解

    网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...

  7. 前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型

    前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...

  8. 简单分析JavaScript中的面向对象

    初学JavaScript的时候有人会认为JavaScript不是一门面向对象的语言,因为JS是没有类的概念的,但是这并不代表JavaScript没有对象的存在,而且JavaScript也提供了其它的方 ...

  9. Javascript中的valueOf与toString

    基本上,javascript中所有数据类型都拥有valueOf和toString这两个方法,null除外.它们俩解决javascript值运算与显示的问题,本文将详细介绍,有需要的朋友可以参考下. t ...

  10. 关于javascript中的this关键字

    this是非常强大的一个关键字,但是如果你不了解它,可能很难正确的使用它. 下面我解释一下如果在事件处理中使用this. 首先我们讨论一下下面这个函数中的this关联到什么. function doS ...

随机推荐

  1. (九十七)集成JPush实现远程通知和推送的发送

    上节介绍了通过直接和APNS交互实现推送的方法,较为繁琐,最为重要的是发送推送需要特定的服务端,通过JPush,不仅可以简化客户端的接收,还可以通过控制台或者API实现通知的发送. 首先注册JPush ...

  2. Dynamics CRM2013/2015 Plugin注册工具Register New Assembly时无法看到注册按钮的解决办法

    CRM2013的注册插件工具UI相比2011之前有了一定的改变,但改变UI的同时也给开发人员带来了困扰,打开注册工具点击Register按钮选择dll时页面就是下面这样的,你完全看不到最下面的两个按钮 ...

  3. Cocos2D iOS之旅:如何写一个敲地鼠游戏(四):创建TexturePacker自动脚本

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交流 ...

  4. 页面中iframe中嵌入一个跨域的页面,让这个页面按照嵌入的页面宽高大小显示的方式;iframe嵌套的页面不可以编辑的问题解决方案

    <html> <head> <style> body { margin-left: 0px; margin-top: 0px; margin-right: 0px; ...

  5. HDFS追本溯源:体系架构详解

    Hadoop是一个开发和运行处理大规模数据的软件平台,是Apache的一个用Java语言实现开源软件框架,实现在大量计算机组成的集群中对海量数据进行分布式计算.用户可以在不了解分布式底层细节的情况下, ...

  6. Dynamics CRM Microsoft SQL Server 指定的数据库具有更高的版本

    在做NLB部署时遇到这么个问题,CRMAPP1安装的CRM版本是6.1已经打了SP1补丁,而在CRMAPP2上的CRM安装包是6.0版本,在选择连接现有部署后,最后一步检测就出了问题,如下图所示. 看 ...

  7. XML Publisher Report Issues, Recommendations and Errors

    In this Document   Purpose   Questions and Answers   References APPLIES TO: Oracle Process Manufactu ...

  8. C++ 仿函数/函数指针/闭包lambda

    在上一篇文章中介绍了C++11新引入的lambda表达式(C++支持闭包的实现),现在我们看一下lambda的出现对于我们编程习惯的影响,毕竟,C++11历经10年磨砺,出140新feature,对于 ...

  9. 【Android 应用开发】分析各种Android设备屏幕分辨率与适配 - 使用大量真实安卓设备采集真实数据统计

    .主要是为了总结一下 对这些概念有个直观的认识; . 作者 : 万境绝尘  转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/198 ...

  10. 理解WebKit和Chromium: Web应用和Web运行环境

    转载请注明原文地址:http://blog.csdn.net/milado_nju 注:鉴于这一领域非常热,自己也投身其中,会单独开辟一个专题介绍Web应用和Web运行环境. ## 概述 Web已经从 ...