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]