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.深克隆:克隆数组的所有层,要使用递归技术
想要了解对象的浅克隆、深克隆点击即可

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

萏语

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值