13界D2大會 Sven Sauleau - Understanding the Differences Is Accepting(我猜名字又叫JS冷知識)

有兩個相關議題, 一個是 “Understanding the Differences Is Accepting”,主要科普下JS相關的冷知識。 另外一個是“WebAssembly becoming the biggest platform” ,科普下如何使用和上手WebAssembly。

Sven Sauleau是個很帥氣的??小哥哥,嗯,聽完分享以後,一秒圈粉。PPT還很幽默。

先上我拍的帥照!!!就問你!!帥不帥!!

 

哦,對了,渣英語翻譯請見諒哈【⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄】

 

 

 

分享主題:Understanding the Differences Is Accepting

感覺主要內容是用例子講的是JS相關的冷知識,講下相關的定義

 

 

JS作用域冷知識

代碼如下:(答案選A)

switch (0) {
  case 0:
    a();
    break;
  case 1:
    function a() {
      console.log("foo")
    }
    break;
}

原因解析:

1. the switch body creates a new scope 【switch語句創建了新的作用域】

2. cases are not creating a new scope 【case語句不會創建新的作用域】

3. function declarations are hoisted【function函數聲明被提升了】

 

改變成A的效果(增加大括號作用域):

switch (0) {
  case 0:
    a();
    break;
  case 1:
    { //增加大括號作用域
      function a() {
        console.log("foo")
      }
      break;
    }
}

 

 

轉義字符的判斷

代碼如下:(答案選A)

"\n\t\r\n\t\r" == false

1. \t, \n and \r are expanded to empty string 【 \t 是空格,\n 是換行,\r 是回車,但三個都還是空白字符】

2. empty string is falsy【空值雙等號(==)判斷 , 空值爲false】

 

改變成B的效果(增加大括號作用域):

//全等操作符比較兩個值是否相等,兩個被比較的值在比較前都不進行隱式轉換
"\n\t\r\n\t\r" === false

拓展閱讀參考:MDN - JavaScript 中的相等性判斷

 

 

NaN的判斷

代碼如下:(答案 是 false)

NaN == NaN

Unrepresentable/broken value 【無法形容的的變量值,沒找到來源,我纔是ECMAScript相關文獻規範】

6.1.6 The Number Type 【Nmber值類型】

       “[...] all NaN values are indistinguishable from each other.” 【每個NaN的值都是難區分的】

7.2.15 Strict Equality Comparison 【嚴格相等對比】

       “2.a If x is NaN, return false or 2.b If y is NaN, return false.”【2.a 和 2.b都是NaN,但是無法判斷是否相等】

 

對於NaN的判斷( 使用 isNaN()函數 ):

isNaN("2.a")

拓展閱讀參考:isNaN()

 

數字的正無窮和負無窮判斷

代碼如下:(答案選A)

Math.pow(2,53) + 1 === Math.pow(2,53) 

6.1.6 The Number Type 【Nmber值類型】

       1. Number are 64 bits float 【Nmber是64位的浮點數】

       2. 11 bits are for the exponent

       3. −2 53 to +2 53 【值範圍是 -2 53 到 +2 53】

 

類似的判斷還有如下:

 -Math.pow(2, 53) - 1 === -Math.pow(2, 53)

拓展閱讀參考:MDN Number值的相關閱讀

 

雙等號的隱式轉換問題

代碼如下:(答案選A)

[1, 2] == "1,2"

7.2.14 Abstract Equality Comparison

“9. If Type(x) is Object and Type(y) is either [...], return the result of the comparison ToPrimitive(x) == y.”

and then basically [1, 2].toString(). 【雙等號 判斷時候 會把數組[1,2] 隱式轉化爲數字1,2 】

 

隱式轉化問題 - 三等號解決(答案是false)

[1, 2] === "1,2"

拓展閱讀參考:MDN - JavaScript 中的相等性判斷

 

HTML註釋在JS中的使用

代碼如下:(答案選3)

<!-- console.log("foo") -->

Parsing is defined at B.1.3 HTML-like Comments.  【句法分析 定義在 B.1.3 HTML-like 評論裏】

Allow browsers that didn’t understand the script tag to degrade gracefully  【方便瀏覽者不理解script標籤的情況下優雅降級】

ex Netscape 1

 

拓展閱讀參考:??小哥哥的github地址,迷妹的我已經follow了

 

 

自動添加分號機制

代碼如下:(答案選2)

var t

t = 0
(1 + 1)

11.9 Automatic Semicolon Insertion 【自動添加分號機制】

No ASI because “[...] the parenthesized expression that begins the second line can be interpreted as an argument list for a function call.” 【括號表達式:  第三行的括號被會打斷,因爲第二行會被認爲一個函數聲明】

 

簡單粗暴的解決方式 - 添加分號 (打印出來是2)

var t;;;;

t = 0;;
(1 + 1);;

 

大括號的作用

 

bitcoin is a label forming a LabeledStatement 【花括號是一個 標籤聲明】

Following by BlockStatements

aka the blockchain【花括號是塊級作用域】

 

bitcoin這個是雙關翻譯,意思是比特幣~~~

感覺??小哥哥最後又幽默了一把~

 

 

 

 

 

好啦~以上就是全部分享啦~

大家豬年快樂呀~

 

 

附錄:

D2鏈接:第十三屆 D2 前端技術論壇精彩回顧[附PPT]

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章