如何将动态变量作为对象键实现对象属性的动态更新？

你的核心问题是JavaScript中访问动态属性名时不能使用点语法——点语法会把key当作字面量属性名，而非你传入的变量值。下面是具体的修复方案和更优实现：

基础修复方案 #

把静态的点语法改成方括号语法，同时为了避免修改原对象引用（防止副作用），需要创建新对象替换原数组中的对应项：

export function updateObject(id, key, value, arrayOfObjects) {
  const arr = [...arrayOfObjects];
  const index = arrayOfObjects.findIndex((x) => x.id === id);
  // 先判断是否找到对应id的对象，避免索引为-1时出错
  if (index !== -1) {
    // 拷贝原对象并更新指定属性，不修改原对象
    arr[index] = {
      ...arr[index],
      [key]: value
    };
  }
  return arr;
}

更优实现（函数式风格） #

使用Array.map可以更简洁地完成需求，无需手动处理索引，同时天然保证纯函数特性（不修改原数组和原对象）：

export function updateObject(id, key, value, arrayOfObjects) {
  return arrayOfObjects.map(obj => 
    obj.id === id 
      ? { ...obj, [key]: value } 
      : obj
  );
}

这个实现会遍历数组，对每个对象进行判断：如果id匹配，就返回一个包含原对象所有属性、同时更新指定key值的新对象；不匹配则直接返回原对象。整个过程不会改动原数据，更安全且易维护。

关键知识点 #

• 访问动态属性名必须使用方括号语法：obj[dynamicKey]，而不是obj.dynamicKey（后者会把dynamicKey当作固定属性名）。
• 使用对象扩展运算符{...obj}创建新对象，避免直接修改原对象的引用，防止产生意外的副作用。

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