JavaScript中使用addExpense方法向数组添加对象时描述参数失效问题

嘿，我一眼就发现问题所在啦！你遇到的这个情况，是因为JavaScript对象字面量的属性名规则导致的。

错误原因 #

你写的let addObject = { description : amount }里，description是作为字面量属性名存在的——JS会直接把它当成字符串"description"，而不是把你传入的参数值（比如'Shopping'）作为属性名。所以不管你传什么描述字符串，这个对象的键永远是description，而值被你赋值成了amount，就出现了{"description": 50}这种奇怪的输出。

修复代码 #

要把参数变量作为属性名，得用ES6的计算属性名语法，把变量用方括号[]包起来，这样JS就会解析变量的实际值作为属性名了。修正后的代码如下：

const account = {
  expenses: [],
  addExpense: function(description, amount) {
    // 用方括号包裹description，把变量值作为属性名
    let addObject = { [description]: amount }
    this.expenses.push(addObject)
  }
}
account.addExpense('Shopping', 50)
console.log(account.expenses)

执行结果 #

现在运行代码，输出就会是你预期的：

[{"Shopping": 50}]

内容的提问来源于stack exchange，提问作者SyM