How to concatenate properties from multiple JavaScript objects

Question

I am looking for a better way to "add" multiple JavaScript objects (associative arrays).

For example, given:

a = { "one" : 1, "two" : 2 }; b = { "three" : 3 }; c = { "four" : 4, "five" : 5 }; 

what is the best way to calculate:

 { "one" : 1, "two" : 2, "three" : 3, "four" : 4, "five" : 5 } 

Answer 1

Object.assign() introduced in ECMAscript 6 to achieve this in Javascript.

The Object.assign () method is used to copy the values ​​of all enumerated own properties from one or more source objects to the target object. It will return the target.

MDN documentation on Object.assign ()

 var o1 = { a: 1 }; var o2 = { b: 2 }; var o3 = { c: 3 }; var obj = Object.assign({}, o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 } 

Object.assign supported in many modern browsers , but not all of them. Use a transpiler like Babel and Traceur to create backward compatible ES5 JavaScript.

Answer 2

jQuery has a good way to do this.

http://api.jquery.com/jQuery.extend/

Answer 3

This should do it:

 function collect() { var ret = {}; var len = arguments.length; for (var i=0; i<len; i++) { for (p in arguments[i]) { if (arguments[i].hasOwnProperty(p)) { ret[p] = arguments[i][p]; } } } return ret; } 

Input:

 a = { "one" : 1, "two" : 2 }; b = { "three" : 3 }; c = { "four" : 4, "five" : 5 }; d = collect(a, b, c); console.log(d); 

Output:

 Object one=1 two=2 three=3 four=4 five=5 

Answer 4

Underscore has several methods for this:

1. _. extend (destination, * sources)

Copy all the properties of the source objects into the target object and return the target object.

 _.extend(a, _.extend(b, c)); => {"one" : 1, "two" : 2, "three" : 3, "four" : 4, "five" : 5 } 

or

 _.extend(a, b); => {"one" : 1, "two" : 2, "three" : 3} _.extend(a, c); => {"one" : 1, "two" : 2, "three" : 3, "four" : 4, "five" : 5 } 

2. _. defaults (object, * default)

Fill in the undefined properties in the object with the values ​​from the default objects and return the object .

 _.defaults(a, _.defaults(b, c)); => {"one" : 1, "two" : 2, "three" : 3, "four" : 4, "five" : 5 } 

or

 _.defaults(a, b); => {"one" : 1, "two" : 2, "three" : 3} _.defaults(a, c); => {"one" : 1, "two" : 2, "three" : 3, "four" : 4, "five" : 5 } 

Answer 5

 function Collect(a, b, c) { for (property in b) a[property] = b[property]; for (property in c) a[property] = c[property]; return a; } 

Note. Existing properties of previous objects will be overwritten.

Answer 6

ECMAScript 6 has a distribution operator . And now you can do this:

 const obj1 = {1: 11, 2: 22} const obj2 = {3: 33, 4: 44} const obj3 = {...obj1, ...obj2} console.log(obj3) // {1: 11, 2: 22, 3: 33, 4: 44} 

Answer 7

Why should a function be limited to three arguments? Also check hasOwnProperty .

 function Collect() { var o={}; for(var i=0;i<arguments.length;i++) { var arg=arguments[i]; if(typeof arg != "object") continue; for(var p in arg) { if(arg.hasOwnProperty(p)) o[p] = arg[p]; } } return o; } 

Answer 8

 function collect(a, b, c){ var d = {}; for(p in a){ d[p] = a[p]; } for(p in b){ d[p] = b[p]; } for(p in c){ d[p] = c[p]; } return d; } 

Answer 9

Perhaps the fastest, most effective and more general way is this (you can combine any number of objects and even copy to the first → assign):

 function object_merge(){ for (var i=1; i<arguments.length; i++) for (var a in arguments[i]) arguments[0][a] = arguments[i][a]; return arguments[0]; } 

It also allows you to modify the first object as it is passed by reference. If you do not want this, but want to have a completely new object containing all the properties, you can pass {} as the first argument.

 var object1={a:1,b:2}; var object2={c:3,d:4}; var object3={d:5,e:6}; var combined_object=object_merge(object1,object2,object3); 

shared_object and object1 both contain properties of object1, object2, object3.

 var object1={a:1,b:2}; var object2={c:3,d:4}; var object3={d:5,e:6}; var combined_object=object_merge({},object1,object2,object3); 

In this case, the united_object contains the properties of object1, object2, object3, but object1 does not change.

Check here: https://jsfiddle.net/ppwovxey/1/

Note. JavaScript objects are passed by reference.

Answer 10

I also wrote this merge object a reusable component that also relies on Object.assign to merge several objects without changing them, and there can be reuse without duplication

Example:

 const o1 = { a: 1 }; const o2 = { b: 2 }; const o3 = { c: 3 }; const obj = merge(o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 } console.log(o1); // { a: 1 } does not mutate objects 

(Also added tests).