資訊專欄INFORMATION COLUMN
摘要：前端碎碎念系列會記錄我平時看書或者看文章遇到的問題，一般都是比較基礎(chǔ)但是容易遺忘的知識點，你也可能會在面試中碰到。當(dāng)兩個操作數(shù)都是數(shù)值時，執(zhí)行常規(guī)的數(shù)值加法計算。關(guān)鍵還是要加深對中對數(shù)值轉(zhuǎn)換的理解，以不變應(yīng)萬變。
『前端碎碎念』系列會記錄我平時看書或者看文章遇到的問題，一般都是比較基礎(chǔ)但是容易遺忘的知識點，你也可能會在面試中碰到。 我會查閱一些資料并可能加上自己的理解，來記錄這些問題。更多文章請前往我的個人博客
這道題跟之前提到的[] == ![] 有異曲同工之妙，都是涉及到了隱式的強制類型轉(zhuǎn)換。同樣，我們直接開門見山，總結(jié)下加號操作符的運算規(guī)則。下面規(guī)則判斷權(quán)重由上往下。
當(dāng) 兩個操作數(shù)都是數(shù)值 時，執(zhí)行常規(guī)的數(shù)值加法計算。但有幾個值的考慮
如果有一個操作數(shù)是NaN, 則結(jié)果是NaN；
Infinity 加 Infinity 結(jié)果是 Infinity；
-Infinity 加 -Infinity 結(jié)果是 -Infinity；
Infinity 加 -Infinity 結(jié)果是NaN；
+0 加 +0 結(jié)果是+0；
-0 加 -0 結(jié)果是 -0；
+0 加 -0 結(jié)果是+0；
當(dāng)有 一個操作數(shù)是字符串 時，應(yīng)用如下規(guī)則：
如果兩個操作數(shù)都是字符串，則將兩個字符串拼接起來；
如果只有一個操作符是字符串，則兩另一個操作符轉(zhuǎn)換為字符串(toString)，然后再將兩個字符串拼接起來。
前面兩條規(guī)則都非常簡單，不會有混淆。對于其他情況，我總結(jié)了下面兩條規(guī)則：
當(dāng) 有一個操作數(shù)是復(fù)雜數(shù)據(jù)類型（對象，數(shù)組） 時，將兩個操作數(shù)都轉(zhuǎn)換為字符串（ToString）相加。
當(dāng) 有一個操作數(shù)是簡單數(shù)據(jù)類型（true/false， null，undefined） 時，同時不存在復(fù)雜數(shù)據(jù)類型和字符串，則將兩個操作數(shù)都轉(zhuǎn)換成數(shù)值（ToNumber）相加。
另外還有一種特殊情況{} + 頭 的相加式，有些瀏覽器會將{}視為一個塊符號，所以不會參與相加，而是把+符號視為轉(zhuǎn)換符（Number）將后面的操作數(shù)轉(zhuǎn)換為數(shù)值。
注意上面的規(guī)則的權(quán)重是從上到下的，每執(zhí)行一步要從第一條規(guī)則開始再進行判斷。
下面是改規(guī)則的一個判斷流程圖：
我們來看看這幾道題
1.[] + {}
根據(jù)規(guī)則，[] 和 {} 都是復(fù)雜數(shù)據(jù)類型，滿足有一個操作符是復(fù)雜數(shù)據(jù)類型, 所以將兩個值都轉(zhuǎn)換為字符串，調(diào)用其toString方法，得到：
"" + "[object Object]" = "[object Object]"
2.1+{}
同樣滿足第三條規(guī)則，結(jié)果為
"1" + "[object Object]" = "1[object Object]"
3."1" + false
其中false滿足第4條規(guī)則，但同時滿足第2條規(guī)則"1"是字符串，優(yōu)先處理第2條規(guī)則。所以處理結(jié)果應(yīng)該是將false轉(zhuǎn)為字符串
"1" + "false" = "1false"
看看題目中的 {} + []
按規(guī)則計算結(jié)果應(yīng)該是
"[object Object]"
但是控制臺打印出來的結(jié)果卻是0,別忘了第5條，當(dāng){}+開頭的時候，{}并不參與計算，只是被單做一個空的代碼塊，所以{}+[]實際上是+[], 即Number([]) => Number("") => 0
那么{}+{}就是+{},等于Number({}) => Number("[object Object]") => NaN
然而我們看到結(jié)果再次出乎我們的意料，控制臺輸出的是
"[object Object][object Object]"
到底是怎么回事？
原來對于{}+{}
不同瀏覽器會有不同的處理結(jié)果，在chrome中會輸出"[object Object][object Object]"，在firefox會輸出NaN。
這應(yīng)該是不同瀏覽器的js引擎解析差異引起的。我們只要記住這個特殊情況就行了。
其實這些特殊值的計算我們平時都很少接觸到，也沒有多大的意義。關(guān)鍵還是要加深對JS中對數(shù)值轉(zhuǎn)換的理解，以不變應(yīng)萬變。到真正遇到問題的時候，不至于摸不著頭腦。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88171.html
摘要：判斷步驟如下如果有一個操作數(shù)是布爾值，則在比較相等性之前先將其轉(zhuǎn)換為數(shù)值轉(zhuǎn)換為，而轉(zhuǎn)換為。實際上是對比運用上面的順序，是布爾值，所以轉(zhuǎn)化為數(shù)值為。 『前端碎碎念』系列會記錄我平時看書或者看文章遇到的問題，一般都是比較基礎(chǔ)但是容易遺忘的知識點，你也可能會在面試中碰到。 我會查閱一些資料并可能加上自己的理解，來記錄這些問題。更多文章請前往我的個人博客 類似標(biāo)題中的問題還有很多，例如： 為...
摘要：更多文章請前往我的個人博客這個問題是有關(guān)執(zhí)行順序和的。其中，整體代碼，可以理解為待執(zhí)行的所有代碼。當(dāng)隊列執(zhí)行完后再執(zhí)行一個任務(wù)。然后再次回到新的事件循環(huán)。所以兩個執(zhí)行完后隊列里只剩下第一個里的。 『前端碎碎念』系列會記錄我平時看書或者看文章遇到的問題，一般都是比較基礎(chǔ)但是容易遺忘的知識點，你也可能會在面試中碰到。 我會查閱一些資料并可能加上自己的理解，來記錄這些問題。更多文章請前往我...
摘要：使用命名空間的目的是對標(biāo)識符的名稱進行本地化，以避免命名沖突或名字污染，關(guān)鍵字的出現(xiàn)就是針對這種問題的。缺省參數(shù)概念缺省參數(shù)是聲明或定義函數(shù)時為函數(shù)的參數(shù)指定一個默認(rèn)值。 ...
摘要：請求與響應(yīng)請求的組成的四部分動詞路徑協(xié)議版本要上傳的數(shù)據(jù)關(guān)于以上各部分內(nèi)容的碎碎念請求最多包含四部分，最少包含三部分。 HTTP 請求與響應(yīng) HTTP 請求的組成的四部分： 1 動詞 路徑 協(xié)議/版本2 Key1: value12 Key2: value22 Key3: value32 Content-Type: application/x-www-form-urlencoded2 H...
閱讀 2086·2023-04-25 19:03
閱讀 1237·2021-10-14 09:42
閱讀 3419·2021-09-22 15:16
閱讀 1002·2021-09-10 10:51
閱讀 1585·2021-09-06 15:00
閱讀 2411·2019-08-30 15:55
閱讀 492·2019-08-29 16:22
閱讀 901·2019-08-26 13:49
