关于深拷贝与浅拷贝的区别

目录

一、浅拷贝

二、深拷贝

三、深拷贝的实现(5种)

1. JSON.Stringify(JSON.pare(被拷贝对象))

2. for in

3. 展开运算符(...)

4.Object.assign(target,sources)

5. 递归实现

---

我们在聊起深拷贝和浅拷贝首先要知道一点就是关于JavaScript中变量存储类型

-------这里如果有小伙伴知道的话就省略此处-----

我们常见的数据类型有基本数据类型和引用数据类型两种

①、基本数据类型 ：直接存储在栈中。

②、引用数据类型 ：将对象引用的地址存储在栈中，对象中的数据存储在堆中。

为了更好理解以下用图片来展示：值传递和引用传递

--------------------------------------------------------------------

一、浅拷贝

      概念 ：浅拷贝就是拷贝的地址，我在把对象a复制给对象b的时候，改变b对象的内容,则a对象的内容也会随之改变

var obj = {
  name : "靳帅杰",
  age : 25
}
var obj1 = obj;
obj1.name = "改变靳帅杰";
//我们在改变obj1的内容obj也会改变，因为我们拷贝的是地址
console.log(obj.name) //改变靳帅杰
console.log(obj1.name) //改变靳帅杰

二、深拷贝

      概念 ：深拷贝就是拷贝对象中的值，我们在把对象a复制给对象b的时候，我们在改变对象b的内容的时候，a是不会变的

var name = "靳帅杰"
var names = name;
names = "改变靳帅杰"
console.log(name,names) //靳帅杰 ， 改变靳帅杰

----我们在拷贝对象的时候为了解决拷贝后改变数据不影响原数据的情况下，就需要用到深拷贝-----

三、深拷贝的实现(5种)

1. JSON.Stringify(JSON.pare(被拷贝对象))

var obj = {
  name :"靳帅杰",
  age:18,
}
var obj1 = JSON.parse(JSON.stringify(obj))
obj1.name = "靳帅杰修改后"
obj1.age = 22;
console.log(obj.name,obj.age) //靳帅杰 18
console.log(obj1.name,obj1.age) //靳帅杰修改后 22

2. for in

function deepCopy(obj) {
  let objs = {}
  for(let key in obj) {
    objs[key] = obj[key]
  }
  return objs
}
 
let obj = {
  name : "靳帅杰",
  age : 25
}
var obj1 = deepCopy(obj)
obj1.a = "修改后靳帅杰"
console.log(deepCopy(obj))

3. 展开运算符(...)

var  obj1={
name : "靳帅杰"，
age : 25
}
var obj2 = {...obj1}
obj2.name = 修改后靳帅杰
console.log(obj1.name);  //靳帅杰
console.log(obj2.name);  //修改后靳帅杰

4.Object.assign(target,sources)

Object.assign() 方法用于将所有值从一个或多个源对象复制到目标对象，它将返回目标对象。

target =>  是目标对象

sources =>  源对象

var  obj1={
   name : "靳帅杰",
   age : 25
};
var  obj2=Object.assign({},obj1)
obj2.name="修改后靳帅杰";
console.log(obj1.name);  //靳帅杰
console.log(obj2.name);  //修改后靳帅杰

5. 递归实现