浅拷贝与深拷贝、Object.assign和JSON.parse(JSON.stringify())的区别

最新推荐文章于 2023-08-24 14:50:49 发布

原创最新推荐文章于 2023-08-24 14:50:49 发布 · 590 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js #vue

vue 同时被 2 个专栏收录

8 篇文章

订阅专栏

JavaScript

3 篇文章

订阅专栏

浅拷贝: Object.assign()

深拷贝: JSON.parse(JSON.stringify())

什么是浅拷贝？

对于字符串类型，浅复制是对值的复制，对于对象来说，浅复制是对对象地址的复制，并没有开辟新的栈，也就是复制的结果是两个对象指向同一个地址，修改其中一个对象的属性，则另一个对象的属性也会改变。

什么是深拷贝？

深拷贝是开辟新的栈，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。

若对象是基础数据类型。此时 Object.assign()可实现深拷贝，和JSON.parse(JSON.stringify())一样，两者没什么区别。例如：

var aa = {
  a: 1,
  b: 1
}
var bb = Object.assign({}, aa)
bb.a = 2
console.log("aa:", aa, "bb:", bb)    --->  aa: {a: 1, b: 1}   	bb: {a: 2, b: 1 }

var aa = {
  a: 1,
  b: 1
}
var bb = JSON.parse(JSON.stringify(aa))
bb.a = 2
console.log("aa:", aa, "bb:", bb)    --->  aa: {a: 1, b: 1}   	bb: {a: 2, b: 1 }

而若是对象是复杂数据类型。那么Object.assign()只能实现浅拷贝，要实现深拷贝需使用JSON.parse(JSON.stringify())。例如：

var aa = {
  a: {
    c: 1,
    d: 1
  },
  b: 1
}
var bb = Object.assign({}, aa)
bb.a.c = 2
console.log("aa:", aa, "bb:", bb)   --->  aa: {a: {c: 2, d: 1}}, b: 1}   	bb: {a: {c: 2, d: 1}, b: 1 }

var aa = {
  a: {
    c: 1,
    d: 1
  },
  b: 1
}
var bb = JSON.parse(JSON.stringify(aa))
bb.a.c = 2
console.log("aa:", aa, "bb:", bb)   --->  aa: {a: {c: 1, d: 1}}, b: 1}   	bb: {a: {c: 2, d: 1}, b: 1 }