代码
老样子,先上完整代码
/**
* 深拷贝
* @param value
*/
function deepcopy<T>(value: T): T {
const cache: WeakMap<any, any> = new WeakMap<any, any>();
/**
* 深拷贝数组
* @param value
*/
const copyArray = (value: any[]): any[] => {
const result = [];
cache.set(value, result);
value.forEach(item => {
result.push(dfs(item));
});
return result;
};
/**
* 深拷贝集合
* @param value
*/
const copySet = (value: Set<any>): Set<any> => {
const result: Set<any> = new Set<any>();
cache.set(value, result);
value.forEach(item => {
result.add(dfs(item));
});
return result;
};
/**
* 深拷贝映射
* @param value
*/
const copyMap = (value: Map<any, any>): Map<any, any> => {
const result: Map<any, any> = new Map<any, any>();
cache.set(value, result);
value.forEach((value, key) => {
result.set(key, dfs(value));
});
return result;
};
/**
* 深拷贝对象
* @param value
*/
const copyObject = (value: any): object => {
if (value === null) {
return null;
}
const result: object = {};
cache.set(value, result);
for (const key in value) {
if (!value.hasOwnProperty(key)) {
continue;
}
result[key] = dfs(value[key]);
}
return result;
};
/**
* 深拷贝/深度优先遍历
* @param value
*/
const dfs = (value: any): any => {
if (typeof value !== "object") {
return value;
}
if (cache.has(value)) {
return cache.get(value);
}
if (Array.isArray(value)) {
return copyArray(value);
}
if (value instanceof Set) {
return copySet(value);
}
if (value instanceof Map) {
return copyMap(value);
}
return copyObject(value);
};
return dfs(value);
}
测试
使用 nodejs v20.9.0 / typescript v5.2.2 / ts-node v10.9.1 进行测试
(function testDeepCopy() {
// region 测试基本数据类型
console.log("测试基本数据类型");
const num = 10;
const str = "hello";
const bool = true;
const symbol = Symbol("symbol");
const bigint = BigInt(10);
const undefinedValue = undefined;
console.log(deepcopy(num));
console.log(deepcopy(str));
console.log(deepcopy(bool));
console.log(deepcopy(symbol));
console.log(deepcopy(bigint));
console.log(deepcopy(undefinedValue));
// endregion
// region 测试数组
console.log(" \n测试数组");
const arr1 = [1, 2, 3];
const arr2 = [{name: "Alice"}, {name: "Bob"}];
console.log(deepcopy(arr1));
console.log(deepcopy(arr2));
// endregion
// region 测试对象
console.log(" \n测试对象");
const objNull = null;
const obj1 = {name: "Alice", age: 20};
const obj2 = {nested: {prop: "value"}};
console.log(deepcopy(objNull));
console.log(deepcopy(obj1));
console.log(deepcopy(obj2));
// endregion
// region 测试集合
const set1 = new Set([1, 2, 3]);
const set2 = new Set([{name: "Alice"}, {name: "Bob"}]);
console.log(deepcopy(set1));
console.log(deepcopy(set2)); // Set(2) { { name: "Alice" }, { name: "Bob" } }
// endregion
// region 测试映射
console.log(" \n测试映射");
const map1 = new Map([[1, "one"], [2, "two"]]);
const map2 = new Map([[{name: "Alice"}, {age: 20}], [{name: "Bob"}, {age: 25}]]);
console.log(deepcopy(map1));
console.log(deepcopy(map2));
// endregion
// region 测试循环引用
console.log(" \n测试循环引用");
const obj3 = {name: "Alice"};
const obj4 = {name: "Bob"};
const obj5 = {name: "John"};
obj3["self"] = obj3;
obj3["friends"] = [obj4, obj5];
obj4["self"] = obj4;
obj4["friends"] = [obj3, obj5];
obj5["self"] = obj5;
obj5["friends"] = [obj3, obj4];
console.log(deepcopy(obj3));
console.log(deepcopy(obj4));
console.log(deepcopy(obj5));
// endregion
})();
打印结果:
测试基本数据类型
10
hello
true
Symbol(symbol)
10n
undefined
测试数组
[1,2,3]
[ { name:'Alice'}, { name:'Bob'} ]
测试对象
null
{ name:'Alice', age:20}
{ nested: { prop:'value'} }
Set(3) {1,2,3}
Set(2) { { name:'Alice'}, { name:'Bob'} }
测试映射
Map(2) {1=>'one',2=>'two'}
Map(2) {
{ name:'Alice'} => { age:20},
{ name:'Bob'} => { age:25}
}
测试循环引用
<ref *1> {
name: 'Alice',
self: [Circular *1],
friends: [
<ref *2> {
name: 'Bob',
self: [Circular *2],
friends: [Array]
},
<ref *3> {
name: 'John',
self: [Circular *3],
friends: [Array]
}
]
}
<ref *1> {
name: 'Bob',
self: [Circular *1],
friends: [
<ref *2> {
name: 'Alice',
self: [Circular *2],
friends: [Array]
},
<ref *3> {
name: 'John',
self: [Circular *3],
friends: [Array]
}
]
}
<ref *1> {
name: 'John',
self: [Circular *1],
friends: [
<ref *2> {
name: 'Alice',
self: [Circular *2],
friends: [Array]
},
<ref *3> {
name: 'Bob',
self: [Circular *3],
friends: [Array]
}
]
}
讲解
-
WeakMap
用于缓存已经访问过的对象,如果再次访问到这个对象,可以直接使用缓存的值,用于解决循环引用的问题和优化性能; -
copyArray
、copySet
、copyMap
、copyObject
中都调用了dfs
函数,而dfs
又会调用他们,直到遇到null、基本数据类型或者已经缓存过的对象时返回。如果对象中没有循环引用,那么它就是一棵树;如果存在了循环引用,它就变成了图。我们可以发现,这实际上就是图(树也可以看成没有环的图)的深度优先遍历(同义词:深度优先搜索); - 函数的返回类型和原对象的类型一致;
说明
平常开发中如果需要完整复制一个对象,最常用的方法是使用Json的序列化和反序列化,也就是JSON.parse(JSON.stringify(obj))
。
虽然这个方法很简单,但是它却有很多致命问题,比如:
- 无法拷贝函数、symbol等,值为undefined的属性也会丢失;
- 无法处理循环引用的问题;
- 无法拷贝特殊对象,比如Set、Map等;
而本文给出的深拷贝函数有以下优点:
- 可以拷贝基本数据类型、函数、Set、Map、数组、一般对象等;
- 利用弱映射
WeakMap
缓存已经访问过的对象,解决循环引用问题(使用WeakMap
而不是Map
是为了防止内存泄漏); - 拷贝返回的变量类型和传入时的变量类型一致;
当然本文的函数也有一些缺点:
- 无法拷贝原型链(也就代表着不能拷贝class,应该也没有拷贝类的需求吧);
- 只处理了Map、Set和数组三种特殊对象,如果需要拷贝Date、RegExp等可以自行在
deepcopy
函数中做相关处理; - 由于处理了循环引用的问题,效率会降低,内存占用会升高;
- 如果对象的递归层数很多,可能造成递归栈溢出,可以使用数组来模拟堆栈;
网友评论