合并2个嵌套对象/在ES6中有选择地覆盖

Question

我正在寻找一种在ES6中合并2个嵌套对象的方法，以便一个对象有选择地仅覆盖其定义的属性。让我通过示例进行解释：

baseObject = {
  style = {
    background: 'yellow',
    text: {
      color: 'black',
      fontSize: 20,
    }
  }
}

overwritingObject = {
  style: {
    text: {
      fontSize: 12,
    }
  }
}

期望的结果是这样

mergedObject = {
  style = {
    background: 'yellow',
    text: {
      color: 'black',
      fontSize: 12 <---- only this was overwritten
    }
  }
}

我看过原生JS的object.assign和lodash的扩展，分配和合并方法，但似乎都不符合要求（如果我没记错的话）。

Answer 1

Lodash的合并看起来应该可以完全满足您的需求：

mergedObject = _.merge(baseObject, overwritingObject);

https://lodash.com/docs/4.17.15#merge

Answer 2

这只是跟着frodo的回答，并有一个实际的图像，证实了解决方案。

Answer 3

您可以如上所述使用lodash.merge函数，也可以编写自己的深度合并函数

function mergeDeep(target, source) {
  if (target && source) {
    Object.keys(source).forEach(key => {
      if (typeof source[key] === 'object') {
        if (!target[key]) Object.assign(target, { [key]: {} });
        mergeDeep(target[key], source[key]);
      } else {
        Object.assign(target, { [key]: source[key] });
      }
    });
  }
  return target;
}

const baseObject = {
  style: {
    background: 'yellow',
    text: {
      color: 'black',
      fontSize: 20,
    }
  }
}

const overwritingObject = {
  style: {
    text: {
      fontSize: 12,
    }
  }
}

console.log(mergeDeep(baseObject, overwritingObject))