文章来源:https://juejin.im/post/5da5bc60f265da5b8d18d4d3
深拷贝
深拷贝复制变量值,对于非基本类型的变量,则递归至基本类型变量后,再复制。 深拷贝后的对象与原来的对象是完全隔离的,互不影响,对一个对象的修改并不会影响另一个对象。
浅拷贝
浅拷贝是会将对象的每个属性进行依次复制,但是当对象的属性值是引用类型时,实质复制的是其引用,当引用指向的值改变时也会跟着变化。
区别
浅拷贝和深拷贝都只针对于引用数据类型。
- 浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存;
- 深拷贝会另外创造一个一模一样的对象,跟原对象不共享内存,修改新对象不会改到原对象;
- 区别:浅拷贝只复制对象的第一层属性、深拷贝可以对对象的属性进行递归复制。
let obj = {
name: 'Yvette',
age: 18,
hobbies: ['reading', 'photography']
}
let obj1 = obj
let obj2 = Object.assign({}, obj)
let obj3 = JSON.parse(JSON.stringify(obj))
obj.name = 'Jack'
obj.hobbies.push('coding')
console.log(obj) //{ name: 'Jack', age: 18,hobbies: [ 'reading', 'photography', 'coding' ] }
console.log(obj1) //{ name: 'Jack', age: 18,hobbies: [ 'reading', 'photography', 'coding' ] }
console.log(obj2) //{ name: 'Yvette', age: 18,hobbies: [ 'reading', 'photography', 'coding' ] }
console.log(obj3) //{ name: 'Yvette', age: 18,hobbies: [ 'reading', 'photography' ] }
从以上例子可以看出,当数据为引用数据类型时
1. 直接赋值属于浅拷贝
2. Object.assign,当数据第一层为基本数据类型时,新的对象和原对象互不影响,但是如果第一层的属性值是复杂数据类型,那么新对象和原对象的属性值其指向的是同一块内存地址。
3. JSON.parse(JSON.stringify(obj))可实现深拷贝
深拷贝的实现
1. JSON.parse(JSON.stringify(obj)) 但存在一些缺陷
- 对象的属性值是函数时,无法拷贝。
- 原型链上的属性无法拷贝
- 不能正确的处理 Date,RegExp 类型的数据
- 会忽略 undefined
2. 实现一个 deepClone 函数
- 如果是基本数据类型,直接返回
- 如果是 RegExp 或者 Date 类型,返回对应类型
- 如果是复杂数据类型,递归。
- 考虑循环引用的问题
function deepClone(obj, hash = new WeakMap()) {
//递归拷贝
if (obj instanceof RegExp) return new RegExp(obj)
if (obj instanceof Date) return new Date(obj)
if (obj === null || typeof obj !== 'object') {
//如果不是复杂数据类型,直接返回
return obj
}
if (hash.has(obj)) {
return hash.get(obj)
}
/**
* 如果obj是数组,那么 obj.constructor 是 [Function: Array]
* 如果obj是对象,那么 obj.constructor 是 [Function: Object]
*/
let t = new obj.constructor()
hash.set(obj, t)
for (let key in obj) {
//递归
if (obj.hasOwnProperty(key)) {
//是否是自身的属性
t[key] = deepClone(obj[key], hash)
}
}
return t
}