动态创建JavaScript对象遇问题：属性不持久+编译报错求排查

嘿，我来帮你搞定这两个问题！咱们一个个拆解：

1. 属性无法持久保留的原因 #

你现在的代码里，对象字面量写的是key: value，这里的key会被当成固定的字符串属性名（也就是属性名永远是"key"），而不是你传入的变量key的实际值。所以每次调用process函数，其实都是在给response对象的同一个"key"属性赋值，之前添加的其他属性自然就被覆盖或没正确添加，看起来像是无法持久保留。

修复方法很简单，用ES6的计算属性名，把key用方括号包起来，这样就会把变量key的值作为属性名：

response = { ...response, [key]: value }

这样每次调用时，会把传入的key变量对应的字符串作为属性名，把value赋值给它，同时扩展运算符...response会保留之前已有的属性，完美实现你要的“保留此前添加的属性及值”的需求。

2. FieldMapping[key] : value的编译错误 #

直接写FieldMapping[key]: value不符合对象字面量的语法规则。如果你的需求是把FieldMapping[key]的值作为属性名，同样需要用计算属性名的写法，把整个表达式放在方括号里：

// 正确写法
{ [FieldMapping[key]]: value }

因为对象字面量的属性名如果是表达式（比如变量、对象属性访问等），必须用方括号[]包裹起来，否则JS引擎会把它当成标识符解析，自然就会抛出编译错误。

完整修复后的代码 #

把两处问题修正后，代码应该是这样的：

let response = {}; 
const process = (key, value) => { 
  if (key == FieldMapping[key]) { 
    response = { ...response, [key]: value }; 
    console.log(key + " : " + value); 
  } 
}

这样既可以正确地把传入的key作为属性名添加到response中并保留原有属性，也不会再出现编译错误啦！

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