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

<强> ES6：

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

<强> ES8 + ^*

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

^{^*第3阶段提案}

Answer 2

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

＆＃13;

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)

＆＃13;

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

＆＃13;

Answer 3

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

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

＆＃13;

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

＆＃13;

Answer 4

将ES6与arrow functions

一起使用

＆＃13;

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

＆＃13;

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

对于相关案例，您可以这样做：

componentDidMount()

您可以合并的对象数量没有限制：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}

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

当前的浏览器support正在变得越来越好，但如果您正在为没有支持的浏览器开发，则可以使用polyfill。

如果您正在使用jQuery，那么您会这样做：

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

小心：但会修改变量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}。 jQuery没有返回一个新实例。这个（以及命名）的原因是.extend（）是为了扩展对象而开发的，而不是将它们组合在一起。如果您想要一个新对象（例如obj2，您不想触摸），您可以随时obj2

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

6 个答案: