时间戳

首页 > 解决方案 > 为什么当我们使用变量作为对象键时，JS代码不起作用，然后使用解构（没有别名）来获取这个对象键的值？

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

问题描述

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

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;能够工作，但在其他代码工作时却没有。如果有人能帮助我理解这一点，那就太好了:)

我知道当我说 JS 时会引发解析错误const { [NAME_FIELD] } = state;。带着我的问题，我试图理解为什么 ECMAScript 团队会做出这个决定，以及我在理解中缺少什么。在后来的评论中，一些 SO 成员对此提出了一些有益的看法。

标签： javascriptreactjsecmascript-6

解决方案

语法问题之一：

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"和symbols。

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

推荐阅读