前提
理解深拷贝和浅拷贝之前，我们先理解下js变量的存储方式。
js变量分为基础类型（Undefined、Null、Boolean、Number、String）和引用类型（array、object）。
基本类型的名字和值存储在栈内存（存储已知占用多少内存空间的值），
引用类型的名字存储在栈内存，而真正的值存储在堆内存（存储不知道具体占用多少内存的值），栈内存名字对应的值是其在堆内存的地址。
如下图：
变量存储
var a = 1 //设置一个基础类型的值，值存储在栈内存
var b = a //在栈内存中开辟一个新的内存，存储b b和a是独立的
var c = [1,2,3] //设置一个引用类型的值，栈内存存储变量名a，值存储在堆内存
var b = a //在栈内存存储变量名b，值对应的a在堆内存的值
b[0] = 2
console.log(a[0]) //2 改变b的值，a的值也改变了，除非给b在堆内存开辟一个新地址
所以深拷贝和浅拷贝是针对引用类型的
实现方法
浅拷贝方法
- 直接用“=”赋值
let a = [0,1,2],
b=a;
console.log(a===b); //true
a[0]=1;
console.log(a,b); //[1, 1, 2]，[1, 1, 2]
- 直接Object.assign方法
var obj = {
a: 1,
b: 2
}
var obj1 = Object.assign(obj);
obj1.a = 3;
console.log(obj.a) //3
- for··in只循环第一层（第一层深拷贝，其他层浅拷贝）
// 只复制第一层的浅拷贝
function simpleCopy(obj) {
var newObj = Array.isArray(obj) ? [] : {};
for (let i in obj) {
newObj = obj[i];
}
return newObj;
}
var obj = {
a: 1,
b: {
c: 2
}
}
var newObj = simpleCopy(obj);
newObj.a = 3;
newObj.b.c = 4;
console(obj.a); // 1
console(newObj.a); // 3
console(obj.b.c); // 4
console(newObj.b.c); // 4
深拷贝方法
- 通过jQuery的extend方法实现深拷贝
var array = [1,2,3,4];
var newArray = $.extend(true, [], array); // true为深拷贝
newArray[1] = 1
console.log(array) //[1, 2, 3, 4]
console.log(newArray) //[1, 1, 3, 4]
- 通过JSON对象来实现深拷贝（先转为字符，然后在转为json）
function deepClone(obj) {
var str = JSON.stringify(obj),
objClone = JSON.parse(str);
return objClone;
}
缺点： 无法对对象中的方法实现深拷贝，会显示为undefined
- 采用递归去拷贝所有层级属性
function deepClone(obj){
let objClone = Array.isArray(obj) ? [] : {};
if(obj && typeof obj === "object"){ //typeof 一个数组 结果为'object'
for(key in obj){
if(obj.hasOwnProperty(key)){
//判断ojb子元素是否为对象，如果是，递归复制
if(obj[key] && typeof obj[key] === "object"){
objClone[key] = deepClone(obj[key]);
}else{
//如果不是，简单复制
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
let a=[1,[2,3]],
b=deepClone(a);
a[0]=2;
a[1]=2;
console.log(a); //[2, 2]
console.log(b); //[1,[2,3]]
- 使用扩展运算符实现深拷贝
var obj = {a: 1, b: 2, c: 3}
var obj1 = { ...obj, b: 4 } 或 obj1 = { ...obj } obj.b = 4
console.log(obj); // {a: 1, b: 2, c: 3}
console.log(obj1); // {a: 1, b: 4, c: 3}
- 通过Object.assign赋值给一个空对象来实现深拷贝
//当对象里面的值是基本数据类型，比如String，Number，Boolean时，属于深拷贝
var obj1 = {
a: 1,
b: {
c: 2
}
}
var obj2 = Object.assign({}, obj1); // obj赋值给一个空{}
obj1.b.c = 3
console.log(obj1); //{a: 1, b: {c: 3}}
console.log(obj2); //{a: 1, b: {c: 3}}
//当对象里面的值是基本数据类型，比如String，Number，Boolean时，属于浅拷贝
var obj1 = {
a: 1,
b: 2
}
var obj2 = Object.assign({}, obj1); // obj赋值给一个空{}
obj1.b = 3
console.log(obj1); //{a: 1, b: 3}
console.log(obj2); //{a: 1, b: 2}
- 用slice实现对数组的深拷贝
//当数组里面的值是基本数据类型，比如String，Number，Boolean时，属于深拷贝
var arr1 = [1, 2, 3];
var arr2 = arr1.slice(0); //不指定end 如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素
arr2[1] = 3;
console.log(arr1); //[1, 2, 3]
console.log(arr2); //[1, 3, 3]
//当数组里面的值是引用数据类型，比如Object，Array时，属于浅拷贝
var arr1 = [1, 2, [3, 4]];
var arr2 = arr1.slice(0);
arr2[2][0] = 4;
console.log(arr1); //[1, 2, [4, 4]]
console.log(arr2); //[1, 3, [4, 4]]
网友评论