JavaScript中【数组的合并】和【对象的合并 (浅克隆，深克隆)】

1. 数组合并

1.1 数组concat()方法

//concat()
//数组的拼接方法，返回拼接后的新数组
var arr1 = [1,2,3];
var arr2 = [5,6,7];
var res = arr1.concat(arr2);
console.log(res); //[1,2,3,5,6,7]
console.log(arr1); //[1,2,3] arr1自身没有改变

1.2 遍历循环数组

//循环遍历数组
//for in和for of是遍历对象用的，前者遍历对象的key，后者遍历对象的value
var arr1 = ['a','b'];
var arr2 = ['c','d','e'];
for(var i = 0; i < arr2.length; i++){
arr1.push(arr2[i]);
}
console.log(arr1); //['a','b','c','d','e']

1.3 apply方法

合并数组用Array.prototype.push.apply(arr1,arr2)或者arr1.push.apply(arr1,arr2)

//apply
var arr1 = [2,3];
var arr2 = [5,6,7];
Array.prototype.push.apply(arr1,arr2); //指向arr1,apply接收数组并执行
//arr1.push.apply(arr1,arr2);
console.log(arr1); //[2,3,5,6,7]

2. 对象的合并

2.1 Object.assign()

可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。

Object.assign(target, …sources)

第一个参数：target(目标对象)，之后参数都是源对象

//Object.assign()
var obj1 = {
a : 1,
b : 2
};
var obj2 = {
c : 3,
d : 6
};
var obj3 = {
e : 7,
};
var res1 = Object.assign({},obj1,obj2);
var res2 = Object.assign(obj1 , obj2 , obj3);
console.log(res1); //{a: 1, b: 2, c: 3, d: 6}
console.log(res2); //{a: 1, b: 2, c: 3, d: 6, e: 7}
console.log(obj1); //目标对象也改变了{a: 1, b: 2, c: 3, d: 6, e: 7}

2.2 循环遍历对象(for in)

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

2.4 对象的深拷贝和浅拷贝

jQuery例子：

浅拷贝

//浅拷贝
var obj1 = {
a : 1,
b : 2
};
var obj2 = {
c : 3,
d : 6
};
$.extend(false , obj1 , obj2);
console.log(obj1);
obj1.a = 666; //obj2重新赋值
console.log(obj1.a); //666 obj1.b仅拷贝了对象的指针，所以受原obj2的影响

深拷贝

//深拷贝
var obj1 = {
a : 1,
b : 2
};
var obj2 = {
c : 3,
d : 6
};
$.extend(true, obj1 , obj2); //true代表深度拷贝
console.log(obj1); //{a: 1, b: 2, c: 3, d: 6}
obj1.a = 666;
console.log(obj1.a); //1 obj1拷贝了obj2的所有属性以及值，并不受obj2的影响

JavaScript例子

浅拷贝

var obj = { a:1, arr: [2,3] };
var shallowObj = shallowCopy(obj);

function shallowCopy(src) {
var dst = {};
for (var prop in src) {
if (src.hasOwnProperty(prop)) {
dst[prop] = src[prop];
}
}
return dst;
}

深拷贝

var china = {
nation : '中国',
birthplaces:['北京','上海','广州'],
skincolr :'yellow',
friends:['sk','ls']
}
//深复制，要想达到深复制就需要用递归
function deepCopy(o,c){
var c = c || {}
for(var i in o){
if(typeof o[i] === 'object'){
//要考虑深复制问题了
if(o[i].constructor === Array){
//这是数组
c[i] =[]
}else{
//这是对象
c[i] = {}
}
deepCopy(o[i],c[i])
}
else{
c[i] = o[i]
}
}
return c
}
var result = {name:'result'}
result = deepCopy(china,result)
console.dir(result)

参考：js中数组的合并和对象的合并