由分號引起的問題

非梧不棲發表於2019-02-26

第1個案例：

let a = 1
let b = 2
[a, b] = [b, a]
console.log(a)
console.log(b)
// 會報錯，b is not defined
複製程式碼

因為第2行語句後，少了分號，就會被解析為：

let b = 2[a, b] = [b, a];
複製程式碼

又因為賦值語句的解析，是從右往左，此時b還沒有被定義，就報錯了。

第2個案例：

let a = 1
let b = 2
let c = 3
[a, b] = [b, a]
console.log(a)  // 1
console.log(b)  // 2
console.log(c)  // [2, 1]
複製程式碼

基於第一個例子，因為第2行語句後沒有分號，所以，會被解析為：

let c = 3[a, b] = [b, a]
複製程式碼

關鍵點就在這個3[a, b]。

2.1，數值的屬性

屬性訪問器，提供了兩種方式，用於訪問一個物件的屬性，它們分別是點號和方括號：

object.property
object["property"]
複製程式碼

而當訪問一個數值，或者一個數值型別的變數，它的屬性時，

首先會對這個數值或變數進行包裝：

let a = 66
a.toString()
複製程式碼

其實是：

let a = 66
Number(a).toString()
複製程式碼

所以，當組包後，才能使用原本就有的屬性或方法，

但是，即便當組包後，也無法為一個數值型別的變數新增屬性：

let a = 66
a.name = 'number'
console.log(a.name) //undefined
複製程式碼

重點是：雖然無法為數值型別的變數新增屬性，但是這個操作並不會報錯，只是一個無效操作而已。

2.2，逗號運算子

MDN上的解釋

對它的每個運算元求值（從左到右），並返回最後一個運算元的值。 MDN 給的例子

var x = 1;
x = (x++, x);
console.log(x);  // 2

x = (2, 3);
console.log(x);  // 3
複製程式碼

MDN上給的只有( )的例子，但其實[ ]也是一個道理：

let human = {name: 'peiqi', sex: 'girl'}
console.log(human['name', 'sex']) // girl
複製程式碼

2.3 結果

let c = 3[a, b] = [b, a]
複製程式碼

所以，上面程式碼中的 3[a, b] == 3[b] == 一個無效操作。

並沒有發生所謂的解構賦值！只是：

let c = [b, a]
複製程式碼

所以，c = [2, 1]

相關文章