如何在JavaScript/TypeScript中动态更新对象字段

你当前代码的问题在于直接写fieldName: fieldValue时，JavaScript会把fieldName当作字符串字面量作为键名，所以才会意外新增名为"fieldName"的字段，而不是更新传入的目标字段。解决这个问题的关键是使用计算属性名，具体做法如下：

修正后的TypeScript代码 #

let myObject = {
    name: 'John',
    lastName: 'Smith',
    age: 26,
    weight: 200,
    eyeColor: 'blue',
    hairColor: 'blonde'
};

// 给fieldName添加类型约束，确保只能传入myObject已有的字段名
const handleUpdate = (fieldName: keyof typeof myObject, fieldValue: string | number) => {
    if (fieldName in myObject) {
        // 用方括号包裹fieldName，将变量值作为键名
        myObject = {...myObject, [fieldName]: fieldValue};
    }
}

handleUpdate('name', 'Jack'); // 现在会正确将name更新为'Jack'

纯JavaScript版本（无类型约束） #

let myObject = {
    name: 'John',
    lastName: 'Smith',
    age: 26,
    weight: 200,
    eyeColor: 'blue',
    hairColor: 'blonde'
};

const handleUpdate = (fieldName, fieldValue) => {
    if (fieldName in myObject) {
        myObject = {...myObject, [fieldName]: fieldValue};
    }
}

handleUpdate('name', 'Jack');

关键说明 #

• 计算属性名[fieldName]会读取变量fieldName的实际值（比如调用时的'name'）作为对象的键，这样就能精准匹配要更新的字段，不会产生多余的键。
• TypeScript版本中使用keyof typeof myObject作为fieldName的类型，可以在编译阶段就拦截无效的字段名，比仅靠运行时的in检查更安全。

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