Javascript中的+運算符

guqiu 發布于2019-08-20 15:45 / 2177人閱讀

摘要：在網上或面試題中經常會看到一些奇怪的語句，比如在中運算符是個重載運算符，可用來拼接字符串，以及把兩個數字相加。至于是哪種情況要看運算符兩邊參數的類型。如何轉換在規范中有詳細的說明，但規范看起來是有點費勁。不過目前的知識足夠回答原先的問題了。

在網上或面試題中經常會看到一些“奇怪”的語句，比如

{}+{}
// "[object Object][object Object]"

{}+[]
// 0

[]+{}
// "[object Object]"

[]+[]
// ""

在Javascript中+運算符是個重載運算符，可用來拼接字符串，以及把兩個“數字”相加。至于是哪種情況要看運算符兩邊參數的類型。
在日常的開發中我們也不會碰到這么麻煩的事，但弄弄清楚總是好的。在規范中巴拉巴拉地說了一堆，簡單來說就是：

1. 對于原生類型，參數中只要有一方是字符串，則按字符串連接處理，否則按數字相加處理，不是數字的會先轉成數字再相加。

原生類型有：undefined, null, boolean, number, string。

下面是一些示例：

0 + "1"     // "01"
null + 1    // 1
true + 1    // 2
false + 1   // 0
undefined + 2   // NaN,  因為undefined轉成Number是NaN

2. 對于引用類型，則需要先轉換成原生類型，再按以上規則相加。如何轉換在規范中有詳細的說明，但規范看起來是有點費勁。簡單來說就是：默認情況下都轉化成字符串，要搞特殊的話，請重寫valueOf()方法。

來個例子：

function Complex(a, b) {
  this.a = a;
  this.b = b;
}

Complex.prototype.valueOf() {
  return this.a;
}

new Complex(2, 3) + new Complex(4, 5);
// 6

但由于Js不支持真正的操作符重載，即不能相加得到自定義類型的對象，所以以上示例在實踐代碼中非常少用。

不過目前的知識足夠回答原先的問題了。但是慢著，{}+[] 為什么和 []+{}不一樣？這其實是個語法問題。前者相當于：

{}
+[]

其實是兩個句子， [] 轉換成數字是 0。很容易驗證 ({}+[]) === "[object Object]"

+[]  // 0

有人可能要問，那 new Date() 的 valueOf() 不是轉換成數字嗎？為什么相加結果還是字符串類型呢？

new Date().valueOf();
// 1491904757087

1 + new Date();
// "1Tue Apr 11 2017 18:02:16 GMT+0800 (CST)"

這是Date類做了特殊處理， @@toPrimitive，默認情況下對 Date 的相加以字符串方式連接，但比較時則會轉換成數字。

new Date() < new Date("2018-01-01")
// true, 現在是2017

將引用類型轉換成原生類型在很多操作符中都有用到，比如 <, >，所以有必要對其研究一番，以下js代碼大概描述了其行為。

/**
 * @param input     即要轉換的對象
 * @preferredType   期望轉換成的類型，可以是string或number
 */
function ToPrimitive(input, preferredType) {
  if (typeof input !== "object") {
    return input;   // 本來就是原生類型
  }

  var hint = preferredType || "default";
  if (typeof input["@@toPrimitive"] === "function") {   // @@toPrimitive是個內部方法，這里只是示例說明其工作原理
    return input["@@toPrimitive"](input, hint);   // 這就是為什么Date能特殊處理的原因
  }

  if (hint === "string") {
    return input.toString();
  }

  return input.valueOf();
}

詳細的請參考規范

云服務器 GPU云服務器 java中的++運算 php中的除法運算 javascript運算符 php中的或運算符號

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/82470.html

JavaScript 中的強制類型轉換

摘要：完整清單是中添加，此處不予介紹布爾值用來表示可能是真或假的值。結果抽象比較運算符在比較它們之前在類型之間進行自動轉換。中的隱式轉換稱為強制類型轉換，并在規范中定義。這些內置類型可用于在不同類型之間進行顯式轉換。翻譯：瘋狂的技術宅原文：https://www.valentinog.com/bl... 本文首發微信公眾號：前端先鋒歡迎關注，每天都給你推送新鮮的前端技術文章 show...

endiat 2019-08-23 16:52 評論0 收藏0
學習React之前你需要知道的的JavaScript基礎知識

摘要：和類在開始時遇到類組件，只是需要有關類的基礎。畢竟，中的條件呈現僅再次顯示大多數是而不是特定的任何內容。在我的研討會期間，更多的材料是關于JavaScript而不是React。其中大部分歸結為JavaScript ES6以及功能和語法，但也包括三元運算符，語言中的簡寫版本，此對象，JavaScript內置函數（map，reduce，filter）或更常識性的概念，如：可組合性，可重用...

bitkylin 2019-08-02 11:01 評論0 收藏0
深入理解javascript中的立即執行函數(function(){…})()

摘要：要理解立即執行函數，需要先理解一些函數的基本概念。函數表達式使用關鍵字聲明一個函數，但未給函數命名，最后將匿名函數賦予一個變量，叫函數表達式，這是最常見的函數表達式語法形式。 javascript和其他編程語言相比比較隨意，所以javascript代碼中充滿各種奇葩的寫法，有時霧里看花，當然，能理解各型各色的寫法也是對javascript語言特性更進一步的深入理解。 ( functio...

melody_lql 2019-08-20 15:28 評論0 收藏0
JavaScript 編程精解中文第三版一、值，類型和運算符

摘要：來源編程精解中文第三版翻譯項目原文譯者飛龍協議自豪地采用谷歌翻譯部分參考了編程精解第版在機器的表面之下，程序在運轉。本章將會介紹程序當中的基本元素，包括簡單的值類型以及值運算符。示例中的乘法運算符優先級高于加法。來源：ApacheCN『JavaScript 編程精解中文第三版』翻譯項目原文：Values, Types, and Operators 譯者：飛龍協議：CC BY-NC...

wh469012917 2019-08-23 18:19 評論0 收藏0
Javascript語句 - Javascript語法基礎 - Javascript核心

摘要：多數運算符都是由標點符號表示，比如和。通常會根據需要對操作數進行類型轉換左值是一個古老的屬于，它是指表達式只能出現在賦值運算符的左側。也稱為嚴格相等運算符，它用來檢測兩個操作數是否嚴格相等。運算符的檢測規則是和運算符的求反。源代碼： https://github.com/RobinQu/Programing-In-Javascript/blob/master/chapters/...

lavnFan 2019-08-19 14:47 評論0 收藏0