美文网首页让前端飞TypeScript基础
【TS】写一个深拷贝函数(深度优先遍历)

【TS】写一个深拷贝函数(深度优先遍历)

作者: 来一斤BUG | 来源:发表于2023-11-20 11:47 被阅读0次

代码

老样子,先上完整代码

/**
 * 深拷贝
 * @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用于缓存已经访问过的对象,如果再次访问到这个对象,可以直接使用缓存的值,用于解决循环引用的问题和优化性能;
  • copyArraycopySetcopyMapcopyObject中都调用了dfs函数,而dfs又会调用他们,直到遇到null、基本数据类型或者已经缓存过的对象时返回。如果对象中没有循环引用,那么它就是一棵;如果存在了循环引用,它就变成了。我们可以发现,这实际上就是图(树也可以看成没有环的图)的深度优先遍历(同义词:深度优先搜索)
  • 函数的返回类型和原对象的类型一致;

说明

平常开发中如果需要完整复制一个对象,最常用的方法是使用Json的序列化和反序列化,也就是JSON.parse(JSON.stringify(obj))
虽然这个方法很简单,但是它却有很多致命问题,比如:

  • 无法拷贝函数、symbol等,值为undefined的属性也会丢失;
  • 无法处理循环引用的问题;
  • 无法拷贝特殊对象,比如Set、Map等;

而本文给出的深拷贝函数有以下优点

  • 可以拷贝基本数据类型、函数、Set、Map、数组、一般对象等;
  • 利用弱映射WeakMap缓存已经访问过的对象,解决循环引用问题(使用WeakMap而不是Map是为了防止内存泄漏);
  • 拷贝返回的变量类型和传入时的变量类型一致;

当然本文的函数也有一些缺点

  • 无法拷贝原型链(也就代表着不能拷贝class,应该也没有拷贝类的需求吧);
  • 只处理了Map、Set和数组三种特殊对象,如果需要拷贝Date、RegExp等可以自行在deepcopy函数中做相关处理;
  • 由于处理了循环引用的问题,效率会降低,内存占用会升高;
  • 如果对象的递归层数很多,可能造成递归栈溢出,可以使用数组来模拟堆栈;

相关文章

网友评论

    本文标题:【TS】写一个深拷贝函数(深度优先遍历)

    本文链接:https://www.haomeiwen.com/subject/qphvwdtx.html