在 javascript 和 concat 值中组合 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?

Answer 2

您可以使用reduce 来完成。

这里的想法是：-

1. 我们用两个对象的键创建了一个Set。
2. 然后我们循环遍历键数组。对于每个键，我们在两个对象中搜索值并将它们连接起来（请记住，我们需要在这里使用||，否则如果一个对象没有属性将返回undefined，它将被添加到输出中，而不是所需）。然后我们将键和值添加到输出对象。

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

let keys = [...new Set([...Object.keys(base), ...Object.keys(extend)]) ]

let output = keys.reduce( (op, cur) => {
  if((base[cur] && extend[cur]) && (base[cur] !== extend[cur])){
    op[cur] = (base[cur]||'') + " " + (extend[cur]||'')
  }
  else {
    op[cur] = base[cur] || extend[cur]
  }
  return op;
},{})

console.log(output)

另一种方法来实现我对 Set 所做的事情

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

let keys = [...Object.keys(base), ...Object.keys(extend)]

let uniqueKeys = Object.keys(keys.reduce((output,cur)=>{
  if( !output[cur] ){
    output[cur]=''
  }
  return output;
},{}))

let output = uniqueKeys.reduce( (op, cur) => {
  if((base[cur] && extend[cur]) && (base[cur] !== extend[cur])){
    op[cur] = (base[cur]||'') + " " + (extend[cur]||'')
  }
  else {
    op[cur] = base[cur] || extend[cur]
  }
  return op;
},{})

console.log(output)

Answer 3

对我来说，这将是最易读的处理方式......

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

let keys = [...Object.keys(base), ...Object.keys(extend)]

let output = keys.reduce((acc, key) => {
   if (acc[key]) return acc;
   let newVal = (
       (base[key] || "") 
      + " " 
      +(extend[key] || "")
   );
   return {...acc, [key]: newVal.trim().trimStart() };            
},{})