没有 var、let 或 const 的对象解构

Question

为什么对象解构前面没有var关键字会报错？

{a, b} = {a: 1, b: 2};

抛出SyntaxError: expected expression, got '='

以下三个例子可以正常工作

var {a, b} = {a: 1, b: 2};
var [c, d] = [1, 2];
    [e, f] = [1, 2];

额外问题：为什么我们不需要 var 来解构数组？

我在做类似的事情时遇到了问题

function () {
  var {a, b} = objectReturningFunction();

  // Now a and b are local variables in the function, right?
  // So why can't I assign values to them?

  {a, b} = objectReturningFunction();
}

Answer 1

问题源于 {...} 运算符在 JavaScript 中具有多种含义。

当{ 出现在语句 的开头时，它总是代表一个block，不能分配给它。如果它稍后在 Statement 中作为 Expression 出现，那么它将代表一个对象。

var 有助于区分这一点，因为它后面不能跟 Statement，grouping parenthesis 也是如此：

( {a, b} = objectReturningFunction() );

来自他们的文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Assignment_without_declaration

注意：使用没有声明的对象字面量解构赋值时，赋值语句周围的括号 ( ... ) 是必需的。

{a, b} = {a: 1, b: 2} 不是有效的独立语法，因为左侧的 {a, b} 被视为块而不是对象字面量。

但是，({a, b} = {a: 1, b: 2}) 是有效的，var {a, b} = {a: 1, b: 2}

您的 ( ... ) 表达式需要以分号开头，或者它可以用于执行上一行的函数。

Answer 2

如果您编写的 Javascript 没有分号，那么“无声明的赋值”语法应该在前面加上一个分号，这样它才能正常工作

let a, b

;({a, b} = objectReturningFunction()) // <-- note the preceding ;

只是想强调这一点，因为它让我感到困惑，并希望可以节省其他人一些时间来弄清楚它为什么不起作用和/或使用像 prettier 这样的代码格式化程序产生奇怪的结果。

确实，它实际上就在接受的答案中（引用文档的最后一行），但很容易错过，尤其是没有看到示例！

Answer 3

这是另一种方式：

let {} = {a, b} = objectReturningFunction()

优点：

• 不需要括号
• 不需要分号
• 额外的分配是保证无操作（假设没有发生奇怪的事情 - 而且，您的编译器可能没有意识到这一点）

缺点：

• 看起来有点奇怪，虽然在我看来没有比!(){...}() IIFE 更奇怪。
• 可能会令人困惑，为什么它会在那里。保证会在第一次遇到时就把人甩掉，所以我建议不要一次性使用它。