深拷贝与浅拷贝的理解
简单来说,深拷贝主要是将另一个对象的属性值拷贝过来之后,另一个对象的属性值并不受到影响,因为此时它自己在堆中开辟了自己的内存区域,不受外界干扰。
浅拷贝主要拷贝的是对象的引用值,当改变对象的值,另一个对象的值也会发生变化。
深拷贝的代码实现
方法一:for循环拷贝直接赋值法
代码实现如下
<script>
function deepCopy(obj1) {
var obj2 = Array.isArray(obj1) ? [] : {};
for (let i in obj1) {
obj2[i] = obj1[i];
}
return obj2;
}
var obj1 = {
a: 1,
b: 2,
c: {
d: 3
}
}
var obj2 = deepCopy(obj1);
obj2.a = 3;
obj2.c.d = 4;
alert(obj1.a); // 1
alert(obj2.a); // 3
alert(obj1.c.d); // 4
alert(obj2.c.d); // 4
</script>
方法二:Object.assign
代码实现如下
<script>
const info = {
name: "kobe",
age: 18,
friend: {name: "james"}
};
const obj = Object.assign({}, info);
const obj.friend.name = "lili"
console.log(obj.name);// kobe
console.log(obj.friend.name);// lili 这里是浅拷贝
</script>
方法三:es6的扩展运算符"..."
代码实现如下
<script>
var a=[1,2,[3,4]]
var b=[...a];
b[0]=5;
b[2][0]=6
console.log(b[0]);//5
console.log(a[0])//1
console.log(b[2][0]);//6
console.log(a[2][0])//6
</script>
方法四:JSON.parse和JSON.stringify
代码实现如下:
<script>
const info = {name: "kobe", age: 18, friend: {name: "kobe"}};
const obj = JSON.parse(JSON.stringify(info));
info.friend.name = "james";
console.log(obj.friend.name);//james 这里是浅拷贝
console.log(obj.name);//kobe
</script>