对象解构语法 - ES6

Question

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

当我们说 var {p, q} = o; 时，我们到底在做什么？

var {p, q} 中的 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

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

Answer 1

那是因为使用您的对象析构语法，LHS 表达式 ({a, b}) 中使用的名称用作 RHS 表达式 (o) 中的键。由于 a 和 b 不是 o 的属性，因此失败 (returns undefined)。

规范中与此相关的部分位于 AssignmentProperty 下的 Runtime Semantics: DestructingAssignmentEvaluation 中：IdentifierReference Initializer（倒数第二个）。 AssignmentProperty 是您的 a（和 b... 分开），并且。 a 的 StringValue 是 'a'，它用作从 o 获取值的键（在这种情况下相当于 o['a']）。

如果你这样做，它会起作用：

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

使用 AssignmentProperty : PropertyName : AssignmentElement（最后一个条目），它使用属性名称（p）和赋值元素（a).

Answer 2

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

在这里，var {p,q} = o只是var {p:p , q:q} = o

的shorthand

考虑一下。

      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

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

对象解构语法 - ES6

Object destructuring syntax - ES6

javascript

destructuring

ecmascript-6