ES6 中的对象解构语法如何工作？

Question

我已经了解了数组解构语法，这很好理解。

当我们说

var {p, q} = o;

时，我们到底在做什么？

p

中的

q

和

var {p, q}

与

o

的属性（即

'p'

和

'q'

）不同吗？如果是的话，

为什么

var {a, b} = o;

不起作用？

> var o = {p: 42, q: true};
    undefined
> p
    ReferenceError: p is not defined
> q
    ReferenceError: q is not defined
> o['p']
    42
> o['q']
    true
> var {p, q} = o;
    undefined
> p
    42
> q
    true
> var {a, b} = o;
    undefined
> a
    undefined
> b
    undefined

*注意：我了解到，字典键是 javascript 中的字符串文字。*

Answer 1

    var o = {p: 42, q: true};
     var {p, q} = o;

这里，

var {p,q} = o

只是

var {p:p , q:q} = o

的简写

考虑一下。

      var o = { key : "value" };
      var { key : local_var } = o ;
      local_var === o["key"] // true

如果省略 local_var，并写成

var {key} = o;

将使用标识符“key”创建一个新的变量键。，与执行相同

var key = o["key"]

所以在你的例子中这就像做

      var p =  o["p"] ;  //42
       var q = o["q"];   //true
       var a = o["a"];  // undefined
       var b = o["b"];   //undefined

这可能不完全正确，但应该可以帮助您理解它。
它有点像其他语言提供的模式匹配，但又有所不同。

Answer 2

那是因为使用对象解构语法时，LHS 表达式 (

{a, b}

) 中使用的名称将用作 RHS 表达式 (

o

) 的键。由于

a

和

b

不是

o

的属性，因此失败（返回

undefined

）。

规范中的相关部分位于 AssignmentProperty : IdentifierReference Initializer 下的 Runtime Semantics: DestructingAssignmentEvaluation（倒数第二个）。分配属性是您的

a

（和

b

...分别），和。

a

的 StringValue 是

'a'

，它用作从

o

获取值的键（在本例中相当于

o['a']

）。

如果你这样做就会成功：

var {p:a, q:b} = o;

使用 AssignmentProperty : PropertyName :AssignmentElement（最后一个条目），它使用属性名称 (

p

) 和赋值元素 (

a

)。