JavaScript中如何通过ES6语法动态指定对象的字段名？

这是ES6对象字面量里一个特别常见的小误区～你现在的写法里，直接写varName: event.detail.value时，JavaScript会把varName当成字符串字面量作为键名，而不是去读取这个变量的实际值。

解决方法很简单，用ES6的计算属性名语法，把变量放在方括号[]里就行，这样方括号内的表达式会被求值，最终用变量的实际值作为字段名：

updateValue(event){
  let varName = event.target.dataset.field;
  this.realFormData = {...this.realFormData , [varName]: event.detail.value};
  console.log(this.realFormData);
}

举个例子，如果varName的值是"username"，那这段代码就会给realFormData添加（或覆盖）username字段，值为event.detail.value，控制台输出就会变成{somefield:"someValue" , username: "somevalue"}，完全符合你的预期。

核心原理是：计算属性名允许我们在对象字面量中使用动态表达式作为属性名，方括号包裹的内容会被执行并转换成字符串，最终作为对象的键名。

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