关于深拷贝、浅拷贝的简单理解

53 阅读2分钟

什么是拷贝?

前端中的拷贝意思一般就是复制。 首先我们得知道,电脑的储存是二进制存储,js中数据结构的类型包括基本数据类型跟引用类型,基本数据类型中存储的是数据本身的值,但引用类型中,存储的是该数据的存储地址。

简单了解深拷贝跟浅拷贝

<script>
let a= 100
let b = a
a=200
console.log("a:",a)
console.log("b:",b)
</script>

image.png

<script>
let a= [1,2,3]
let b = a
a[0] = 4
console.log("a:",a)
console.log("b:",b)
</script>

image.png

<script>
let a= [1,2,3]
let b = [...a]  //...是Es6新特性的拓展运算符
a[0] = 4
console.log("a:",a)
console.log("b:",b)
</script>

image.png

例子一中,当a跟b都是基本数据类型时,想把a复制给b,a变b不变,所以可以得出基本数据类型的复制只能复制当时的值,复制完成后,a的变化不会引起b的变化。

例子二中,但是当a跟b都是引用数据类型,发现a变b也变,因为b复制的其实是a的数据值的存储地址,也就是说a跟b保存的是同一个存储地址。这就是说的浅拷贝。浅拷贝的缺点就是,数据不安全,数据相互干扰

例子三中,当我们想避免干扰时,可以给b重新开辟一个新空间,把a的值复制给b,而不是把a的储存地址也给b,这样子就简单开辟了一个深拷贝。

其他实现浅拷贝的方法

Object.assign() 是 JavaScript 中的一个静态方法,用于将一个或多个源对象(source objects)的可枚举属性复制到目标对象(target object)中,并返回目标对象。

Object.assign(target, ...sources)

-  // `target`:目标对象(会被修改)。
-  // `sources`:一个或多个源对象(只读)。
-  // 返回值:返回目标对象(target)。

特点:

  • 浅拷贝(Shallow Copy) :只复制对象的第一层属性,如果属性值是对象,则复制引用地址(不是深拷贝)。
  • 可枚举属性(enumerable) :只会复制对象自身的、可枚举的属性(不包括原型链上的属性)。
  • 会覆盖同名属性:如果目标对象中有与源对象同名的属性,会被源对象的属性覆盖。