如何在不覆盖 Javascript 的情况下将一个对象的属性添加到另一个对象答案

【问题标题】：How to add properties from one object into another without overwriting in Javascript如何在不覆盖 Javascript 的情况下将一个对象的属性添加到另一个对象
【发布时间】：2017-10-27 04:07:11
【问题描述】：

我正在尝试将一个对象的属性添加到另一个对象中，而不覆盖原始属性。

//Start
obj1 = {a: 1, b: 2, c: 3}
obj2 = {b: 4, c: 3, d: 4}

//Goal
obj1 = {a: 1, b: 2, c: 3, d: 4}

我尝试了以下方法，但我无法弄清楚：

function mergeProp(obj1, obj2) { //obj1 is destination, obj2 is source
  for (var a in obj2) {
    if (obj2.hasOwnProperty(a) && !obj1.hasOwnProperty(a)) {
      obj1[a] = obj2[a];
    }
  }
  return obj1 //returns {a: 1, b: 4, c: 3, d: 4} should have {...b: 2...}
}

这会返回被覆盖的属性。我尝试了此方法的变体，但似乎总是覆盖或缺少 obj1

的属性

我也试过这个代码：

function extend(obj1, obj2) {
  let obj = {};
  for (let a in obj2) {
    obj[a] = obj2[a];
  };
  for (let b in obj1){
    obj[b] = obj1[b];
  };
  return obj; //Returns {b: 4, c: 3, d: 4}
}

该对象甚至没有来自 obj1 的任何属性。

我知道“...对象”，但我正在练习的课程不希望我使用它。不过，我设法让它与它一起工作。

提前致谢！

【问题讨论】：

试试let obj3 = Object.assign({}, obj2, obj1);
您的功能有效。 {a: 1, b: 4, c: 3, d: 4} 是将 obj1 合并到 obj2 的结果，因此您可能以错误的顺序传递参数。请参阅我的答案以获取演示此内容的 sn-p。

标签： javascript object properties add

【解决方案1】：

ES2015：

const obj3 = Object.assign({}, obj2, obj1);

ES2018：

const obj3 = {...obj2, ...obj1};

【讨论】：

【解决方案2】：

您确定将参数传递给mergeProp 的顺序正确吗？

如果我调用mergeProp(obj1, obj2)，它会返回所需的结果。如果我调用mergeProp(obj2, obj2)，它会返回您描述的问题结果。

//Start
var obj1 = {a: 1, b: 2, c: 3}
var obj2 = {b: 4, c: 3, d: 4}

function mergeProp(obj1, obj2) { //obj1 is destination, obj2 is source
  for (var a in obj2) {
    if (obj2.hasOwnProperty(a) && !obj1.hasOwnProperty(a)) {
      obj1[a] = obj2[a];
    }
  }
  return obj1 //returns {a: 1, b: 4, c: 3, d: 4} should have {...b: 2...}
}

console.log(mergeProp(obj1, obj2))
console.log(mergeProp(obj2, obj1))

【讨论】：

我刚刚仔细检查了一下，网站似乎出现了错误。它现在应该可以工作了。感谢您的确认！

【解决方案3】：

使用for..in 循环对象obj2 并检查obj1 是否具有相同的键。如果 obj1 中的键不在此处，请将该键和值添加到其中

let obj1 = {
  a: 1,
  b: 2,
  c: 3
}
let obj2 = {
  b: 4,
  c: 3,
  d: 4
}

for (var keys in obj2) {
  obj1.hasOwnProperty(keys) || (obj1[keys] = obj2[keys]);
};
console.log(obj1)

obj1 = {a: 1, b: 2, c: 3, d: 4}

【讨论】：

@MakanAzarshahy 这与您尝试执行的操作不同，因为它不检查属性是否是 obj2 上的“自己的”属性。此外，使用“聪明”代码来避免仅将普通的if 语句用于其预期目的只会使代码更难阅读。

【解决方案4】：

有很多方法，这里有另一种：

//Start
let obj1 = {a: 1, b: 2, c: 3};
let obj2 = {b: 4, c: 3, d: 4};

Object.keys(obj2).forEach(key => {
  if (!obj1.hasOwnProperty(key)) {
    obj1[key] = obj2[key];
  }
});

console.log(obj1);
//Goal
//obj1 = {a: 1, b: 2, c: 3, d: 4}

【讨论】：

【解决方案5】：

将ES6 与arrow functions 一起使用

let obj1 = {a: 1, b: 2, c: 3}
let obj2 = {b: 4, c: 3, d: 4}


Object.keys(obj2).forEach(item => {
    if (Object.keys(obj1).indexOf(item) < 0)
        obj1[item] = obj2[item];
})

console.log(obj1);

【讨论】：

【解决方案6】：

对于有问题的情况，你会这样做：

obj1 = {a: 1, b: 2, c: 3};
obj2 = {b: 4, c: 3, d: 4}l

console.log(Object.assign({}, obj2, obj1)); // {b: 2, c: 3, d: 4, a: 1}

可以合并的对象数量没有限制：Object.assign({}, obj1, obj2, obj3, etc);

所有对象都合并到第一个对象中。
只有第一个参数中的对象被变异并返回。
以后的属性会覆盖以前的同名属性。

当前浏览器support 越来越好，但如果您正在为不支持的浏览器进行开发，您可以使用polyfill。

如果你使用 jQuery，那么你会这样做：

obj1 = {a: 1, b: 2, c: 3};
obj2 = {b: 4, c: 3, d: 4}l

console.log(jQuery.extend(obj2, obj1)); // {b: 2, c: 3, d: 4, a: 1}

小心：不过，变量obj2 将被修改。 jQuery 不返回新实例。这样做（以及命名）的原因是 .extend() 是为了扩展对象而开发的，而不是为了将东西混在一起。如果你想要一个新对象（例如你不想触摸的obj2），你总是可以jQuery.extend({}, obj2, obj1);

【讨论】：