浅拷贝和深拷贝

什么是深拷贝？什么又是浅拷贝？

深拷贝和浅拷贝只针对像 Object、Array 这样的复杂对象，假设B复制了A，当修改B时，看A是否会发生变化，如果A变了，说明是浅拷贝；如果A没变，那就是深拷贝

浅拷贝

let a= [0,1,2,3],b=a;
console.log(a === b); // true
console.log(a, b) // [0, 1, 2, 3]  [0, 1, 2, 3]


Vue中常用的浅拷贝方法包括 ​Object.assign()​ 和展开运算符(​...​)。一级深拷贝、二级浅拷贝
// 缺陷: 可以拷贝函数和正则，不能拷贝二级以下
const obj1 = { name: "Alice", age: 20 };
const obj2 = Object.assign({}, obj1);
obj2.name = "Bob";
console.log(obj1); // 输出：{ name: "Alice", age: 20 }
console.log(obj2); // 输出：{ name: "Bob", age: 20 }

深拷贝

// 对于引用类型，比如数组或者类对象，深拷贝会新建一个对象空间，然后拷贝里面的内容，所以它们指向了不同的内存空间。改变其中一个，不会对另外一个也产生影响。
var obj = {
    a:"AAA"
}
var obj2 = {} // 创建新的对象
obj2 = obj
obj2.a = "BBB"
console.log("obj",obj) //{name: "AAA"}
console.log("obj2",obj2) //{name: "BBB"}


// 重要，常用
// 缺陷:如果对象有时间类型的数据,正则表达式类型的数据,该拷贝方式会存在问题(不能拷贝)
JSON.parse(JSON.stringify(obj)) //我们一般用来深拷贝



// 常用，安装lodash库
npm install lodash
// 导入lodash库中的cloneDeep函数
import cloneDeep from 'lodash/cloneDeep';
// 原始对象
const obj1 = { name: "Alice", hobbies: ["reading", "running"] };
// 使用lodash的cloneDeep进行深拷贝
const obj2 = cloneDeep(obj1);
// 修改拷贝后的对象
obj2.name = "Bob";
obj2.hobbies.push("coding");
console.log(obj1); // 输出：{ name: "Alice", hobbies: ["reading", "running"] }
console.log(obj2); // 输出：{ name: "Bob", hobbies: ["reading", "running", "coding"] }