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

Question

我有一个方法来处理这个对象的更新。在这个方法中，我想接受对象拥有的任何字段值，如姓名、年龄、体重、eyeColor等。如果该字段存在于该对象中，我希望能够动态地更新对象中传入的任何字段。

我目前正在做它不正确，我相信与传播操作符，而试图更新对象中的一个字段。有一个错误，fieldName不存在于myObject中。有人知道如何动态地做到这一点，而不需要一个长开关语句检查每个字段对传入的fieldName吗?在之前的尝试中，我已经成功地为对象添加了一个名为"fieldName"这也不是我想要的。

如果有人有任何想法，那将是非常有用的，谢谢!

let myObject = {
name: 'John',
lastName: 'Smith',
age: 26,
weight: 200,
eyeColor: 'blue',
hairColor: 'blonde'
};
const handleUpdate = (fieldName: string, fieldValue: string | number) => {
if (fieldName in myObject) {
myObject = {...myObject, fieldName: fieldValue};
}
}
handleUpdate('name', 'Jack'); // Want this call to update the name of 'John' to 'Jack'

Answer 1

总之，您要查找的是:

{...myObject, [fieldName]: fieldValue}

您可以创建一个通用的类型安全函数来完成此操作，如下所示:

function updateProp<TObj, K extends keyof TObj>(obj: TObj, key: K, value: TObj[K]) {
return {...obj, [key]: value};
}

，并按如下方式调用:

const foo = { a: 1, b: "monkey" };
const updatedFoo = updateProp(foo, "b", "hello world")

操场上联系

Answer 2

您正在寻找括号符号属性访问器:

myObject[fieldName] = fieldValue

与使用展开操作符的方法相比，实际上更新了对象。例如，如果myObject中的引用先前被复制到其他地方，该引用也将"看到";更新后的字段。然而，通过用myObject = {...myObject}覆盖该值，每次都创建一个新对象。