Javascript中的+運(yùn)算符

guqiu 發(fā)布于2019-08-20 15:45 / 2170人閱讀

摘要：在網(wǎng)上或面試題中經(jīng)常會(huì)看到一些奇怪的語(yǔ)句，比如在中運(yùn)算符是個(gè)重載運(yùn)算符，可用來(lái)拼接字符串，以及把兩個(gè)數(shù)字相加。至于是哪種情況要看運(yùn)算符兩邊參數(shù)的類型。如何轉(zhuǎn)換在規(guī)范中有詳細(xì)的說(shuō)明，但規(guī)范看起來(lái)是有點(diǎn)費(fèi)勁。不過(guò)目前的知識(shí)足夠回答原先的問(wèn)題了。

在網(wǎng)上或面試題中經(jīng)常會(huì)看到一些“奇怪”的語(yǔ)句，比如

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

{}+[]
// 0

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

[]+[]
// ""

在Javascript中+運(yùn)算符是個(gè)重載運(yùn)算符，可用來(lái)拼接字符串，以及把兩個(gè)“數(shù)字”相加。至于是哪種情況要看運(yùn)算符兩邊參數(shù)的類型。
在日常的開發(fā)中我們也不會(huì)碰到這么麻煩的事，但弄弄清楚總是好的。在規(guī)范中巴拉巴拉地說(shuō)了一堆，簡(jiǎn)單來(lái)說(shuō)就是：

1. 對(duì)于原生類型，參數(shù)中只要有一方是字符串，則按字符串連接處理，否則按數(shù)字相加處理，不是數(shù)字的會(huì)先轉(zhuǎn)成數(shù)字再相加。

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

下面是一些示例：

0 + "1"     // "01"
null + 1    // 1
true + 1    // 2
false + 1   // 0
undefined + 2   // NaN,  因?yàn)閡ndefined轉(zhuǎn)成Number是NaN

2. 對(duì)于引用類型，則需要先轉(zhuǎn)換成原生類型，再按以上規(guī)則相加。如何轉(zhuǎn)換在規(guī)范中有詳細(xì)的說(shuō)明，但規(guī)范看起來(lái)是有點(diǎn)費(fèi)勁。簡(jiǎn)單來(lái)說(shuō)就是：默認(rèn)情況下都轉(zhuǎn)化成字符串，要搞特殊的話，請(qǐng)重寫valueOf()方法。

來(lái)個(gè)例子：

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不支持真正的操作符重載，即不能相加得到自定義類型的對(duì)象，所以以上示例在實(shí)踐代碼中非常少用。

不過(guò)目前的知識(shí)足夠回答原先的問(wèn)題了。但是慢著，{}+[] 為什么和 []+{}不一樣？這其實(shí)是個(gè)語(yǔ)法問(wèn)題。前者相當(dāng)于：

{}
+[]

其實(shí)是兩個(gè)句子， [] 轉(zhuǎn)換成數(shù)字是 0。很容易驗(yàn)證 ({}+[]) === "[object Object]"

+[]  // 0

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

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

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

這是Date類做了特殊處理， @@toPrimitive，默認(rèn)情況下對(duì) Date 的相加以字符串方式連接，但比較時(shí)則會(huì)轉(zhuǎn)換成數(shù)字。

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

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

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

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

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

  return input.valueOf();
}

詳細(xì)的請(qǐng)參考規(guī)范