React TypeScript中按ID匹配替换JSON对象数组的方法

需求回顾 #

• 替换第一个JSON数组中每个对象的traps字段，丢弃原有内容
• 匹配规则：
  • 原对象id=0 → 替换为第二个数据源中所有id=0的trap数组内容
  • 原对象id=1 → 合并第二个数据源中所有id=1的trap数组，作为新的traps值

解决方案思路 #

1. 预处理第二个数据源：先把嵌套的二维数组扁平化，再按id分组，将同一id下的所有trap数组合并成一个数组
2. 遍历原数据替换：对原数组中的每个对象，根据id从分组结果中取出对应的合并后trap数组，替换掉原有的traps字段

TypeScript 实现代码 #

首先定义数据类型，保证类型安全：

// 定义Trap项的类型
interface Trap {
  size: string;
  for: string;
  amount: string | number;
}

// 原数据对象类型
interface OriginalItem {
  id: number;
  traps: any; // 原traps结构不固定，用any临时兼容
}

// 第二个数据源的子项类型
interface ReplacementItem {
  id: number;
  trap: Trap[];
}

然后实现处理逻辑：

// 示例原数据
const originalData: OriginalItem[] = [
  {
    "id": 0,
    "traps": [
      { "size": "big", "for": "none", "amount": 8 },
      { "size": "large", "for": "spa", "amount": 4 }
    ]
  },
  {
    "id": 1,
    "traps": {
      "traps": {
        "children": [/* 原有嵌套结构 */]
      }
    }
  }
];

// 示例替换数据源
const replacementData: ReplacementItem[][] = [
  [{ "id": 0, "trap": [{ "size": "regular", "for": "Si", "amount": 4 }] }],
  [{ "id": 1, "trap": [{ "size": "ad", "for": "dad", "amount": "0" }] }],
  [{ "id": 1, "trap": [{ "size": "ran", "for": "sultan", "amount": "2" }] }],
];

// 1. 扁平化替换数据源并按id分组合并trap数组
const groupedTraps = replacementData
  .flat() // 把二维数组转成一维
  .reduce<Record<number, Trap[]>>((acc, item) => {
    // 如果当前id不存在，初始化空数组
    if (!acc[item.id]) {
      acc[item.id] = [];
    }
    // 合并当前item的trap数组到对应id的数组中
    acc[item.id] = [...acc[item.id], ...item.trap];
    return acc;
  }, {});

// 2. 处理原数据，替换traps字段
const processedData = originalData.map(item => ({
  ...item,
  traps: groupedTraps[item.id] || [] // 没有匹配到id时返回空数组
}));

console.log(processedData);

代码说明 #

• flat()：将替换数据源的二维数组结构转为一维，方便后续遍历处理
• reduce()：遍历扁平化后的数组，以id为键，把所有对应trap数组合并，得到{ [id]: Trap[] }的分组结构
• map()：遍历原数据，复制原对象的所有字段，仅替换traps为分组后对应id的合并数组；如果没有匹配到id，返回空数组避免报错

最终输出结果 #

处理后的processedData结构如下：

[
  {
    "id": 0,
    "traps": [{"size": "regular", "for": "Si", "amount": 4}]
  },
  {
    "id": 1,
    "traps": [
      {"size": "ad", "for": "dad", "amount": "0"},
      {"size": "ran", "for": "sultan", "amount": "2"}
    ]
  }
]

内容的提问来源于stack exchange，提问作者Георги Христов