在 javascript 中，为什么 [1,2] + [3,4] 不等于 [1,2,3,4]？

MRZYD 发布于2019-08-19 14:20 / 2237人阅读

摘要：但是在使用运算符时，在这两种情况下的工作方式是不同的。在中，数组不是基本类型，它的存在仅仅是一个糖衣语法，它其实是类的实例。然而，对于算数运算符和表现的为数字。课外作业检查其他的浏览器兼容性。

在 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]？

解答

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

将两个数相加；

将两个字符串连接。

规范并没有定义 + 运算符在数组上的行为，所以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 表现的为数字。

还记得我前面说过的 + 运算符吗？它的操作对象是 数字和字符串，也就是 Number，Boolean，String 或者 number，boolean，string。

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

----------------------------------------------------------------------------------------
           | 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。

GPU云服务器云服务器 wordpress 4.3.1 3.2.1.多云管理 add(1)(2)(3) 1类2类3类模块化机房

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/77928.html

在 javascript 中，为什么 [1,2] + [3,4] 不等于 [1,2,3,4]？

摘要：但是在使用运算符时，在这两种情况下的工作方式是不同的。在中，数组不是基本类型，它的存在仅仅是一个糖衣语法，它其实是类的实例。然而，对于算数运算符和表现的为数字。注意用户自定义对象进行运算不一定总产生一个字符串结果。问题我想将一个数组追加到另一个数组的后面，于是我在 firebug 编写如下代码： [1,2] + [3,4] 但是，出乎意料，它却输出了： 1,23,4 而没有输出我期...

sydMobile 2019-08-21 17:37 评论0 收藏0
《JavaScript程序设计》—— 第二章编程

摘要：变量名必须以字母美元符号下划线开始，只能包含字母数字下划线和美元符号。你有元现在是第年小练习计算从和增长到自身的倍需要的次数。 2.3 程序的构成表达式，用于计算并得到值；变量，用于保存数据，以便将来使用；语句，用于执行脚本的操作； 2.3.1 表达式 2 2+8.1+5 （2+8.1）* 5 9>4 9>4 && 1===2 dog+house Hello.length ...

sean 2019-08-20 15:54 评论0 收藏0
JavaScript中，{}+{} 等于多少?

摘要：如果返回值是一个原始值，则返回这个原始值。如果或者中的任意一个为字符串，则将另外一个也转换成字符串，然后返回两个字符串连接操作后的结果。因此，的结果实际上是两个空字符串的连接。原文：What is {} + {} in JavaScript? 译者：justjavac 最近，Gary Bernhardt 在一个简短的演讲视频Wat中指出了一个有趣的 JavaScript 怪癖...

Jrain 2019-08-19 14:20 评论0 收藏0
《 JavaScript程序设计》—— 第三章数据章总结及练习

摘要：如果参数不在与之间，该方法将返回一个空字符串这个不解释了方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。主要总结 JavaScript的六种数据类型：Boolean、Number、String、Null、Undefined、Object 布尔类型布尔真假判定：短路原则 x && y 只有在x和y都为真的情况下为真。即真真为真，短路：因比较运算为左...

W4n9Hu1 2019-08-20 16:08 评论0 收藏0
JavaScript 是如何工作的：JavaScript 的内存模型

摘要：调用堆栈是存放原始数据类型的地方除了函数调用之外。上一节中声明变量后调用堆栈的粗略表示如下。解释改变的正确方法是更改内存地址。在声明时，将在调用堆栈上分配内存地址，该值是在堆上分配的内存地址。这是专门探索 JavaScript 及其所构建的组件的系列文章的第 21 篇。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！如果你错过了前面的章节，可以在这里找到它们：...

baoxl 2019-08-23 16:56 评论0 收藏0