一、JavaScript 浅拷贝和深拷贝
注意：浅拷贝和深拷贝只是针对于多层引用类型数据说的，其他类型数据不涉及深浅拷贝
比如：原有一个变量 a 的值是多层引用类型数据，要求新创建的变量 b 的值与 a 的值相同
方案一 普通拷贝：以赋值的方式实现拷贝 const b = a，但是 a 和 b 任意层的数据发生变更都会相互影响
方案二 浅拷贝：只有当 a 和 b 最外层数据发生变更时不相互影响，内层数据仍相互影响
方案三 深拷贝：a 和 b 每一层发生变更都不相互影响，a 和 b 是两个独立的数据
二、普通拷贝（任意层相互影响）
使用场景：不在意新值和原始值在数据变更时相互影响
- 通过变量赋值的方式实现 数组和对象 的普通拷贝
发现：在新值任意层变更后，原始值的每一层数据都会受到同步影响
// 数组拷贝
let a = [1, 2, 3, { children: 100 }];
let b = a;
b[0] = 1000;
b[3].children = 999;
console.log(a); // 结果：[1000,2,3,{children: 999}]
// 对象拷贝
let c = { username: "Alias", password: "123456", userinfo: { gender: "女" } };
let d = c;
d.username = "Ann";
d.userinfo.gender = "男";
console.log(c); // {username: "Ann",password: "123456",userinfo: {gender: "男"}}
三、浅拷贝（只有表层不相互影响）
浅拷贝只是拷贝了引用类型数据的最外层的基础类型数据和引用类型数据的地址，所以无法解决深层次数据变更时的相互影响问题（可用深拷贝解决）
使用场景：不希望新值和原始值在数据变更时相互影响，且原始值是单层引用类型数据（针对只有一层的引用类型数据使用浅拷贝就够用了）
1. 自定义浅拷贝函数实现 数组和对象 的浅拷贝
发现：在新值任意层变更后，原始值的最外层不会受到影响，但原始值的内层仍然同步影响
function shallowClone(target) {
if (typeof target === "object" && target !== null) {
const result = Array.isArray(target) ? [] : {};
for (let prop in target) {
if (target.hasOwnProperty(prop)) {
result[prop] = target[prop];
}
}
return result;
} else {
return target;
}
}
// 数组浅拷贝
let a = [1, 2, 3, { children: 100 }];
let b = shallowClone(a);
b[0] = 1000;
b[3].children = 999;
console.log(a); // 结果：[1,2,3,{children: 999}]
// 对象浅拷贝
let c = {
username: "Alias",
password: "123456",
userinfo: { gender: "女" },
};
let d = shallowClone(c);
d.username = "Ann";
d.userinfo.gender = "男";
console.log(c); // {username: "Alias",password: "123456",userinfo: {gender: "男"}}
2. ... 拓展运算符 的方式实现 数组和对象 的浅拷贝
发现：使用... 拓展运算符创建的新值也属于浅拷贝
// 数组浅拷贝
let a = [1, 2, 3, { children: 100 }];
let b = [...a];
b[0] = 1000;
b[3].children = 999;
console.log(a); // 结果：[1,2,3,{children: 999}]
// 对象浅拷贝
let c = {
username: "Alias",
password: "123456",
userinfo: { gender: "女" },
};
let d = { ...c };
d.username = "Ann";
d.userinfo.gender = "男";
console.log(c); // {username: "Alias",password: "123456",userinfo: {gender: "男"}}
3. 使用数组的 slice、concat、filter、map方法实现 数组 的浅拷贝
- slice
// 数组浅拷贝
let a = [1, 2, 3, { children: 100 }];
let b = a.slice();
b[0] = 1000;
b[3].children = 999;
console.log(a); // 结果：[1,2,3,{children: 999}]
- concat
// 数组浅拷贝
let a = [1, 2, 3, { children: 100 }];
let b = a.concat();
b[0] = 1000;
b[3].children = 999;
console.log(a); // 结果：[1,2,3,{children: 999}]
- filter
// 数组浅拷贝
let a = [1, 2, 3, { children: 100 }];
let b = a.filter((item) => item);
b[0] = 1000;
b[3].children = 999;
console.log(a); // 结果：[1,2,3,{children: 999}]
- map
// 数组浅拷贝
let a = [1, 2, 3, { children: 100 }];
let b = a.map((item) => item);
b[0] = 1000;
b[3].children = 999;
console.log(a); // 结果：[1,2,3,{children: 999}]
4. 使用对象的 Object.assign() 方法实现 对象 浅拷贝
// 对象浅拷贝
let c = {
username: "Alias",
password: "123456",
userinfo: { gender: "女" },
};
let d = Object.assign({}, c);
d.username = "Ann";
d.userinfo.gender = "男";
console.log(c); // {username: "Alias",password: "123456",userinfo: {gender: "男"}}
四、深拷贝（任意层都不相互影响）
深拷贝是创建了新的空间存储多层引用类型数据，新值与原始值是完全独立的，任意层都互不影响
使用场景：不希望新值和原始值在数据变更时相互影响，且原始值是多层引用类型数据
1. 自定义深拷贝函数实现 数组和对象 的深拷贝
实际上就是递归调用浅拷贝函数，发现：在新值任意层变更后，原始值任意层不受影响
function deepClone(target) {
if (typeof target === "object" && target !== null) {
const result = Array.isArray(target) ? [] : {};
for (let prop in target) {
if (target.hasOwnProperty(prop)) {
result[prop] = deepClone(target[prop]);
}
}
return result;
} else {
return target;
}
}
// 数组深拷贝
let a = [1, 2, 3, { children: 100 }];
let b = deepClone(a);
b[0] = 1000;
b[3].children = 999;
console.log(a); // 结果：[1,2,3,{children: 100}]
// 对象深拷贝
let c = {
username: "Alias",
password: "123456",
userinfo: { gender: "女" },
};
let d = deepClone(c);
d.username = "Ann";
d.userinfo.gender = "男";
console.log(c); // {username: "Alias",password: "123456",userinfo: {gender: "女"}}
2. JSON.parse(JSON.stringify()实现 数组和对象 的深拷贝
此方式实现深拷贝对于简单类型、数组、常规对象等数据是没问题的，也适用于绝大部分应用场景，但是，此方式无法拷贝原始值中含有：函数、RegExp、Date、Set、Map、undefined、symbol 等类型的数据
// 数组深拷贝
let a = [1, 2, 3, { children: 100 }];
let b = JSON.parse(JSON.stringify(a));
b[0] = 1000;
b[3].children = 999;
console.log(a); // 结果：[1,2,3,{children: 100}]
// 对象深拷贝
let c = {
username: "Alias",
password: "123456",
userinfo: { gender: "女" },
};
let d = JSON.parse(JSON.stringify(c));
d.username = "Ann";
d.userinfo.gender = "男";
console.log(c); // {username: "Alias",password: "123456",userinfo: {gender: "女"}}
