javascript - 在 javascript 中组合 2 个对象并连接值而不覆盖属性

Question

我看过很多关于此问题的帖子，但似乎没有一个能做我想做的事情，或者至少没有一个是我在搜索过程中发现的。

我有两个对象，我需要将它们组合起来而不覆盖任何属性。如果两个键相同，那么我需要连接它们的值。示例:

const base = {
  icon: "icon--value1"
  item: "item--value"
} 

const extend = {
  icon: "icon--value2"
  item: "item--value"
  list: "list--value"
} 

组合对象

const combined = { 
  icon: "icon--value1 icon--value2"
  item: "item--value"
  list: "list--value"
}

我尝试使用 es6 分配和 es6 解构，但它们只是覆盖了值。

 combined = {...base, ... extend}

这不是我想要的结果。有人知道我如何才能实现上述目标吗？预先感谢您的任何帮助。

Answer 1

如果您乐于使用 lodash(这也意味着不需要重新发明轮子)，您可以使用文档 here 中的 mergeWith() 函数。 。例如:

const base = {
  icon: "icon--value1",
  item: "item--value"
} 

const extend = {
  icon: "icon--value2",
  item: "item--value",
  list: "list--value"
} 

const res = _.mergeWith(base, extend, (objVal, srcVal) => 
  objVal && objVal !== srcVal ? `${objVal} ${srcVal}` : srcVal
)

console.log(res)

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>

或者，您可以通过执行以下操作来创建自己的 mergeWith:

const base = {
  icon: "icon--value1",
  item: "item--value"
} 

const extend = {
  icon: "icon--value2",
  item: "item--value",
  list: "list--value"
} 

const customMergeWith = (a, b, proc) => {
  const result = { ...a }
  Object.keys(b).forEach(k => {
    result[k] = proc(result[k], b[k])
  })
  return result
}

const res = customMergeWith(base, extend, (objVal, srcVal) => 
  objVal && objVal !== srcVal ? `${objVal} ${srcVal}` : srcVal
)

console.log(res)

请注意，我个人更喜欢使用 lodash 版本，因为它会更健壮，并且您需要担心的代码更少。如果没有必要，不要尝试重新发明轮子。

<小时/>

最后，人们似乎认为像 lodash 这样的库应该避免，可能是因为它们的大小。然而，现在您只能导入您需要的内容。有关详细信息，请参阅此答案:How to Import a Single Lodash Function?