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

如果对象前面没有 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();
}
14742 次浏览
小开
最佳答案

这个问题源于在 JavaScript 中具有多重含义的 {...}操作符。

当 {出现在 声明的开头时，它总是表示一个 拦截，这个 拦截不能被分配给。如果它稍后以 表情的形式出现在 声明中，那么它将表示一个 Object。

var有助于做出这样的区分，因为它后面不能跟着 声明，分组括号分组括号也一样:

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

来自他们的医生: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#assignment_separate_from_declaration_2

注意: 在使用对象文字结构化赋值而不使用声明时，赋值语句周围的括号(...)是必需的。

{ a，b } = { a: 1，b: 2}不是有效的独立语法，因为左边的{ a，b }被认为是块，而不是对象文本。

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

您的(...)表达式需要在前面加一个分号，或者可以用它来执行前一行中的函数。

小开

如果你编写的 Javascript 没有分号 ，那么“赋值而没有声明”语法前面应该加一个分号，这样它才能可预测地工作

let a, b


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

只是想强调这一点，因为它抓住了我，并希望可以节省其他人一些时间，弄清楚为什么它不工作和/或产生奇怪的结果与代码格式化程序，如 prettier。

事实上，它实际上就在被接受的答案中(引用文档的最后一行) ，但很容易错过，特别是没有看到示例！

小开

还有一个办法:

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

优点:

  • 不需要插入
  • 不需要分号
  • 额外的任务是一个保证没有运行(假设没有奇怪的事情正在发生-还有，您的传送器可能没有意识到这一点)

缺点:

  • 看起来有点奇怪，虽然在我看来不比 !(){...}() 生命更奇怪。
  • 可能会让人困惑为什么它会在那里。它肯定会在第一次见面时就把人们吓跑，所以我建议不要把它当作一次性的东西来使用。
小开

考虑一下:

colors = { r: 204, g: 51, b: 102, hex: "#cc3366" };

以下是一些解体方法的要点:

解构为 新的变量

let { r, g, b } = colors;
// initializes variables r, g, b

解构为具有 与众不同名称的 新的变量

let { r: red, g: green, b: blue } = colors;
// initializes variables red, green, blue

解构为 存在变量

let r, g, b;
...
({ r, g, b } = colors);

解构为具有 与众不同名称的 存在变量

let red, green, blue;
...
({ r: red, g: green, b: blue } = colors);

解构为另一个具有 一样属性名的对象

let myColor = { r: 0, g: 0, b: 0 };
...
({ r: myColor.r, g: myColor.g, b: myColor.b } = colors);

解构为另一个具有 与众不同属性名的对象

let myColor = { red: 0, green: 0, blue: 0 };
...
({ r: myColor.red, g: myColor.green, b: myColor.blue } = colors);

提交答案