JS：浅克隆和深克隆、数组的深浅克隆

JS中的浅克隆和深克隆

一、浅克隆
1.浅克隆：被复制对象的所有变量都含有与原来的对象相同的值，而所有的对其他对象的引用仍然指向原来的对象。换言之，浅复制仅仅复制所拷贝的对象，而不复制它所引用的对象。

2.实现浅克隆，以数组为例

1. 准备一个空的结果数组，然后使用for循环遍历原数组，将遍历到的项都推入结果数组
2. 浅克隆只克隆数组的一层，如果数组是多维数组，则克隆的项会“藕断丝连”。

我们先来看一下var arr2 = arr1能不能实现语句的浅克隆

// 准备原数组
var arr1 = [33, 44, 11, 22];
//测试一下是否能够被克隆
var arr2 = arr1;
arr1.push(66);
console.log(arr2);   //[33, 44, 11, 22, 66];
console.log(arr1 == arr2);  //true
//结论：var arr2 = arr1不能实现语句的浅克隆
//也就是说内存中的同一个数组同时被两个变量名指向了

接下来采用上述方法，for循环进行遍历

// 准备原数组
var arr1 = [33, 44, 11, 22];
// 准备一个结果数组
var result = [];
// 遍历原数组，将遍历到的项都推入到结果数组中
for(var i = 0; i < arr1.length; i++){
	result.push(arr1[i]);
}
// 输出结果数组
console.log(result); //[33, 44, 11, 22]

// 测试是否实现了克隆，就是说本质上是内存中的不同数组了
console.log(arr1 == result);  //false
//或者这样测试
//arr1.push(66);
//console.log(result);  //[33, 44, 11, 22]说明分开了

那为什么叫做浅克隆呢？直接看代码

 // 准备原数组
var arr1 = [33, 44, 11, 22, [77, 88]];
// 准备一个结果数组
var result = [];
// 遍历原数组，将遍历到的项都推入到结果数组中
for(var i = 0; i < arr1.length; i++){
	result.push(arr1[i]);
}
// 输出结果数组
console.log(arr1 == result); //false确实被分开了
console.log(result); //[33, 44, 11, 22, [77, 88]]但是藕断丝连

这是因为在遍历到[77, 88]，JS不会对其进行克隆，直接推入结果数组中，也就是只克隆一层

arr1[4].push(99);
console.log(result);
//[33, 44, 11, 22, [77, 88, 99]]

二、深克隆
1.深克隆：深复制把要复制的对象所引用的对象都复制了一遍。
2.实现深克隆，同样以数组为例
因为浅克隆会藕断丝连，那么就需要进行深克隆
使用递归思想，整体思路和浅克隆类似，但稍微进行一些改动:如果遍历到项是基本类型值，则直接推入结果数组;如果遍历到的项是又是数组，则重复执行浅克隆的操作。

// 原数组
var arr1 = [33, 44, 11, 22, [77, 88, [33, 44]]];

// 函数，这个函数会被递归
function deepClone(arr) {
// 结果数组，“每一层”都有一个结果数组
	var result = [];  //局部变量
	// 遍历数组的每一项
	for (var i = 0; i < arr.length; i++) {
    	// 类型判断，如果遍历到的项是数组
    	if (Array.isArray(arr[i])) {
        	// 递归
        	result.push(deepClone(arr[i]));
    	} else {
        // 如果遍历到的项不是数组，是基本类型值，就直接推入到结果数组中，
        // 相当于是递归的出口
        	result.push(arr[i]);
    }
}
	// 返回结果数组
	return result;
}

// 测试一下
var arr2 = deepClone(arr1);
console.log(arr2);
//[33, 44, 11, 22, [77, 88, [33, 44]]]

// 是否藕断丝连
console.log(arr1[4][2] == arr2[4][2]);  //false
arr1[4][2].push(99);  
console.log(arr1);[33, 44, 11, 22, [77, 88, [33, 44, 99]]]
console.log(arr2); [33, 44, 11, 22, [77, 88, [33, 44]]]

总结：
1.使用arr1 = arr2的语法不会克隆数组
2.浅克隆：只克隆数组的第一层，如果是多维数组，或者数组中的项是其他引用类型值，则不克隆其他层
3.深克隆：克隆数组的所有层，要使用递归技术
想要了解对象的浅克隆、深克隆点击即可