深拷贝和浅拷贝

空白符号

已于 2022-03-29 09:15:09 修改

阅读量1.2k

点赞数

文章标签： javascript

于 2022-03-28 17:50:00 首次发布

本文链接：https://blog.csdn.net/weixin_46364184/article/details/123733725

版权

彻底搞懂深拷贝和浅拷贝

内容：

了解js的数据类型
掌握 JavaScript 基本语法

在这之前需要先搞懂简单的数据类型和复杂数据类型

1.简单数据类型 = 赋值，值的复制
Number String undefined null Boolean Symbol
2.复杂数据类型（引用类型） =赋值，内存地址复制
Function Array Object Data Math RegExp

Let obj1={a:1}
Let obj2=obj1

Let a=1
Let b=a

基础数据类型和引用类型在内存中的存储区别如下图：

在这里插入图片描述

首先深复制和浅复制只针对像 Object, Array 这样的复杂对象的。简单来说，浅复制只复制一层对象的属性，而深复制则递归复制了所有层级。

浅拷贝是按位拷贝对象，它会创建一个新对象，
在这里插入图片描述
这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值；

let obj1={
    age: '18',
    name:'小李'
}
let obj2={}
for(let key in obj1){
    obj2[key]=obj1[key]
}
obj1.name='李四'
console.log(obj2.name) //小李

改变obj1的属性，并不会影响obj2

如果属性是内存地址（引用类型），拷贝的就是内存地址，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。

即默认拷贝构造函数只是对对象进行浅拷贝复制(逐个成员依次拷贝)，即只复制对象空间而不复制资源。

浅拷贝的实现方式：

1. Object.assign()

在这里插入图片描述

Array.prototype.concat()
Array.prototype.slice()
扩展运算符

深拷贝

1. JSON.parse(JSON.stringify())

在这里插入图片描述

2. 借用jquery的extend方法。

$.extend( [deep ], target, object1 [, objectN ] )
deep表示是否深拷贝，为true为深拷贝，为false，则为浅拷贝
target Object类型目标对象，其他对象的成员属性将被附加到该对象上。
object1 objectN可选。 Object类型第一个以及第N个被合并的对象。
在这里插入图片描述