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

来源:http://www.cnblogs.com/moqiutao/archive/2017/08/09/7332412.html
-Advertisement-
Play Games

問題 我想將一個數組追加到另一個數組的後面,於是我在 firebug 編寫如下代碼: 但是,出乎意料,它卻輸出了: 而沒有輸出我期望的: 解答 JavaScript 的 + 運算符有兩個目的: 將兩個數相加; 將兩個字元串連接。 規範並沒有定義 + 運算符在數組上的行為,所以javascript 首 ...


問題

我想將一個數組追加到另一個數組的後面,於是我在 firebug 編寫如下代碼:

[1,2] + [3,4]

但是,出乎意料,它卻輸出了:

"1,23,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 來識別。)

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


轉載地址:https://segmentfault.com/a/1190000000264382


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 首先讓我們來先看一個例子: 這是一個簡單的用戶下單購買商品的業務模型,輸入端是用戶,相關物料有訂單和貨物,相關的內部服務有業務(訂單)、財務(支付)、倉儲(備貨)和物流(運輸)。 從圖中我們可以看到,用戶首先向業務部門下了一個訂單,業務部門根據用戶提供的內容生成了一份訂單給客戶,並要求客戶根據訂單金 ...
  • 寫在最前面 這個系列的主旨是要跟大家分享一下關於自動化測試框架的構建的一些心得。這幾年,做了一些自動化測試框架以及團隊的構建的工作。過程中遇到了很多這樣的同學,他們在學習了某一門語言和一些自動化測試的類庫或者工具之後,打算進一步的提高。我想這個系列也許會幫助到你,我們一起從各個維度來看一看自動化測試 ...
  • web: 分三部分:1、HTML;2、CSS;3、JavaScript。 1、HTML:用來構建網頁的結構和內容; 2、CSS:用來給網頁化妝,美化網頁; 3、JavaScript:用來讓網頁呈現動態的數據和效果。 重點: JavaScript: 1)java程式員使用js來實現網頁的業務邏輯; 2 ...
  • 1、自適應網站 自適應網站源碼特征: (1)寬度百分比佈局 (2)文字rem(em)設置大小 展示形式:自適應是為瞭解決如何才能在不同大小的設備上呈現同樣的網頁,網站的內容和佈局是沒有變的。 2、響應式網站 最著名的是前端框架bootstrap(http://v3.bootcss.com/css/) ...
  • 前言 本文是我學習JavaScript過程中收集與整理的一些易錯知識點,將分別從變數作用域,類型比較,this指向,函數參數,閉包問題及對象拷貝與賦值這6個方面進行由淺入深的介紹和講解,其中也涉及了一些ES6的知識點。 JavaScript知識點 1.變數作用域 上方的函數作用域中聲明並賦值了a,且 ...
  • 移動端、H5、響應式佈局、webApp、場景應用、微信二次開發... 都是一個意思 1、首先先介紹一些基本概念 移動端:運行在移動設備上的產品 移動設備:手機、平板、I Touch... 大家都知道我們做得產品大部分都只需要適配IOS系統和安桌系統即可 響應式佈局:在不同的設備上都能給予客戶最好的操 ...
  • 參考資料:http://www.jianshu.com/p/b8811669bcb6 RN在Android打包發佈App 1-:生成一個簽名密鑰你可以用keytool命令生成一個私有密鑰。在Windows上keytool命令放在JDK的bin目錄中(比如C:\Program Files\Java\j ...
  • 響應式媒體查詢 媒體查詢 從 CSS 版本 2 開始,就可以通過媒體類型在 CSS 中獲得媒體支持。如果您曾經使用過列印樣式表,那麼您可能已經使用過媒體類型。清單 1 展示了一個示例。 清單 1. 使用媒體類型 <link rel="stylesheet" type="text/css" href= ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...