JS, one of the methods of object merging Assign (), recursive assignment & method of array merging..., array. Concat (), array. Push. Apply (), array. Push ()

js in , One of the methods of object merging …、Object.assign()、 Recursive assignment & Method of array merging …、array.concat()、array.push.apply()、array.push()

1、 Object to merge

1.1、 Extension operators （…）

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

let obj1 = {
    
    name: ' Li Shimin ',
    gender: ' male ',
    hobby: ' The war '
};
let obj2 = {
    
    name: ' Zhu yuanzhang ',
    gender: ' male ',
    hobby: ' Separation ',
    nationality: ' China '
};
 
let obj = {
    ...obj1, ...obj2};
console.log(obj);  // { name: ' Zhu yuanzhang ', gender: ' male ', hobby: ' Separation ', 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 .

1.2、Object.assign()

MDN On ：**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: ' Zhu yuanzhang ', gender: ' male ', hobby: ' Separation ', 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 .

1.3、 Recursive assignment

let obj = obj1;
for (var p in obj2){
    
    if(obj2.hasOwnProperty(p))
    obj[p] = obj2[p];
}
console.log(obj);  // { name: ' Zhu yuanzhang ', gender: ' male ', hobby: ' Separation ', 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

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

2、 Array merge

2.1、 Extension operators

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

let arr = [{
    name:' Xiao Ming ',id:1}]
let ary = [{
    name:' Xiaohong ',id:2}]

var newArray = [...arr,...ary]
console.log(newArray);  // [{name:' Xiao Ming ',id:1},{name:' Xiaohong ',id:2}]

2.2、 Use array.concat() Method

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

let arr = [{
    name:' Xiao Ming ',id:1}]
let ary = [{
    name:' Xiaohong ',id:2}]

var newArray = arr.concat(ary);
console.log(arr);  // [{name:' Xiao Ming ',id:1}]
console.log(newArray);   // [{name:' Xiao Ming ',id:1},{name:' Xiaohong ',id:2}]

2.3、 About Apply

Use Apply Method ： This method is to add the array items to another array , It's a kind of Change the method of the original array

let arr = [{
    name:' Xiao Ming ',id:1}]
let ary = [{
    name:' Xiaohong ',id:2}]

arr.push.apply(arr, ary);
console.log(arr);  // [{name:' Xiao Ming ',id:1},{name:' Xiaohong ',id:2}]

2.4、array.push() Method

let arr = [{
    name:' Xiao Ming ',id:1}]
let ary = [{
    name:' Xiaohong ',id:2}]

arr.push(...ary);
console.log(arr); // [{name:' Xiao Ming ',id:1},{name:' Xiaohong ',id:2}]

1

let heroes = [' Angela '];
 
heroes.push(' The Monkey King ');
console.log(heroes);  // [' Angela ', ' The Monkey King ']

2

let heroes = [' Angela ', ' The Monkey King '];
let villains = [' Liu bang ', ' Cao Cao '];
 
heroes.push(...villains);
console.log(heroes);   // [' Angela ', ' The Monkey King ', ' Liu bang ', ' Cao Cao ']