JavaScript对象属性替换：保留原属性与补全差异对象

嘿，我来帮你搞定这个对象合并的问题！根据你的需求，我们需要把newData里的veggies属性整合到oldData中，同时保留oldData原有的fruits属性，还要给veggies数组里的新元素补全缺失的colour字段（用standardColor）。下面是具体的实现思路和代码：

核心思路 #

1. 不修改原对象：先创建原对象的副本，避免污染原始数据
2. 处理数组元素合并：遍历newData.veggies的每个元素，和oldData.veggies对应位置的元素合并（新属性覆盖旧属性）
3. 补全缺失属性：如果元素没有colour字段，优先用旧元素的colour，没有的话就用预设的standardColor

代码实现 #

// 补全示例里的变量定义（原示例里的red和fruits需要加引号/初始化）
var fruits = ['apple', 'banana'];
var oldData = { fruits: fruits, veggies: [{ sweet: false, colour: 'red', data: [1, 2, 3] }] };
var newData = { veggies: [{ sweet: true, data: [99, 100, 101] }, { sweet: false, data: [888, 777, 665] }] };
var standardColor = "blue";

// 处理veggies数组：合并新旧元素，补全缺失的colour
const updatedVeggies = newData.veggies.map((newVeggie, index) => {
  // 获取旧数据中对应位置的元素，没有则用空对象兜底
  const oldVeggie = oldData.veggies[index] || {};
  // 合并属性：新属性优先覆盖旧属性，同时补全colour字段
  return {
    ...oldVeggie, // 先拿旧元素的所有属性
    ...newVeggie, // 用新元素的属性覆盖旧的（比如sweet和data）
    colour: newVeggie.colour || oldVeggie.colour || standardColor // 补全colour
  };
});

// 生成最终的合并对象：保留oldData的其他属性，替换veggies为处理后的数组
const mergedData = {
  ...oldData,
  veggies: updatedVeggies
};

console.log(mergedData);

运行这段代码后，mergedData的结果会是：

{
  fruits: ['apple', 'banana'],
  veggies: [
    { sweet: true, colour: 'red', data: [99, 100, 101] }, // 保留了旧元素的red，替换了sweet和data
    { sweet: false, colour: 'blue', data: [888, 777, 665] } // 新元素补全了blue的colour
  ]
}

扩展：通用补全多个属性的方法 #

如果以后需要补全更多缺失属性，可以写一个通用函数来处理，这样更灵活：

// 通用函数：给对象补全缺失的默认属性
function fillMissingProps(item, defaultProps) {
  return Object.entries(defaultProps).reduce((result, [key, defaultValue]) => {
    // 如果item里有这个属性就用自己的，没有就用默认值
    result[key] = item[key] !== undefined ? item[key] : defaultValue;
    return result;
  }, { ...item }); // 先拷贝原对象，避免修改原数据
}

// 使用这个函数处理veggies
const updatedVeggies = newData.veggies.map((newVeggie, index) => {
  const oldVeggie = oldData.veggies[index] || {};
  const mergedVeggie = { ...oldVeggie, ...newVeggie };
  // 这里可以定义多个默认属性，比如以后加个taste属性
  return fillMissingProps(mergedVeggie, { colour: standardColor });
});

const mergedData = { ...oldData, veggies: updatedVeggies };

这样不管以后要补多少个缺失属性，只需要修改fillMissingProps的第二个参数就行啦！

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