JS使用对象扩展符设置动态键时报Unexpected token错误如何解决？

问题原因 #

你遇到的语法错误是因为在对象字面量中使用动态变量作为属性名时，必须使用计算属性名语法，也就是把动态的键名表达式包裹在方括号[]中。
你原有写法{ ...obj, ids[i]: "" }中，JS会默认把ids解析为静态的字符串属性名，读到后面的[时不符合对象字面量的语法规则，因此直接抛出语法错误。

修复方案 #

方案1：最小改动原有代码 #

仅需要给动态键ids[i]外层添加方括号即可，修改后的完整代码如下：

let ids = [1, 2, 3];
let obj = {};
for (let i in ids) {
  obj = { ...obj, [ids[i]]: "" };   
}
console.log(obj); // 输出预期结果 {1: "", 2: "", 3: ""}

方案2：性能更优的写法 #

无需每次循环都展开对象重新赋值，直接给对象新增属性即可，同时推荐使用for...of遍历数组，避免for...in可能遍历到原型链上意外属性的问题：

let ids = [1, 2, 3];
let obj = {};
for (const id of ids) {
  obj[id] = "";
}
console.log(obj);

方案3：函数式一行实现 #

如果偏好简洁写法，可以用数组的reduce方法实现：

const ids = [1, 2, 3];
const obj = ids.reduce((acc, cur) => ({...acc, [cur]: ""}), {});
console.log(obj);

内容的提问来源于stack exchange，提问作者Hari Krishnan U