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

Question

网上遇到过如下代码：

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

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

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

console.log( o.x );

我理解这段代码是ES6中引入的"destructuring syntax"的一个例子。

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

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

Answer 1

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

Answer 2

在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];

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

How to interpret the [which]: part for the JavaScript expression ( { [which]: o[which] } = bar() );

javascript

object

destructuring

ecmascript-6