关于深拷贝和浅拷贝,这个是前端经常会问到的一个问题。下面我就来详细分析阐述一下他们的区别。
首先我们要明确的是,只有引用类型才区分深浅拷贝。值类型没有深浅拷贝之分,它是天然深拷贝。
浅拷贝的例子
var obj1 = { name: "xp", age: 20 };
var obj2 = obj1;
console.log(obj1 === obj2);
obj2.sex = "男";
console.log(obj2);
console.log(obj1);
// Object.assign() 是浅拷贝 对象展开符{...map}也是浅拷贝
var obj3 = {
name: "xp",
age: 26,
fav: [
{ id: 1, fruit: "apple" },
{ id: 2, fruit: "orange" },
],
};
var obj4 = {};
Object.assign(obj4, obj3);
obj4.fav[0].id = 3; //此时 obj3和obj4中的id都发生了变化
console.log(obj4);
console.log(obj3);
// 对象展开符
var a = {
name: "xp",
fav: [
{ id: 1, fruit: "apple" },
{ id: 2, fruit: "orange" },
],
};
var b = { age: 20 };
var c = { ...a, ...b };
c.fav[0].id = 3;
console.log(c);
console.log(a);
// 数组拷贝 map 也是浅拷贝
const a1 = [1, 2, 3, { name: "xp" }];
let b1 = a1.map(function (v) {
return v;
});
// console.log(b1);
b1[3].name = "xxp";
console.log(b1);
console.log(a1);
####深拷贝的例子
var obj5 = { name: "xp", age: 20, fav: [
{ id: 1, fruit: "apple" },
{ id: 2, fruit: "orange" },
], };
// JSON.stringify把对象转换成字符串
var str = JSON.stringify(obj5);
console.log(str);
// JSON.parse 把字符串转换成对象
var obj6 = JSON.parse(str);
obj6.fav[1].fruit = 'banane'
console.log(obj6);
console.log(obj5);
总结一下: 浅拷贝
数组(对象)中的(那些返回新数组(对象)的API基本上都是浅拷贝)
数组中的一些浅拷贝API:map,filter,slice,concat,reduce等
深拷贝
可以通过JSON.stringfy(obj)将对象转换成字符串,再用JSON.parse(str)将字符串再解析成对象的方式,进行深拷贝