关于深拷贝和浅拷贝的个人理解
关于深拷贝和浅拷贝的个人理解
一、深拷贝和浅拷贝区别
如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。
示例：
let obj = {
name: "hahah",
age: 18,
sex: "男",
}
// 复杂数据类型 赋值相当于是 赋引用地址
const newObj = obj;
// 修改newObj其中一个值 , 另一个obj也发生改变
newObj.name = "hahahahahahah";
console.log(obj, newObj);
输出结果:两个复杂数据类型的 name 值全部改变 ，复杂数据类型 = 赋值只是 引用地址的传递 ，指向的还是相同的引用。
简单的第一层浅拷贝：
let obj = {
name: "lili",
age: 18,
sex: "男",
arr: [1, "2", "3"],
obj: {
name: "hahaha",
sex: "女",
}
};
// 方法 一
// let newObj = Object.assign({}, obj);
// 方法 二
let newObj = { ...obj };
// 再次改变时就是 改变不一样的数据
newObj.name = "hahaha";
newObj.obj.sex = "男";
newObj.arr[1] = 10;
console.log(obj, newObj);
输出结果：可以看到第一层的 name 没有互相影响 ，但是更深层次的 arr 数组 和 obj 对象 还是发生了相同改变，这还是一个浅拷贝。我们可以使用很多方式在js中复制数据，比如 扩展运算符...,Object.assign, Object.freeze,slice, concat, map,filter, reduce等方式进行复制，
这里可以得出一个结论：浅拷贝，就是只拷贝第一层数据，更深层的数据还是同一个引用。
二、简单数据类型（基本数据类型）
如果是基本数据类型，名字和值都会储存在栈内存中
简单数据类型可以随意赋值都不会相互影响。
三、复杂数据类型（引用数据类型）
复杂数据类型的存储方法：存储空间分为堆空间 和 栈空间 ，复杂数据类型的值存在于 堆空间中 ，而名（obj）则存在于栈空间中 ，堆空间返回一个引用地址给 名 ，名根据引用地址去访问 栈空间中的值。
图示：
当b=a进行拷贝时，其实复制的是a的引用地址，而并非堆里面的值。
此时 a 和 b 指向的是 堆空间的同一个地址。而当我们a[0]=1时进行数组修改时，由于a与b指向的是同一个地址，所以自然b也受了影响，这就是所谓的浅拷贝了。
顺着往下想可以得到这么一个结论：在堆内存中也开辟一个新的内存专门为b存放值，就像基本类型那样，岂不就达到深拷贝的效果了 。
四、实现深拷贝的方法
1、for in 循环实现深拷贝
let obj = {
name: "hahaha",
age: 18,
objChild: {
sex: "男",
addres: "深圳",
arr: [1, 2, 3, "10", "12", { aaa: "aaa", bbb: "bbb" }],
},
func: function () {
console.log("我是一个函数");
}
}
function simpleCopy(obj) {
// 判断 obj 为数组还是对象
let newObj = Array.isArray(obj) ? [] : {}
// 遍历该对象
for (let i in obj) {
// 判断 该对象是否 真的包含 i 这个键
if (obj.hasOwnProperty(i)) {
// 判断 obj[i] 是否为 对象或者数组
if (obj[i] && (typeof obj[i]) === "object") {
// 是对象递归再次执行
newObj[i] = simpleCopy(obj[i]);
} else {
// 不是直接简单赋值
newObj[i] = obj[i];
}
}
}
return newObj;
}
let newObj = simpleCopy(obj);
newObj.name = "ccccc";
newObj.objChild.sex = "女";
newObj.objChild.arr[5].aaa = "小帅";
newObj.func = () => {
console.log("hahahahahahah");
}
obj.func(); // 我是一个函数
newObj.func(); // hahahahahahah
console.log(obj);
console.log(newObj);
console.log(newObj === obj); // false
输出结果：可以看到拷贝后的修改并没有影响到原先 对象 ，新的对象的引用地址已经改变，与原先对象属于两个不同对象，此时 console.log(newObj === obj); // false
2、JSON.stringfiy和JSON.parse方法实现深拷贝
let obj = {
name: "hahaha",
age: 18,
objChild: {
sex: "男",
addres: "深圳",
arr: [1, 2, 3, "10", "12", { aaa: "aaa", bbb: "bbb" }],
func: function () {
console.log("我是一个函数");
}
},
}
function simpleCopy(obj) {
let objClone = JSON.parse(JSON.stringify(obj));
return objClone;
}
let newObj = simpleCopy(obj);
newObj.name = "ccccc";
newObj.objChild.sex = "女";
newObj.objChild.arr[5].aaa = "小帅";
newObj.func = () => {
console.log("hahahahahahah");
}
console.log(obj);
console.log(newObj);
console.log(newObj === obj); // false
obj.objChild.func(); // 我是一个函数
newObj.objChild.func(); // 报错
输出结果：
**缺点： 无法实现对对象中方法的深拷贝，会显示为undefined **
3、通过jQuery的extend方法实现深拷贝
let newObj = $.extend(true, {}, obj); // true为深拷贝，false为浅拷贝
4、lodash函数库实现深拷贝
let result = _.cloneDeep(test)
官网截图:
5、Reflect法（与 for in 遍历类似）
// 代理法
function deepClone(obj) {
// 判断是否为一个对象
if (!isObject(obj)) {
throw new Error('obj 不是一个对象！')
}
let isArray = Array.isArray(obj)
let cloneObj = isArray ? [...obj] : { ...obj }
// 静态方法 Reflect.ownKeys() 返回一个由目标对象自身的属性键组成的数组。
Reflect.ownKeys(cloneObj).forEach(key => {
cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
})
return cloneObj
}
6、手动实现深拷贝
let obj1 = {
a: 1,
b: 2
}
let obj2 = {
a: obj1.a,
b: obj1.b
}
obj2.a = 3;
alert(obj1.a); // 1
alert(obj2.a); // 3
7、Object.assign来实现深拷贝
// 只适用于只有一层复杂数据类型
var obj = {
a: 1,
b: 2
}
var obj1 = Object.assign({}, obj); // obj赋值给一个空{}
obj1.a = 3;
console.log(obj.a)；// 1
8、数组方法slice实现对数组的深拷贝
// 当数组里面的值是基本数据类型，比如String，Number，Boolean时，属于深拷贝
// 当数组里面的值是引用数据类型，比如Object，Array时，属于浅拷贝
var arr1 = ["1","2","3"];
var arr2 = arr1.slice(0);
arr2[1] = "9";
console.log("数组的原始值：" + arr1 );
console.log("数组的新值：" + arr2 );
9、数组方法concat实现对数组的深拷贝
// 当数组里面的值是基本数据类型，比如String，Number，Boolean时，属于深拷贝
var arr1 = ["1","2","3"];
var arr2 = arr1.concat();
arr2[1] = "9";
console.log("数组的原始值：" + arr1 );
console.log("数组的新值：" + arr2 );
// 当数组里面的值是引用数据类型，比如Object，Array时，属于浅拷贝
var arr1 = [{a:1},{b:2},{c:3}];
var arr2 = arr1.concat();
arr2[0].a = "9";
console.log("数组的原始值：" + arr1[0].a ); // 数组的原始值：9
console.log("数组的新值：" + arr2[0].a ); // 数组的新值：9
10、使用扩展运算符实现深拷贝
// 当value是基本数据类型，比如String，Number，Boolean时，是可以使用拓展运算符进行深拷贝的
// 当value是引用类型的值，比如Object，Array，引用类型进行深拷贝也只是拷贝了引用地址，所以属于浅拷贝
var car = {brand: "BMW", price: "380000", length: "5米"}
var car1 = { ...car, price: "500000" }
console.log(car1); // { brand: "BMW", price: "500000", length: "5米" }
console.log(car); // { brand: "BMW", price: "380000", length: "5米" }
11、Object.create()实现深拷贝
function deepClone(initalObj, finalObj) {
var obj = finalObj || {};
for (var i in initalObj) {
var prop = initalObj[i]; // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
if(prop === obj) {
continue;
}
if (typeof prop === 'object') {
obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
} else {
obj[i] = prop;
}
}
return obj;
}
