深拷贝与浅拷贝

最新推荐文章于 2024-10-07 20:56:37 发布

qq_53356989

最新推荐文章于 2024-10-07 20:56:37 发布

阅读量33

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_53356989/article/details/131885474

版权

文章探讨了JavaScript中深拷贝和浅拷贝的概念，对于基本数据类型，赋值即为深拷贝。而对于数组和对象，赋值是浅拷贝，例如通过解构赋值进行一维数组的拷贝。JSON.parse(JSON.stringify())方法可以实现大部分情况的深拷贝，但无法处理函数。为了实现完全的深拷贝，可以使用递归函数。文章还提供了一个递归实现深拷贝的示例代码。

摘要由CSDN通过智能技术生成

深拷贝与浅拷贝

对于基本数据类型而言为赋值，不存在深浅拷贝一说，如果非要划分，可以理解为深拷贝
```
let a = 5;
let b = a;
b = 3;
console.log(a,b);    5,3
```

数组与对象的赋值都叫做浅拷贝（藕断丝连）

let arr = [1,2,3];
let newArr = arr;
newArr.push(4);
console.log(arr,newArr);    [1,2,3,4],[1,2,3,4]

解构赋值针对一维数组和对象可以看作是深拷贝，多维的就是浅拷贝

let arr = [1,2,3];
let newArr = [...arr];
newArr.push(4);
console.log(arr,newArr);   //[1,2,3]  [1,2,3,4];

let arr2 = [[1,2,3],[4,5,6]];
let newArr2 = [...arr2];
newArr2[0].push(888);
console.log(arr2,newArr2);   //[[1,2,3,888],[4,5,6]]   [[1,2,3,888],[4,5,6]]

深拷贝用法

**JSON.parse(JSON.stringify())**实现拷贝：

let list = [
	{id:1,stuName:'小米',class:'三年级'}，
	{id:2,stuName:'小王',class:'四年级'}，
	{id:3,stuName:'小张',class:'五年级'}，
]
let newList = JSON.parse(JSON.stringify(list));
newList.push(id:888);
console.log(list,newList);  
-----------------------------------------------
//结果如下：
[
	{id:1,stuName:'小米',class:'三年级'}，
	{id:2,stuName:'小王',class:'四年级'}，
	{id:3,stuName:'小张',class:'五年级'}，
],
[
	{id:1,stuName:'小米',class:'三年级'}，
	{id:2,stuName:'小王',class:'四年级'}，
	{id:3,stuName:'小张',class:'五年级'}，
	{id:888}
]

普通引用数据类型可以通过 **JSON.parse(JSON.stringify())**来拷贝，但是这种方法只能实现80%的深拷贝，方法function()不能拷贝，因为将function关键字转换成’function’会失去其原本的意义

通过递归函数实现100%的深拷贝(针对引用数据类型=>数组、对象)

function deepClone(source){
	//数组 => Array(基类)  对象 => Object
	const tar = source.constructor === Array ? [] :{};
	for(let keys in source){
		if(source.hasOwnProperty(keys)){
			//keys => 3
			//引用数据类型（数组、对象）
			if((source[keys] && typeof source[keys] === 'object'){
				tar[keys] = source[keys].constructor === Array ? [] : {};
				//继续递归调用，直到最后是基本类型为止
				tar[keys] = deepClone(source[keys]);
			})else{
			//基本数据类型，直接赋值
				tar[keys] = source[keys];
			}
		}
	}
	return tar;
}