JS深浅拷贝

1. 前言

1.很早之前写了纯文本的深浅拷贝

2. 好不容易有空 改个 markdown版本的

---

2. 是什么 what

深浅拷贝理解，拷贝就是复制,js对引用类型数据的数据拷贝

浅拷贝 :由于引用类型数据是存在堆内存中，堆内存中存放的是引用类型的值，同时引用数据有会指针指向栈内存，浅拷贝的指针指向栈内存是一致的，所以一个改变另一个也会受影响。
深拷贝:是在堆内存开启新的空间存放数据。

简单理解就是：
如果拷贝产生新的数据就是深拷贝，
如果只是数据的引用，就是浅拷贝

---

3. 应用场景

1. react redux
2. table列表修改 弹出 表单

    editRow(rowData) {
      ElMessage.success("点击了 编辑")
      console.log("编辑数据:", rowData)
      this.editForm = rowData
      this.editDialog = true
    },

3. 这里不使用深拷贝的话 diaog 随便修改不进行保存也影响 界面的数据

---

4. 第三方依赖

clone-deep

---

5. 栗子

let people = {name:'yzs',age:21,sex:true}

let obj = JSON.parse(JSON.stringify(test))

obj.name = 'yqq'

people.name  输出 'yzs'

哈哈是不是 so easy But 也有弊端

1. 无法复制函数，正则
2. 原型链没了，对象就是object,所属的类没了
3. 循环引用的问题，没解决
4. 当然jQ 的 extend函数也可以实现深复制，但是我目前jQ基本不用了

---

6.浅复制代码

let people = {name:'yzs', age:28}
// 调用
let shallowObj = shallowCopy(people)
// 方法
shallowCopy = (obj)=>{
      var temp = {}
      for (const prop in obj){
         if( Object.prototype.hasOwnProperty.call(obj,prop) ){
              temp[prop] = obj[prop]
          }
    }
  return temp
}

只复制一层对象的属性,也就是说浅复制是对对象地址的复制，修改其中一个对象的属性，则另一个对象的属性也会随之改变，这就导致people.name和shallowObj.name指向同一块内存地址

影响

shallowObj.name = 'yqq'
people.name   结果也是'yqq' 而不是原来的'yzs'

---

7.深复制代码

let people = {name:'yzs', age:28}
// 调用
let shallowObj =deepCopy(people)
// 方法
deepCopy = oldObj=>{
    var newObj = newObj || {}
    for (const i in oldObj){
        if(typeof oldObj[i] ==='object'){
              if(oldObj[i] ===null){
                newObj[i] =null
              }else {
                if(oldObj[i].constructor === Array){
                newObj[i] = []
         }else {
            newObj[i] = {}
         }
    }
    deepCopy(oldObj[i],newObj[i])
}else{
    newObj[i] = oldObj[i]
   }
}
  return newObj
}

深复制会递归赋值对象所有层级，也就是说深复制会开辟新的栈，所以2个对象对象不同的地址，修改其中一个对象的属性，不会改变另一个对象的属性

不影响

shallowObj.name = 'yqq'

people.name   结果'yzs' 

---

8. 深拷贝的另类方式

1. 将需要 深拷贝的 对象 进行JSON.stringify()序列化
2. 在进行JSON.parse() 反序列化
3. 缺点: 比如对象中不能存在循环引用

---

9. 数组

扩展运算符

console.log(...[1, 2, 3])
// 1 2 3
console.log(...[1, [2, 3, 4], 5])
// 1 [2, 3, 4] 5

数组 api

1. slice()

---

10. 对象浅拷贝

扩展运算符

let outObj = {
  inObj: {a: 1, b: 2}
}
let newObj = {...outObj}
newObj.inObj.a = 2
console.log(outObj) // {inObj: {a: 2, b: 2}}

---

Object.assign()

let outObj2 = {
  inObj: {a: 1, b: 2}
}
let newObj = Object.assign({}, outObj2)
newObj.inObj.a = 2
console.log(outObj2) // {inObj: {a: 2, b: 2}}

• 都是浅拷贝

Object.assign()方法接收的第一个参数作为目标对象，后面的所有参数作为源对象。然后把所有的源对象合并到目标对象中。它会修改了一个对象，因此会触发 ES6 setter。

扩展操作符（…）使用它时，数组或对象中的每一个值都会被拷贝到一个新的数组或对象中。它不复制继承的属性或类的属性，但是它会复制ES6的 symbols 属性。

---

后记

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉