JavaScript 中的深浅拷贝

EddieGDY

谈谈对于JavaScript 中的深浅拷贝，有不正确的请大家指导评论

首先 要理解 深浅拷贝就必须要知道JavaScript中数据类型都有哪些
JavaScript的数据类型分为基本类型和引用类型。两种类型在内存中存储的方式也不同
基本类型(保存在栈内存中，值大小固定)：Number、String、Null、Undefined、Boolean、Symbol (ES6)
引用类型(保存在堆内存中，值大小不固定)：对象、数组、函数

浅拷贝
特点 简单的复制拷贝 引用数据类型的地址
地址相同的变量操作引用数据类型 都会有影响
对数组和对象的复制

例子1：基本类型的复制

let a = 1;
let b = a;//复制
console.log(b)//1
a = 2;//改变a的值
console.log(b)//1

例子2：引用类型的复制

	//语法
	let  arr1=[1,2,3,4,5];
	let arr2=arr1;
	arr2[0]='小白';
	    console.log(arr1);
	    console.log(arr2); 
	

定义一个数组 arr1=[1,2,3,4,5];
经过浅拷贝 arr2=arr1； 后 arr2=[1,2,3,4,5];
此时设置数组索引下标0的数据 arr2[0]=‘小白’；
两个数组索引下标为0的数值都会发生改变 结果为

操作拷贝数据，对原数据产生了影响，为浅拷贝。

深拷贝
完整的复制拷贝 一个引用数据类型中的数值数据到另一个引用数据类型中
两个变量 是两个独立的引用数据类型、 两个独立的存储空间
一个变量操作 引用数据类型 另一个不受影响
例子1：

let arr3 = [1, 2, 3, 4, 5];
let arr4 = [];
//通过循环遍历 获取arr3中的所有数值 复制拷贝在arr4中
	arr3.forEach(function(){
	arr4.push(item);
})
//输出一下 arr3和arr4 
//此时 arr4与arr3 虽然数值相同但是两个数组
//是两个独立的引用数据类型 
//是两个独立的空间
console.log(arr3);  //[1, 2, 3, 4, 5];
console.log(arr4);  //[1, 2, 3, 4, 5];

//jQuery中有专门方法来实现深拷贝浅拷贝

	//$.extend()方法

	// 语法形式1: $.extend( 是否深拷贝(不写) ,  对象1,对象2,对象3...) 
	//           执行的是浅拷贝
	// 语法形式2: $.extend( 是否深拷贝(true) ,  对象1,对象2,对象3...) 
	//           执行的是深拷贝
	
	  let obj1={name1:'小明',age:18,sex:'男'};
	  let obj2={name2:'小红',age:18,sex:'女',data:{time:123}};
	  
	  
	  //没有写第一个参数true是浅拷贝
	  //$.extend(obj1,obj2); obj1和obj2到的time值都为456
	  
	  //有第一个参数true 是深拷贝
	  //深拷贝不会影响obj1中的数据
	  $.extend(true,obj1,obj2);//obj1 123  obj2 456
	  //这里因为写了true参数 所以是深拷贝不影响obj1中的数据 
	  obj2.name2='小静';  //name2变为小静
	  obj2.data.time=456;	//给obj2 data.time设置为456
	  //obj1中 小明的sex变为了女 是因为操作数据覆盖  
	  console.log(obj1);
	  console.log(obj2);

一个变量操作 引用数据类型 另一个不受影响