如何解释 JavaScript 表达式的 [which]: 部分（ { [which]: o[which] } = bar() ）；答案

【问题标题】：How to interpret the [which]: part for the JavaScript expression ( { [which]: o[which] } = bar() );如何解释 JavaScript 表达式的 [which]: 部分（ { [which]: o[which] } = bar() ）；
【发布时间】：2018-02-18 19:19:35
【问题描述】：

我在网上遇到过如下代码：

function bar() {
    return {
        x: 4,
        y: 5,
        z: 6
    };
}

var which = "x",
    o = {};

( { [which]: o[which] } = bar() );

console.log( o.x );

我知道这段代码是 ES6 中引入的“解构语法”的一个示例。

我还了解到o[which] 正在对象o 中搜索名为which 的键，如果找到，则返回which 键的值。

但我不太确定表达式的 [which]: 部分是如何工作的。

【问题讨论】：

见上面两行，即var which = "x"。这应该可以解决您剩下的困惑。
@Nit 可能我的大脑目前没有工作，或者我的知识存在差距，但我现在无法理解这个问题。求你再给我一点提示？
这是一个计算出来的属性名。替换为它的值"x"，你会得到({ x: o.x } = bar());
专业提示：我注意到您的帖子对于有经验的用户来说非常健谈。如果可以的话，请让它们更简洁，因为这会为志愿者编辑带来相当多的持续工作。例如：“任何帮助将不胜感激”、“提前感谢您的帮助”、“有人可以帮帮我”等。请保持简短和重点。谢谢！
@halfer 感谢您的提前。记下:)

标签： javascript object ecmascript-6 destructuring

【解决方案1】：

在destructuring syntax中，当你看到from : to时，表示from标识的属性的值取自被解构的事物，赋值给to标识的变量或属性。所以看那行：

( { [which]: o[which] } = bar() );

...我们看到[which] 标识的属性值是从bar 返回的对象中检索出来的，并分配给o[which] 标识的属性。由于使用了[which] 而不是which，因此which 变量的值决定了从bar 返回的对象中获取的属性的名称，就像您使用时一样检索或设置对象属性值时的括号语法。

非解构版本如下所示：

const tmp = bar();
o[which] = tmp[which];

【讨论】：

啊，我想我明白了。我认为在普通对象文字中，{a: b} 意味着将值 b 分配给名为 a 的属性。但是对于解构语法，当我们遇到{a: b} 时，我们实际上是将a 的值分配给一个名为b 的属性（这与普通对象字面量的行为相反）。我想这就是我被绊倒的地方。再次感谢你的帮助！现在一切都开始变得有意义了！
@Thor：没错！尽管很容易想到“好吧，为什么要让它倒退，多么愚蠢！”有人告诉我，在嵌套等方面有充分的理由这样做。

【解决方案2】：

[which]: 构造是 computed properties 语法 (ES2015+) 的一部分。

【讨论】：

有点，但不是您链接到的意义上（在对象初始化程序中）。