当我们使用变量作为对象键，然后使用解构（不带别名）来获取该对象键的值时，为什么JS代码不起作用？

Question

想象一下这种情况，我将字段名称保存在这样的变量中 -

const NAME_FIELD = 'name';

然后，我继续在这样的对象中使用它 -

let state = {
  [NAME_FIELD]: 'ashwani'
} 
console.log(state) // Output - { name: "ashwani" }

到目前为止一切都很好。现在，稍后在我的代码中，我想获取相同键的值。当然，最简单的方法是简单地使用类似state[NAME_FIELD]. 不过我正在使用解构。

通过解构，这是有效的 -

const { [NAME_FIELD]: x } = state;
console.log(x) // Output - ashwani

但是，我的第一次尝试是这样的——

const { name } = state; // This works as expected
const { [NAME_FIELD] } = state; // I was expecting this to work too, but it didn't

我希望上面的代码const { [NAME_FIELD] } = state;可以工作，但在其他代码工作时却没有。如果有人能帮助我理解这一点，那就太好了:)

我知道当我说const { [NAME_FIELD] } = state;. 带着我的问题，我试图理解为什么 ECMAScript 团队会做出这个决定，以及我在理解中遗漏了什么。在后面的评论中，一些 SO 成员对此提出了一些有用的意见。

Answer 1

语法的问题之一：

const { [NAME_FIELD] } = state;

...是它假设保存的值NAME_FIELD是一个有效的标识符，但情况并非总是如此。在 的情况下NAME_FIELD = "name"，name是一个有效的标识符，因此很容易假设NAME_FIELD可以变成一个有效的变量，但是，情况并非总是如此。考虑一下您是否有：

const NAME_FIELD = "my-key";
const { [NAME_FIELD] } = state; // which would be interpreted as { my-key }

这不起作用，因为这意味着创建一个带连字符的变量-，这是无效的。发生与不被认为是有效的标识符其他有效对象键，诸如类似的问题"123"，"my key"和符号。

因此，需要使用别名将解构值分配给有效标识符。