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

此 returns 属性被覆盖。我尝试了这个的变体，但似乎总是被覆盖，或者缺少 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

使用 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 2

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

如果我调用 mergeProp(obj1, obj2)，它会 returns 得到想要的结果。如果我调用 mergeProp(obj2, obj2)，它 returns 您描述的问题结果。

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

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

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

Answer 5

ES2015:

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

ES2018:

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

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

所有对象都合并到第一个对象中。
只有第一个参数中的对象被变异和return编辑。
后面的属性会覆盖前面的同名属性。

当前浏览器support is getting better, but if you're developing for browsers that don't have support, you can use a 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 不是 return 新实例。这样做（以及命名）的原因是 .extend() 是为了扩展对象而开发的，而不是将东西放在一起。如果你想要一个新对象（例如 obj2 你不想触摸），你可以随时 jQuery.extend({}, obj2, obj1);

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

How to add properties from one object into another without overwriting in Javascript

javascript

properties

add

object