Four methods of object merging and four methods of object merging in JS

Catalog

One 、 Object to merge

1、 Extension operators （...）

2、Object.assign()

 3、 Recursive assignment

4、jquery Medium extend()

Two 、 Array merge

1、 Extension operators

2、 Use array.concat() Method to merge

3、 About Apply

4、array.push() Method to merge

---

One 、 Object to merge

1、 Extension operators （...）

ES6 It is said in the introduction :

Object's extension operator （...） Used to fetch all traversable properties of parameter object , Copy to current object .

let obj1 = {
    name: ' Chen Weiting ',
    gender: ' male ',
    hobby: ' Sing a song '
};
let obj2 = {
    name: ' Chen Weiting ',
    gender: ' male ',
    hobby: ' dance ',
    nationality: ' China '
};
 
let obj = {...obj1, ...obj2};
console.log(obj);  // { name: ' Chen Weiting ', gender: ' male ', hobby: ' dance ', nationality: ' China ' }
 

As can be seen from the above code ：

• Property of the same name ： Merge , And the back （obj2） Put the front （obj1） Cover .
• Different name attributes ： Property value unchanged , Merge only .

notes ： The first level is deep copy , The second level starts with shallow copies .

2、Object.assign()

MDN That's what it says on the paper ：

Object.assign()  Method is used to assign the values of all enumerable properties from one or more source objects to the target objects . It will return the target object .

Used for object merging , It is written as follows ： 

let obj = Object.assign({}, obj1, obj2);
console.log(obj);  // { name: ' Chen Weiting ', gender: ' male ', hobby: ' dance ', nationality: ' China ' }

As can be seen from the above code , The effect is the same as method 1 . 

notes ： The first level is deep copy , The second level starts with shallow copies .

 3、 Recursive assignment

let obj = obj1;
for (var p in obj2){
    if(obj2.hasOwnProperty(p))
    obj[p] = obj2[p];
}
console.log(obj);  // { name: ' Chen Weiting ', gender: ' male ', hobby: ' dance ', nationality: ' China ' }

As can be seen from the above code , The effect is the same as method 1 .  It is similar to adding attributes by direct assignment

notes ： The first level is deep copy , The second level starts with shallow copies

4、jquery Medium extend()

jQuery.extend() Function is used to merge the contents of one or more objects into the target object .

$.extend(obj1, obj2)  //  Shallow copy 
$.extend(true, obj1, obj2)  //  Deep copy 

Two 、 Array merge

1、 Extension operators

Use ES6 Syntax extension operator ： This method also creates a new array

var newArray = [...array,...elements]
console.log(newArray); // ["a", "b", 0, 1, 2]

2、 Use array.concat() Method to merge

Use concat Method ： This method is not added to an existing array , Instead, create and return a new array .

var array = ["a", "b"];
var elements = [0, 1, 2];
 
var newArray = array.concat(elements);
console.log(array); //['a', 'b']
console.log(newArray);// ["a", "b", 0, 1, 2]

3、 About Apply

Use Apply Method ： This method is to add the array items to another array , Is a way to change the original array

var array = ["a", "b"];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.log(array); // ["a", "b", 0, 1, 2]

4、array.push() Method to merge

const heroes = ['Batman'];

heroes.push('Superman');

heroes; // ['Batman', 'Superman']

const heroes = ['Batman', 'Superman'];
const villains = ['Joker', 'Bane'];

heroes.push(...villains);

heroes; // ['Batman', 'Superman', 'Joker', 'Bane']