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

Question

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

//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 的任何属性。

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

提前致谢！

Answer 1

ES2015：

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

ES2018：

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

Answer 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))

Answer 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}

Answer 4

使用带有arrow functions ES6

 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);

Answer 5

有很多方法可以做到，这是另一种：

 //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}

Answer 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);

• 所有对象都合并到第一个对象中。
• 只有第一个参数中的对象会发生变异并返回。
• 较晚的属性会覆盖较早的具有相同名称的属性。

当前的浏览器支持越来越好，但如果您正在为不支持的浏览器开发，则可以使用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);