在 javascript 中，為什麼 [1,2] + [3,4] 不等於 [1,2,3,4]？

迷渡發表於2012-12-20
JavaScript

在 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）

  1. undefined
  2. boolean
  3. number
  4. string
  5. function
  6. 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。

繼續閱讀：寫了10年Javascript未必全瞭解的連續賦值運算

相關文章