Detailed explanation of the implementation steps of array merging method and object merging in JS

This time I will bring you a detailed explanation of the steps to achieve the merging of the array merging method and object in JS. What are the precautions for the implementation of the array merging method and object merging in JS? The following are Let’s take a look at practical cases.

1 Array merging

1.1 concat method

var a=[1,2,3],b=[4,5,6];
var c=a.concat(b);
console.log(c);// 1,2,3,4,5,6
console.log(a);// 1,2,3 不改变本身

1.2 Loop traversal

var arr1=['a','b'];
var arr2=['c','d','e'];
for(var i=0;i<arr2.length;i++){
   arr1.push(arr2[i]) 
}
console.log(arr1);//[&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,&#39;d&#39;,&#39;e&#39;]

1.3 apply

To merge array arr1 and array arr2, use Array.prototype.push.apply(arr1, arr2) or arr1.push.apply( arr1,arr2);

var arr1=['a','b'];
var arr2=['c','d','e'];
Array.prototype.push.apply(arr1,arr2);
//或者
arr1.push.apply(arr1,arr2);<br>console.log(arr1) //['a','b','c','d','e']

2 Object merge

2.1 $.extend()

var obj1= {'a': 1};
var obj2= {'b': 1};
var c = $.extend(obj1, obj2); 
console.log(obj1); // {a: 1, b: 1} obj1已被修改 
//或者 <br>var obj3 = $.extend({}, obj1, obj2) <br>console.log(obj3); //{a: 1, b: 1} 不会改变obj1,obj2

2.2 Traversal assignment

var obj1={'a':1};
var obj2={'b':2,'c':3};
for(var key in obj2){
   if(obj2.hasOwnProperty(key)===true){  <br>   //此处hasOwnProperty是判断自有属性，
使用 for in 循环遍历对象的属性时，原型链上的所有属性都将被访问会避免原型对象扩展带来的干扰
      obj1[key]=obj2[key];
} 
}
console.log(obj1);//{'a':1,'b':2,'c':3};

2.3 Obj.assign()

You can copy any number of the source object’s own enumerable properties to the target object, and then Return the target object.

Object.assign(target, ...sources)
//a. 复制一个对象<br>var obj = { a: 1 ,b:2};
var copyObj = Object.assign({}, obj);
console.log(copyObj); // { a: 1,b:2 }<br><br>//b.合并多个对象 
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 }
console.log(o1); // { a: 1, b: 2, c: 3 }, 且目标对象自身也会改变。　

2.4 Deep copy and shallow copy of object

2.4.1 Shallow copy

var obj1={'a':1};
var obj2={'b':{'b1':22,'b2':33}};
$.extend(obj1, obj2);  //obj1拷贝了obj2的属性
console.log(obj1) // {'a':1,'b'{'b1':22,'b2':33}}
console.log(obj1.b.b1) // 22
obj2.b.b1=44;  //obj2重新赋值
console.log(obj1.b.b1) // 44 obj1.b仅拷贝了对象的指引，所以受原obj2的影响

2.4.2 Deep copy

var obj1={'a':1};
var obj2={'b':{'b1':22,'b2':33}};
$.extend(true,obj1, obj2);  //第一个参数设为true表示深复制
console.log(obj1) // {'a':1,'b'{'b1':22,'b2':33}}
console.log(obj1.b.b1) // 22
obj2.b.b1=44;  //obj2重新赋值
console.log(obj1.b.b1) // 22 obj1拷贝了obj2的所有属性以及值，并不受obj2的影响

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps to install and use Node.js Express

Node front-end development template engine Jade usage steps Detailed explanation

The above is the detailed content of Detailed explanation of the implementation steps of array merging method and object merging in JS. For more information, please follow other related articles on the PHP Chinese website!