如何通过键值匹配嵌套对象与对象数组并替换指定字段值？

我拥有一个嵌套对象data1和一个对象数组data2，其中data2为原始数据源。需求如下：遍历data2中的每个对象，取其name字段的值，在data1中通过displayLevel1、displayLevel2指定的层级找到对应键的值，并用该值替换data2中对应对象的value字段值。例如将data2中Surname对应的value从Bush替换为data1中的Smith，Injury对应的value从Arm替换为Hand。

原始数据 #

let data1 = 
    {
      "fields": {
        "Main": {
          "Personal Details": {
            "Surname": "Smith",
            "Forename1": "John",
            "Nickname": "Johny",
            "Gender": "Male",
            "Date_of_Birth": "05/04/1979",
            "Marital_Status": "Divorced"
          },
          "More Details": {
            "Injury": "Hand",
          }
        }
      }
    }
    
let data2 = [
      {
        "name": "Surname",
        "displayName": "Surname",
        "value": "Bush",
        "dataType": "STRING",
        "displayLevel1": "Main",
        "displayLevel2": "Personal Details",
        "displayLevel3": ""
      },
      {
        "name": "Injury",
        "displayName": "Injury",
        "value": "Arm",
        "dataType": "STRING",
        "displayLevel1": "Main",
        "displayLevel2": "More Details",
        "displayLevel3": ""
      }
    ]

实现方案 #

方式1：直接修改原数组（使用forEach）

这种方式会直接改动data2的元素：

data2.forEach(item => {
  // 按层级从data1中取出对应值
  const targetValue = data1.fields[item.displayLevel1][item.displayLevel2][item.name];
  // 替换当前对象的value字段
  item.value = targetValue;
});

方式2：生成新数组（使用map，不修改原数组）

如果不想改动原数组，可以用map返回一个全新的数组：

const updatedData2 = data2.map(item => ({
  // 拷贝原对象的所有属性
  ...item,
  // 替换value字段为data1中对应的值
  value: data1.fields[item.displayLevel1][item.displayLevel2][item.name]
}));

容错处理（可选）

如果存在层级字段可能不存在的情况，建议添加可选链操作符避免报错，同时保留原value值：

// 直接修改原数组的容错版本
data2.forEach(item => {
  const targetValue = data1.fields?.[item.displayLevel1]?.[item.displayLevel2]?.[item.name];
  // 如果找到有效取值则替换，否则保留原value
  if (targetValue !== undefined) {
    item.value = targetValue;
  }
});

// 生成新数组的容错版本
const updatedData2 = data2.map(item => ({
  ...item,
  value: data1.fields?.[item.displayLevel1]?.[item.displayLevel2]?.[item.name] ?? item.value
}));

最终结果 #

处理后data2（或updatedData2）将变为：

[
      {
        "name": "Surname",
        "displayName": "Surname",
        "value": "Smith",
        "dataType": "STRING",
        "displayLevel1": "Main",
        "displayLevel2": "Personal Details",
        "displayLevel3": ""
      },
      {
        "name": "Injury",
        "displayName": "Injury",
        "value": "Hand",
        "dataType": "STRING",
        "displayLevel1": "Main",
        "displayLevel2": "More Details",
        "displayLevel3": ""
      }
    ]

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