React中如何获取两个嵌套对象的指定差异内容？

假设你的两个常量对象结构示例如下：

const initialData = {
  Phases: [
    { PhaseName: '44', /* 其他一致属性 */ },
    // 其余结构完全一致的Phase元素
  ]
};

const initialData2 = {
  Phases: [
    { PhaseName: '66666', /* 其他一致属性 */ },
    // 其余结构完全一致的Phase元素
  ]
};

针对你的需求，可通过以下几种方式获取差异值：

直接提取（已知差异位置） #

如果已明确差异固定出现在第一个Phase元素的PhaseName属性，直接访问目标对象的对应属性即可：

const diffValue = initialData2.Phases[0].PhaseName;
console.log(diffValue); // 输出 '66666'

对比验证后提取（通用场景） #

若需要先确认属性确实存在差异再提取，可增加对比逻辑：

// 先检查数组长度及元素存在性
if (initialData.Phases.length > 0 && initialData2.Phases.length > 0) {
  const originalName = initialData.Phases[0].PhaseName;
  const newName = initialData2.Phases[0].PhaseName;
  
  if (originalName !== newName) {
    console.log(newName); // 输出 '66666'
  } else {
    console.log('该属性无差异');
  }
}

遍历数组找差异（扩展场景） #

如果不确定差异所在的Phase元素位置，可遍历数组逐个对比：

const diffValues = [];
// 假设两个Phases数组长度一致
initialData.Phases.forEach((phase, index) => {
  const targetPhase = initialData2.Phases[index];
  if (phase.PhaseName !== targetPhase.PhaseName) {
    diffValues.push(targetPhase.PhaseName);
  }
});

console.log(diffValues); // 输出 ['66666']

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