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

admin管理员组

文章数量:1318328

I'm trying to add properties from one object into another without writing over the original property.

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

I've tried the following but I can't see to figure it out:

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

This returns the properties overwritten. I tried variations of this, but seem to always be overwriting, or missing properties from obj1

I also tried this code:

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

The object doesn't even have any of the properties from obj1.

I am aware of "...Object" but the lesson I'm practicing doesn't want me to work with that. I managed to make it work with that however.

Thanks in advance!

I'm trying to add properties from one object into another without writing over the original property.

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

I've tried the following but I can't see to figure it out:

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

This returns the properties overwritten. I tried variations of this, but seem to always be overwriting, or missing properties from obj1

I also tried this code:

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

The object doesn't even have any of the properties from obj1.

I am aware of "...Object" but the lesson I'm practicing doesn't want me to work with that. I managed to make it work with that however.

Thanks in advance!

• javascript
• object
• properties
• addition

Share Improve this question Follow edited Oct 27, 2017 at 6:16 JLRishe 102k1919 gold badges137137 silver badges171171 bronze badges asked Oct 27, 2017 at 4:07 Makan AzarshahyMakan Azarshahy 31333 silver badges1111 bronze badges 2

• Try let obj3 = Object.assign({}, obj2, obj1); – elclanrs Commented Oct 27, 2017 at 4:13
• Your function works. {a: 1, b: 4, c: 3, d: 4} is the result of merging obj1 into obj2 so you're probably passing the arguments in the wrong order. See my answer for a snippet demonstrating this. – JLRishe Commented Oct 27, 2017 at 4:16

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 5

ES2015:

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

ES2018:

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

Are you sure you're passing the arguments to mergeProp in the right order?

If I call mergeProp(obj1, obj2), it returns the desired result. If I call mergeProp(obj2, obj2), it returns the problem result that you are describing.

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

Loop through the object obj2 using for..in and check if obj1 has the same key. If the key is not here in obj1 ,add that key and value to it

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}

Lots of ways to do it, here's another:

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

Using ES6 with 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);

For the case in question, you would do:

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}

There's no limit to the number of objects you can merge: Object.assign({}, obj1, obj2, obj3, etc);

• All objects get merged into the first object.
• Only the object in the first argument is mutated and returned.
• Later properties overwrite earlier properties with the same name.

Current browser support is getting better, but if you're developing for browsers that don't have support, you can use a polyfill.

If you're using jQuery then you would do like this:

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}

Careful: the variable obj2 will be modified, though. jQuery doesn't return a new instance. The reason for this (and for the naming) is that .extend() was developed to extend objects, rather than to munge stuff together. If you want a new object (e.g. obj2 you don't want to touch), you can always jQuery.extend({}, obj2, obj1);

本文标签： How to add properties from one object into another without overwriting in JavascriptStack Overflow