什么是拷贝?
前端中的拷贝意思一般就是复制。 首先我们得知道,电脑的储存是二进制存储,js中数据结构的类型包括基本数据类型跟引用类型,基本数据类型中存储的是数据本身的值,但引用类型中,存储的是该数据的存储地址。
简单了解深拷贝跟浅拷贝
<script>
let a= 100
let b = a
a=200
console.log("a:",a)
console.log("b:",b)
</script>
<script>
let a= [1,2,3]
let b = a
a[0] = 4
console.log("a:",a)
console.log("b:",b)
</script>
<script>
let a= [1,2,3]
let b = [...a] //...是Es6新特性的拓展运算符
a[0] = 4
console.log("a:",a)
console.log("b:",b)
</script>
例子一中,当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) :只会复制对象自身的、可枚举的属性(不包括原型链上的属性)。
- 会覆盖同名属性:如果目标对象中有与源对象同名的属性,会被源对象的属性覆盖。