Summary of methods for combining JS arrays and merging with objects

1 combination

1.1 concat method

The Array object of js provides a method called concat(), which concatenates two or more arrays and returns the result.

var a=[1,2,3],b=[4,5,6];
var c=(b);
(c);// 1,2,3,4,5,6
(a);// 1,2,3  Don't change yourself

There is a problem here. After the concat method connects the two arrays a and b, the data of the two arrays a and b will not change, and a new array will be returned at the same time. In this way, when we need to combine multiple times, it will cause a lot of memory waste, so this method is definitely not the best.

1.2 Loop traversal

The general idea is: iterate through one of the arrays and add all the elements in the array to another array in turn. Directly upload the code:

var a=[0,1];
var b=[2,3,4];
 
for(var i=0;i<;i++){
      (b[i]) 
}
 
(a);//[0,1,2,3,4]

This way of writing can solve the waste of memory in the first solution, but there will be another problem: ugly! It makes no sense to say this. If you can do it with just one line of code, wouldn't it be great~

1.3 apply

The apply method of the function has a feature, that is (obj,argv), argv is an array. So we can take advantage of this,

Merge array a and array b, using (a,b) or (a,b);

// How to write ES5var a = [0, 1, 2];
var b = [3, 4, 5];
(a, b);
 
or
 
(a,b)
 
//(a);//[0,1,2,3,4,5]

(a,b);

Call the apply method of this function instance, and pass, b as a parameter at the same time, so that this method will traverse all elements of the b array to achieve the effect of merging.

This may be a bit confusing here. We can think of b as [4,5,6] and become like this:

(a,[4,5,6]);

Then the above operation is equivalent to:

(4,5,6);

1.4 ES6 writing method—extended operation

// ES6 writing method 1var a = [0, 1, 2];
var b = [3, 4, 5];
(...b);
(a)//[0,1,2,3,4,5]

// ES6 writing method 2var a = [0, 1, 2];
var b = [3, 4, 5];
var c=[...a, ...b]
(c)//[0,1,2,3,4,5]

1.5 ES6 writing method—using forEach()

var arr1 = [1, 2, 3];
var arr2 = ["a","b","c","d","e","f"];
 
(item=>{
(item)
});
 
(arr2) // [1, 2, 3, "a", "b", "c", "d", "e", "f"]

Notice:

1) The above merging method does not consider which of the two arrays a and b is smaller in length.

So a good way is to pre-judgment which of the two arrays a and b is larger, and then use large numbers to combine and small arrays, which reduces the number of array elements operations!

2) Sometimes we don’t want the original array (a, b) to change, so we can only use concat.

2 Object Merge

2.1 $.extend() (shallow copy)

var obj1= {'a': 1};
var obj2= {'b': 1};
var c = $.extend(obj1, obj2);
(obj1); // {a: 1, b: 1}  obj1Have been modified

or

<br>var obj3 = $.extend({}, obj1, obj2) <br>(obj3); //{a: 1, b: 1} Will not changeobj1,obj2

2.2 Traversal assignment (shallow copy)

var obj1={'a':1};
var obj2={'b':2,'c':3};
for(var key in obj2){
     if((key)===true){// Here hasOwnProperty is to judge its own properties. When using for in loop through the properties of an object, all properties on the prototype chain will be accessed, which will avoid interference caused by the expansion of the prototype object.           obj1[key]=obj2[key];
} 
}
 
(obj1);//{'a':1,'b':2,'c':3};

2.3 () (Shallow copy)

You can copy the enumerable properties of any number of source objects themselves to the target object and then return to the target object.

(target, ...sources)

//a. Copy an object<br>var obj = { a: 1 ,b:2};var copyObj = ({}, obj);
(copyObj); // { a: 1,b:2 }<br><br>//b. Merge multiple objects 
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
 
var obj = (o1, o2, o3);
(obj); // { a: 1, b: 2, c: 3 }
(o1);  // { a: 1, b: 2, c: 3 }, And the target object itself will change。　

2.4 Deep and shallow copy of objects

2.4.1 Light copy

var obj1={'a':1};
var obj2={'b':{'b1':22,'b2':33}};
 
$.extend(obj1, obj2);   //obj1 copied the attributes of obj2 
(obj1)  // {'a':1,'b'{'b1':22,'b2':33}}
(.b1)  // 22
 
.b1=44;   //obj2 reassigns(.b1)  // 44  Only the object's guidance has been copied，So it'sobj2The impact of

2.4.2 Deep Copy

var obj1={'a':1};
var obj2={'b':{'b1':22,'b2':33}};
 
$.extend(true,obj1, obj2);   //Set the first parameter to true to indicate deep copy 
(obj1)  // {'a':1,'b'{'b1':22,'b2':33}}
(.b1)  // 22
 
.b1=44;   //obj2 reassigns(.b1)  // 22 obj1Copyedobj2All properties and values ​​of，Not affectedobj2The impact of

The above$.extend(true,obj1, obj2) It's just one of the deep copy methods, and there are other methods such asJSON serialization, recursionwait.

This is the article about the summary of JS array combination and merging with objects. For more related JS array combination and merging with objects, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!