1. 前言
1.很早之前写了纯文本的深浅拷贝
- 好不容易有空 改个
markdown版本的
2. 是什么 what
深浅拷贝理解，拷贝就是复制,js对引用类型数据的数据拷贝
浅拷贝 :由于引用类型数据是存在堆内存中，堆内存中存放的是引用类型的值，同时引用数据有会指针指向栈内存，浅拷贝的指针指向栈内存是一致的，所以一个改变另一个也会受影响。
深拷贝:是在堆内存开启新的空间存放数据。
简单理解就是：
如果拷贝产生新的数据就是深拷贝，
如果只是数据的引用，就是浅拷贝
3. 应用场景
- react redux
- table列表修改 弹出 表单
editRow(rowData) { ElMessage.success("点击了 编辑") console.log("编辑数据:", rowData) this.editForm = rowData this.editDialog = true },
- 这里不使用深拷贝的话
diaog随便修改不进行保存也影响 界面的数据
4. 第三方依赖
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 也有弊端
- 无法复制函数，正则
- 原型链没了，对象就是object,所属的类没了
- 循环引用的问题，没解决
- 当然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. 深拷贝的另类方式
- 将需要 深拷贝的 对象 进行
JSON.stringify()序列化- 在进行
JSON.parse()反序列化- 缺点: 比如对象中不能存在循环引用
9. 数组
扩展运算符
console.log(...[1, 2, 3]) // 1 2 3 console.log(...[1, [2, 3, 4], 5]) // 1 [2, 3, 4] 5
数组 api
- 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 属性。
