普通版
function deepClone(origin, target) {
// 判断target是否传入,如果未传入则创建一个{}
let tar = target || {};
// 遍历origin对象
for (var key in origin) {
// 判断是否origin的自有属性
if (origin.hasOwnProperty(key)) {
// 如果值是对象并且不为null,递归调用
if (typeof origin[key] === 'object' && origin[key] !== null) {
// 根据值是否为数组创建初始化对象或数组
tar[key] = Array.isArray(origin[key]) ? [] : {};
// 递归调用
deepClone(origin[key], tar[key]);
} else {
// 如果是简单类型,直接复制值
tar[key] = origin[key];
}
}
}
// 返回最终拷贝完的值
return tar;
}
复制代码
这个深拷贝方法通过判断属性的值类型,实现了对 对象、数组 以及 Date、RegExp 等引用类型对象的递归拷贝,同时也考虑了拷贝基本类型值的情况,能够满足大多数场景的要求。
最终版
为什么还有最终版?
上面的案例,可以应对一般场景。
但是对于有两个对象相互拷贝的场景,会导致循环的无限递归,造成死循环!
Uncaught RangeError: Maximum call stack size exceeded
场景:
如何解决无限递归的问题?
首先我们要了解 WeakMap: WeakMap 的键名所引用的对象都是弱引用,不会被垃圾回收机制考虑,所以当对象只被WeakMap引用时,其所占用的内存会被垃圾回收。
而通过 WeakMap 记录已经拷贝过的对象,能防止循环引用导致的无限递归。
代码
实现简述:利用 WeakMap()
在属性遍历完绑定,并在每次循环时获取当前键名,如果存在则返回数据,不存在则拷贝。
function deepClone(origin, hashMap = new WeakMap()) {
// 判断是否是对象
if (origin == undefined || typeof origin !== 'object') return origin;
// 判断是否是Date/RegExp类型
if (origin instanceof Date) return new Date(origin);
if (origin instanceof RegExp) return new RegExp(origin);
// 判断是否已经克隆过此对象, 如果是直接返回
const hashKey = hashMap.get(origin);
if (hashKey) return hashKey;
// *利用原型构造器获取新的对象 如: [], {}
const target = new origin.constructor();
// 将对象存入map
hashMap.set(origin, target);
// 循环遍历当前层数据
for (let k in origin) {
// 判断当前属性是否为引用类型
if (origin.hasOwnProperty(k)) {
target[k] = deepClone(origin[k], hashMap);
}
}
return target;
}
复制代码
我们再来看一下使用最新版后的两个对象互相拷贝:
可以看到,通过使用 WeakMap 记录已经拷贝的对象,有效防止循环引用导致的栈溢出错误,是功能最完备的深拷贝实现。
总结
深拷贝可以完全拷贝一个对象,生成两个独立的且相互不影响的对象。
明白各种深拷贝实现的思路和性能差异,可以在不同场景选用最优的方案。
大厂面试题分享 面试题库
前后端面试题库 (面试必备) 推荐:★★★★★
地址:前端面试题库 web前端面试题库 VS java后端面试题库大全
文末
篇幅有限没有列举更多的前端面试题,小编把整理的前端大厂面试题PDF分享出来,一共有269页