代码之家 › 专栏 › 技术社区 › me-me

在javascript和concat值中组合2个对象,而不重写属性

ecmascript-6 javascript

me-me · 技术社区 · 6 年前

我有两个对象,我需要在不重写任何属性的情况下组合它们。如果两个键相同,那么我需要计算它们的值。

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 assign和es6 destructuring,但它们只是覆盖了这些值。

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

这不是我想要的结果。有人知道我怎样才能达到上述目标吗?

3 回复 | 直到 6 年前

Matt Way 6 年前

如果您乐于使用lodash(这也意味着不需要重新发明轮子),您可以使用 mergeWith() 功能文件化 here . 例如:

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版本,因为它更健壮,并且您需要担心的代码更少。如果没有必要,不要尝试重新发明轮子。

How to Import a Single Lodash Function?

Code Maniac 6 年前

reduce .

这里的想法是:-

Set
然后我们循环通过密钥数组。对于每个键,我们都会在object和concat中搜索值(请记住,我们需要使用 || 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)

一个替代方案来实现我正在做的事情 设置

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)

cantuket 6 年前

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() };            
},{})