摘要：這時候控制臺看到的是對象的快照，然而點開看詳情的話是這段代碼在運行的時候，瀏覽器可能會認為需要把控制臺延遲到后臺，這種情況下，等到瀏覽器控制臺輸出對象內容時，可能已經運行，因此會在點開的時候顯示，這是的異步化造成的。

本書屬于基礎類書籍，會有比較多的基礎知識，所以這里僅記錄平常不怎么容易注意到的知識點，不會全記，供大家和自己翻閱；

上中下三本的讀書筆記：

《你不知道的JavaScript》 (上) 讀書筆記

《你不知道的JavaScript》 (中) 讀書筆記

《你不知道的JavaScript》 (下) 讀書筆記

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 是標簽語句，帶標簽的循環跳轉可以使用 continuereak 來實現執行標簽所在循環的下一輪循環或跳出標簽所在循環；

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

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

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 中的 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；

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

   console.log(foo)     // 打印出DOM元素

所以說 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.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 的任何參數。

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
}

PS：歡迎大家關注我的公眾號【前端下午茶】，一起加油吧~

另外可以加入「前端下午茶交流群」微信群，長按識別下面二維碼即可加我好友，備注加群，我拉你入群～