理解计算属性（方括号）答案

【问题标题】：Understanding computed properties (square brackets)理解计算属性（方括号）
【发布时间】：2018-04-13 15:46:32
【问题描述】：

我根本无法理解“计算属性”，我在谷歌上搜索过，但没有太大帮助，the website I am following 这么说，但有人能说得更清楚吗？我知道它是对我说的，但我仍然无法真正理解它试图告诉我什么。你能试着用“简单的话”说出来吗？

我们可以在对象字面量中使用方括号。这叫 计算属性。

例如：
let fruit = prompt("Which fruit to buy?", "apple");

let bag = {
  [fruit]: 5, // the name of the property is taken from the variable fruit
};

alert( bag.apple ); // 5 if fruit="apple"
计算属性的含义很简单：[fruit] 表示属性名称应取自 fruit。

因此，如果访问者输入"apple"，则bag 将变为{apple: 5}。

我无法理解的部分是

alert( bag.apple ); // 5 if fruit="apple"

【问题讨论】：

您能否提供指向您引用文本的页面的直接链接？
这有什么不清楚的地方？如果你使用了{ fruit: 5 }，那么无论是否存在名为fruit 的变量，键都是fruit——因为此时它是一个文本文字。因此，如果您想动态指定键，则需要使用此语法或bag[fruit] = 5（在这种情况下，bag 需要在该行之前存在。）
他们本可以在没有提示的情况下使用let fruit = "apple"，但他们想明确地使变量值动态化。
@Bergi javascript.info/object

标签： javascript

【解决方案1】：

您将prompt 的值保存在一个名为fruit 的变量中。在这种情况下，它默认为“apple”。

然后您将声明另一个变量bag。 bag 有一个属性，这里是[fruit]。这将在运行时评估为 fruit 的值，从而有效地进行声明

let bag = {
  'apple': 5
};

然后警报函数将提醒bag.apple 的值。 bag.apple 有一个值，因为您在声明 bag 变量时将 bag[fruit] 设置为 5，而 fruit 是 'apple'。

【讨论】：

相关文章：medium.com/front-end-weekly/…

【解决方案2】：

javascript 在这方面与 Python 不同 d={xx:11} d 设置为{ xx: 11 } 现在

key="we"
d={[key]:22}

d1 设置为{ we: 22 } Python 不会接受 xx - 它不会被定义。但是 js 会将 xx 视为字符串 'xx'。如果你想以 Python 的方式使用它，你必须像上面一样使用 [key]:22。

【讨论】：

【解决方案3】：

访问者不必输入“apple”。它在提示中作为默认值提供。只有通过修改警报：alert(bag[fruit])，用户才能在提示中输入不同的值，例如“banana”并让警报报告 5 而不是 undefined。我主要使用计算值从可迭代函数返回迭代器：

let interator = iterable[Symbol.iterator]();

，以及包含不符合 JavaScript 标识符产生式的空格或字符的对象键。

【讨论】：