《你不知道的JavaScript》 (中) 閱讀摘要

時間 2019-11-06

原文原文鏈接

本書屬於基礎類書籍，會有比較多的基礎知識，因此這裏僅記錄日常不怎麼容易注意到的知識點，不會全記，供你們和本身翻閱；html

上中下三本的讀書筆記：前端

若是但願獲取本書的 PDF 資源，能夠關注文末二維碼加微信羣找羣主要～segmentfault

第一部分類型和語法

第二章值

43.toFixed(3)
// 報錯: Invalid or unexpected token
43..toFixed(3)
// "43.000"
複製代碼

這是由於42.toFixed(3)這裏由於.被視爲常量42的一部分，因此沒有.屬性訪問運算符來調用toFixed方法。而42..toFixed則沒有問題。數組

第四章強制類型轉換

JSON.stringify在對象中遇到undefined、function、symbol時會自動將其忽略，在數組中則會返回null，好比：瀏覽器

JSON.stringify([1, 23, 4, null, undefined, function(){ return 123 }])
// "[1,23,4,null,null,null]"
複製代碼

JS中的假值 undefined、null、false、+0、-0、NaN、""微信

除了空字符串外的全部字符串都是真值
全部對象都是真值

關於真假值的判斷：併發

new Boolean(false)       // true
new Number(0)            // true
new String("")           // true
Boolean("false")         // true
Boolean("0")             // true
Boolean("''")            // true
Boolean([])              // true
Boolean({})              // true
Boolean(function() {})   // true
複製代碼

第五章語法

結果值

語句都有個結果值：異步

賦值表達式 b = a 的結果值是a的值
規範定義 var 的結果值是 undefined
代碼塊 { ... } 的結果值是其最後一個語句\表達式的結果

標籤語句函數

{ foo: bar() } 這裏的 foo 是標籤語句，帶標籤的循環跳轉可使用 continue\break 來實現執行標籤所在循環的下一輪循環或跳出標籤所在循環；post

foo: for (var i = 0; i < 4; i++){
    for (var j = 0; j < 4 ; j++){
        if ((i * j) === 3){
            console.log('stoping', i, j)
            break foo;
        }   
        console.log(i, j)
    }
}
// 0 0
// 0 1
// 0 2
// 0 3
// 1 0
// 1 1
// 1 2
// stoping 1 3
複製代碼

這裏的 break foo 不是指跳轉到標籤 foo 所在位置繼續執行，而是跳出標籤 foo 所在的循環/代碼塊，繼續執行後面的代碼。所以這裏的標籤語句並不是傳統意義上的 goto；

關聯

運算符有優先級，那麼若是多個相同優先級的運算符同時出現，執行的順序就和關聯順序有關了，JS默認的執行順序是從左到右，可是有時候不是，好比：

? : 三元運算符是右關聯，好比? : ? : ，實際上是? : (? :) 這樣的順序
= = 連等是右關聯，好比 a=b=c=2，實際上是 (a=(b=(c=2)))

函數參數

像函數傳遞參數時，arguments 數組中對應單元會和命名參數創建關聯(linkage)以獲得相同的值；相反，不傳遞參數就不會創建關聯：

function foo(a){
    a=42
    console.log(arguments[0])
}
foo(2)             // 42
foo()            // undefined
複製代碼

注意：嚴格模式沒有創建關聯一說；

try...finally

finally 中的代碼老是會在 try 以後執行，即便 try 中已經 return 了，若是有 catch 的話則在 catch 以後執行；

function foo(){
    try{
        return('returned')
    } finally {
        console.log('finally')
    }
}
console.log(foo())
// finally
// returned
複製代碼

若是 finally 中拋出異常，函數會終值，若是以前 try 中已經 return 了返回值，則返回值會被丟棄；
finally 中的 return 會覆蓋 try 和 catch 中 return 的返回值；
finally 中若是沒有 return，則會返回前面 return 的返回值；

switch

switch 中的 case 執行的匹配是 === 嚴格相等的，也就是說若是不是 true，是真值也是不經過的：

switch(true) {
    case ('hello' || 10):
        console.log('world')    // 不會執行
        break;
    default:
        console.log('emmm')
}
// emmm
複製代碼

因此這裏的字符串即便是真值，也是不被匹配，因此能夠經過強制表達式返回 Boolean 值，好比 !!('hell0' || 10)

default 是可選的，無需放在最後一個，且並不是必不可少：

switch(10){
    case 1:
    case 2:
    default:
        console.log('hello')
    case 3:
        console.log(3)
        break;
    case 4:
        console.log(4)
}
// hello
// 3
複製代碼

上面這個例子的邏輯是：首先找匹配的 case，沒找到則運行 default，由於其中沒有 break，因此繼續執行 case 3 中的代碼，而後 break；

附錄

全局 DOM 變量

因爲瀏覽器歷史遺留問題，在建立帶有 id 屬性的 DOM 元素的時候也會建立同名的全局變量：

<div id='foo'><div>
<scripts>
   console.log(foo)     // 打印出DOM元素
</scripts>
複製代碼

因此說 HTML 中儘可能少用 id 屬性...

第二部分異步和性能

第一章異步：如今和未來

異步控制檯

某些瀏覽器的 console.log 並不會把傳入的內容當即輸出，緣由是在許多程序(不僅是JS)中，I/O 是很是低速的阻塞部分，因此，從頁面\UI的角度來講，瀏覽器在後臺異步處理控制檯 I/O 可以提升性能，這時用戶可能根本意識不到其發生。

var a = { b: 1 }
console.log(a)
a.b++
複製代碼

這時候控制檯看到的是 a 對象的快照 {b:1}，然而點開看詳情的話是 {b:2} ；這段代碼在運行的時候，瀏覽器可能會認爲須要把控制檯 I/O 延遲到後臺，這種狀況下，等到瀏覽器控制檯輸出對象內容時，a.b++ 可能已經運行，所以會在點開的時候顯示 {b:2}，這是 I/O 的異步化形成的。

若是遇到這種狀況：

使用JS調試器中的斷點，而不要依賴控制檯輸出；
把對象序列化到一個字符串中，以強制執行一次快照，好比經過 JSON.stringify；

第三章 Promise

回調未調用

若是 Promise 狀態一直未改變，怎麼獲得通知呢，這裏可使用 Promise.race 競態，若是在設置時間內還未返回，那麼 Promise 將會被 reject；

function timeoutPromise(delay) {
  return new Promise((resolve, reject) => {
    setTimeout(() => { reject('Timeout!') }, delay)
  })
}
 
Promise.race([foo(), timeoutPromise(3000)])
  .then(() => console.log('Promise 及時完成'))
  .catch(() => console.log('Promise 超時了'))
複製代碼

第四章生成器

輸入和輸出

function* foo(x) {
  return x * (yield 'hello')
}
const it = foo(6)
 
let res = it.next()
res.value       // hello
 
res = it.next(7)
res.value       // 42
複製代碼

能夠看到第一個 next 並無傳參，由於只有暫停的 yield 才能接受這樣一個經過 next 傳遞的參，而在生成器剛生成尚未 next() 這時候尚未暫停的 yield 來接受這樣一個值，因此會默默丟棄傳遞給第一個 next 的任何參數。

生成器中的 Promise 併發

function* foo() {
  const r1 = yield request('http://some.url.1')
  const r2 = yield request('http://some.url.2')
}
複製代碼

這種方式的兩個請求是串行的，yield 只是代碼中一個單獨的暫停點，不能同時在兩個點上暫停，若是但願並行的發送，那麼考慮：

function* foo() {
  const p1 = request('http://some.url.1')
  const p2 = request('http://some.url.2')
  const r1 = yield p1
  const r2 = yield p2
}
複製代碼