国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端碎碎念 之 [] + {} 和 {} + []一樣嗎?

Soarkey / 1038人閱讀

摘要:前端碎碎念系列會記錄我平時看書或者看文章遇到的問題,一般都是比較基礎但是容易遺忘的知識點,你也可能會在面試中碰到。當兩個操作數都是數值時,執行常規的數值加法計算。關鍵還是要加深對中對數值轉換的理解,以不變應萬變。

『前端碎碎念』系列會記錄我平時看書或者看文章遇到的問題,一般都是比較基礎但是容易遺忘的知識點,你也可能會在面試中碰到。 我會查閱一些資料并可能加上自己的理解,來記錄這些問題。更多文章請前往我的個人博客

這道題跟之前提到的[] == ![] 有異曲同工之妙,都是涉及到了隱式的強制類型轉換。同樣,我們直接開門見山,總結下加號操作符的運算規則。下面規則判斷權重由上往下。

兩個操作數都是數值 時,執行常規的數值加法計算。但有幾個值的考慮

如果有一個操作數是NaN, 則結果是NaN;

Infinity 加 Infinity 結果是 Infinity;

-Infinity 加 -Infinity 結果是 -Infinity;

Infinity 加 -Infinity 結果是NaN;

+0 加 +0 結果是+0;

-0 加 -0 結果是 -0;

+0 加 -0 結果是+0;

當有 一個操作數是字符串 時,應用如下規則:

如果兩個操作數都是字符串,則將兩個字符串拼接起來;

如果只有一個操作符是字符串,則兩另一個操作符轉換為字符串(toString),然后再將兩個字符串拼接起來。

前面兩條規則都非常簡單,不會有混淆。對于其他情況,我總結了下面兩條規則:

有一個操作數是復雜數據類型(對象,數組) 時,將兩個操作數都轉換為字符串(ToString)相加。

有一個操作數是簡單數據類型(true/false, null,undefined) 時,同時不存在復雜數據類型和字符串,則將兩個操作數都轉換成數值(ToNumber)相加。

另外還有一種特殊情況{} + 頭 的相加式,有些瀏覽器會將{}視為一個塊符號,所以不會參與相加,而是把+符號視為轉換符(Number)將后面的操作數轉換為數值。

注意上面的規則的權重是從上到下的,每執行一步要從第一條規則開始再進行判斷。

下面是改規則的一個判斷流程圖:

我們來看看這幾道題

1.[] + {}

根據規則,[] 和 {} 都是復雜數據類型,滿足有一個操作符是復雜數據類型, 所以將兩個值都轉換為字符串,調用其toString方法,得到:

"" + "[object Object]" = "[object Object]"

2.1+{}

同樣滿足第三條規則,結果為

"1" + "[object Object]" = "1[object Object]"

3."1" + false

其中false滿足第4條規則,但同時滿足第2條規則"1"是字符串,優先處理第2條規則。所以處理結果應該是將false轉為字符串

"1" + "false" = "1false"

看看題目中的 {} + []

按規則計算結果應該是
"[object Object]"

但是控制臺打印出來的結果卻是0,別忘了第5條,當{}+開頭的時候,{}并不參與計算,只是被單做一個空的代碼塊,所以{}+[]實際上是+[], 即Number([]) => Number("") => 0

那么{}+{}就是+{},等于Number({}) => Number("[object Object]") => NaN
然而我們看到結果再次出乎我們的意料,控制臺輸出的是
"[object Object][object Object]"

到底是怎么回事?

原來對于{}+{}
不同瀏覽器會有不同的處理結果,在chrome中會輸出"[object Object][object Object]",在firefox會輸出NaN
這應該是不同瀏覽器的js引擎解析差異引起的。我們只要記住這個特殊情況就行了。

其實這些特殊值的計算我們平時都很少接觸到,也沒有多大的意義。關鍵還是要加深對JS中對數值轉換的理解,以不變應萬變。到真正遇到問題的時候,不至于摸不著頭腦。

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

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

相關文章

  • 前端碎碎 為什么[] == ![] ?

    摘要:判斷步驟如下如果有一個操作數是布爾值,則在比較相等性之前先將其轉換為數值轉換為,而轉換為。實際上是對比運用上面的順序,是布爾值,所以轉化為數值為。 『前端碎碎念』系列會記錄我平時看書或者看文章遇到的問題,一般都是比較基礎但是容易遺忘的知識點,你也可能會在面試中碰到。 我會查閱一些資料并可能加上自己的理解,來記錄這些問題。更多文章請前往我的個人博客 類似標題中的問題還有很多,例如: 為...

    isaced 評論0 收藏0
  • 前端碎碎 nextTick, setTimeout 以及 setImmediate 三者的執行

    摘要:更多文章請前往我的個人博客這個問題是有關執行順序和的。其中,整體代碼,可以理解為待執行的所有代碼。當隊列執行完后再執行一個任務。然后再次回到新的事件循環。所以兩個執行完后隊列里只剩下第一個里的。 『前端碎碎念』系列會記錄我平時看書或者看文章遇到的問題,一般都是比較基礎但是容易遺忘的知識點,你也可能會在面試中碰到。 我會查閱一些資料并可能加上自己的理解,來記錄這些問題。更多文章請前往我...

    Cciradih 評論0 收藏0
  • 盒模型的一些碎碎

    摘要:盒模型的簡介本文簡單的總結了一些基本概念,知識點以及細節問題作為前端人員,盒模型是最基礎的知識點,在排版與布局時不可避免與盒模型打交道。 1. 盒模型的簡介 本文簡單的總結了一些基本概念,知識點以及細節問題 作為前端人員,盒模型是最基礎的知識點,在排版與布局時不可避免與盒模型打交道。 在我們編寫HTML時,網頁上的內容幾乎都是被包在一個個元素(當然也可以叫做標簽)中的,最常見的有div...

    王偉廷 評論0 收藏0
  • 關于C++基礎的一些“碎碎

    摘要:使用命名空間的目的是對標識符的名稱進行本地化,以避免命名沖突或名字污染,關鍵字的出現就是針對這種問題的。缺省參數概念缺省參數是聲明或定義函數時為函數的參數指定一個默認值。 ...

    Jackwoo 評論0 收藏0
  • 請求與響應

    摘要:請求與響應請求的組成的四部分動詞路徑協議版本要上傳的數據關于以上各部分內容的碎碎念請求最多包含四部分,最少包含三部分。 HTTP 請求與響應 HTTP 請求的組成的四部分: 1 動詞 路徑 協議/版本2 Key1: value12 Key2: value22 Key3: value32 Content-Type: application/x-www-form-urlencoded2 H...

    BLUE 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<