使用deepmerge合并含对象数组的嵌套对象结果不符合预期怎么办

问题原因 #

deepmerge 默认的数组合并逻辑为拼接两个数组的所有元素，你的两个输入对象x和y的loo.array各包含1个元素，合并后自然得到长度为2的数组，和你预期不符。

解决方案 #

你可以通过deepmerge的第三个配置参数自定义数组合并策略，根据你的实际需求选择以下两种常见方案：

方案1：后序数组完全覆盖前序数组 #

如果你的需求是直接用第二个对象的数组替换第一个对象的对应数组，不需要合并数组元素，直接使用如下配置即可：

const deepmerge = require('deepmerge');

// 自定义数组合并函数：直接返回第二个数组
const overwriteArrayMerge = (targetArr, sourceArr) => sourceArr;

const result = deepmerge(x, y, {
  arrayMerge: overwriteArrayMerge
});

执行后得到的结果和你给出的expectedResult完全一致。

方案2：数组同下标元素深度合并 #

如果你需要保留两个数组同下标元素的合并能力（比如两个数组同下标的对象属性有差异时要深度合并，而非直接覆盖），可以使用同位置合并策略：

const deepmerge = require('deepmerge');

const combineArrayMerge = (targetArr, sourceArr, options) => {
  const res = [...targetArr];
  sourceArr.forEach((item, index) => {
    // 目标数组当前下标无元素：直接添加
    if (typeof res[index] === 'undefined') {
      res[index] = options.cloneUnlessOtherwiseSpecified(item, options);
    } 
    // 当前元素是可合并的对象类型：深度合并同位置元素
    else if (options.isMergeableObject(item)) {
      res[index] = deepmerge(targetArr[index], item, options);
    } 
    // 基础类型值：用第二个数组的元素覆盖
    else {
      res[index] = item;
    }
  });
  return res;
};

const result = deepmerge(x, y, {
  arrayMerge: combineArrayMerge
});

该方案在你的场景下也会得到预期结果，同时兼容更复杂的数组元素合并场景。

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