JavaScript实现嵌套对象中指定Section的深度替换

需求：我有如下结构的sections对象，每个section都具备唯一的section Id。需要实现一个功能：传入一个带id的section对象后，返回包含该新对象的sections，其余对象保留原有值不变，且执行深度替换操作（新section完全覆盖对应旧section，包括所有嵌套结构）。

原sections结构示例：

{
    "section-1": {
        "id": "section-1",
        "fields": [
            {
                "id": "fld1",
                "mandatory": true,
                "visible": true,
                "maxLength": 10,
                "items": [],
                "gridItems": [{
                    "fields": [{
                        "id": "nestedFld1",
                        "mandatory": true,
                        "visible": true,
                        "maxLength": 0,
                        "items": [
                            {"code": "SELECT", "displayText": "Select"}, 
                            {"code": "PRIMARY","displayText": "Primary"}
                        ],
                        "value": "Nested 1",
                        "disabled": false,
                        "hidden": false,
                        "readonly": false,
                        "fieldLabel": "Type",
                        "regex": "",
                        "fieldType": "dropdown",
                        "editable": true
                    }, {
                        "id": "nestedFld2",
                        "mandatory": true,
                        "visible": true,
                        "maxLength": 0,
                        "items": [
                            {"code": "SELECT", "displayText": "Select"}, 
                            {"code": "PRIMARY","displayText": "Primary"}
                        ],
                        "value": "Nested 2",
                        "disabled": false,
                        "hidden": false,
                        "readonly": false,
                        "fieldLabel": "Type",
                        "regex": "",
                        "fieldType": "dropdown",
                        "editable": true
                    }]
                }],
                "value": " 123",
                "event": null,
                "disabled": false,
                "hidden": false,
                "readonly": true,
                "fieldLabel": "Fld 1",
                "regex": "",
                "editable": true
            },
            {
                "id": "fld2",
                "mandatory": false,
                "visible": false,
                "maxLength": 0,
                "items": [
                    {
                        "code": "Select",
                        "val": "Select"
                    },
                    {
                        "code": "Opt1",
                        "val": "Opt1"
                    }
                ],
                "value": null,
                "event": null,
                "disabled": false,
                "hidden": false,
                "readonly": false,
                "fieldLabel": "Origin Status",
                "regex": "",
                "editable": false
            }
        ]
    },
    "section-2": {
        "id": "section-2",
        "fields": []
    },
    "section-3": {
        "id": "section-3",
        "fields": []
    }
}

解决方案（JavaScript实现） #

以下函数可实现需求，同时保证不修改原sections对象，返回新的对象：

function replaceSection(originalSections, newSection) {
  // 创建原对象的浅拷贝，避免污染原数据
  const updatedSections = {...originalSections};
  // 深度替换对应ID的section：通过JSON序列化/反序列化实现深拷贝，确保完全替换嵌套结构
  updatedSections[newSection.id] = JSON.parse(JSON.stringify(newSection));
  return updatedSections;
}

使用示例 #

假设需要替换section-2，传入新的section对象即可：

// 定义新的section-2
const newSection2 = {
  "id": "section-2",
  "fields": [
    {
      "id": "newField",
      "mandatory": true,
      "visible": true,
      "fieldLabel": "新增字段",
      "fieldType": "text"
    }
  ]
};

// 执行替换，得到更新后的sections
const updatedSections = replaceSection(originalSections, newSection2);

说明：

• 函数会返回一个全新的sections对象，原originalSections不会被修改
• 新section会完全覆盖原sections中对应ID的对象，包括所有嵌套的fields、gridItems等结构，实现深度替换
• 如果项目中已引入lodash库，也可以用_.cloneDeep(newSection)替代JSON.parse(JSON.stringify(newSection))，处理特殊类型（如Date、函数）时更可靠

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