在 JavaScript 中更新嵌套对象答案

【问题标题】：Update a nested object in JavaScript在 JavaScript 中更新嵌套对象
【发布时间】：2023-01-22 20:26:37
【问题描述】：

这是原始数据

const data = {
    "field1": {
        "name": 'Anuv',
        "marks": {
            "eng": 43,
            "hindi": 23
        },
        "age": 21
    },
    "field2": {
        "school": 'DAV'
    }
}

我正在尝试更新名称

const updatedValue = {
    "field1": {
        "name": "Anuv Gupta"
    }
}

这是预期的数据。它也应该具有所有字段和更新的名称值。

const expectedData = {
    "field1": {
        "name": 'Anuv Gupta',
        "marks": {
            "eng": 43,
            "hindi": 23
        },
        "age": 21
    },
    "field2": {
        "school": 'DAV'
    }
}

我试过使用这些

expectedData = Object.assign({}, data, updatedValue)

也

expectedData =  { ...data, ...updatedValue },

他们都返回这个对象

const obj = {
        "field1": {
            "name": 'Anuv Gupta',
        },
        "field2": {
            "school": 'DAV'
        }
    }

如何解决此问题并获取 expectedData 对象？

【问题讨论】：

标签： javascript reactjs object shallow-copy cloning

【解决方案1】：

使更新的数据对象如下：

const updatedValue = {
    "field1": {
        ...data.field1,
        "name": "Anuv Gupta"
    }
}

预期数据不会丢失 field1 属性。

【讨论】：

【解决方案2】：

如果你不关心改变你的原始数据，你可以这样做：

data.field1.name = 'Anuv Gupta';
console.log(data);

如果您不希望原始数据发生变异，只需先克隆它并进行新的值分配：

const dataClone = structuredClone(data);
dataClone .field1.name = 'Anuv Gupta';
console.log(dataClone);

【讨论】：

【解决方案3】：

您可以直接访问 name 属性：

data.field1.name = "new value"

如果你想避免改变原始数据对象，你可以尝试：

data2 = Object.assign({}, data);
data2.field1.name = "new value"

【讨论】：