zoukankan      html  css  js  c++  java
  • js实现深拷贝

    1 使用对象和字符串的转换实现

    function deepClone2(obj) {
        var obj = JSON.stringify(obj),
            objClone = JSON.parse(obj);
        return objClone;
    }

    2 使用扩展运算符

    // 会深拷贝对象的一级属性,对象二级属性进行浅拷贝
    var obj = {a: 1},
        objClone = {...obj};
    
    // 会深拷贝一维数组,对数组里的数组实行浅拷贝
    var arr = [1, 2],
        arrClone = {...arr};

    3 Object.assign()

    // 当对象中只有一级属性,没有二级属性的时候,此方法为深拷贝
    // 但是对象中有对象的时候,此方法在二级属性就是浅拷贝
    var obj = {a: 1},
          objClone = Object.assign({}, obj);

    4 递归实现

    var obj = {
            a: 1,
            b: {
                c: 3
            }
        };
    function deepClone(obj) {
        var objClone = Array.isArray(obj) ? [] : {};
        if (obj && typeof obj === "object") {
            for (key in obj) {
                // for in 会循环出原型上的属性
                if (obj.hasOwnProperty(key)) {
                    if (obj[key] && typeof obj[key] === "object") {
                        objClone[key] = deepClone(obj[key]);
                    } else {
                        objClone[key] = obj[key];
                    }
                }
            }
        }
        return objClone;
    }
    console.log(deepClone(obj));   
    // {
    //     a: 1,
    //     b: {
    //         c: 3
    //     }
    // }
    console.log(deepClone(obj) === obj);   // false

    5 使用Object.create()实现

    // 对于一级属性是深拷贝,二级属性往下是浅拷贝
    function deepCopy(obj) {
      var copy = Object.create(Object.getPrototypeOf(obj));
      var propNames = Object.getOwnPropertyNames(obj);
      
      propNames.forEach(function(name) {
        var desc = Object.getOwnPropertyDescriptor(obj, name);
        Object.defineProperty(copy, name, desc);
      });
      
      return copy;
    }
    
    var obj1 = { a: 1, b: {bc: 50, dc: 100, be: {bea: 1}} };
    var obj2 = deepCopy(obj1);
    obj1.b.bc = 20;
    console.log(obj1.b.bc);   // 20
    console.log(obj2.b.bc);   // 20

    6 能拷贝自身可枚举、自身不可枚举、自身 Symbol 类型键、原型上可枚举、原型上不可枚举、原型上的 Symol 类型键,循环引用也可以拷的深拷贝函数:

    原文:https://blog.csdn.net/chentony123/article/details/81428803

    https://segmentfault.com/a/1190000018371840

  • 相关阅读:
    福大软工1816 · 第五次作业
    福大软工1816
    福大软工1816 · 第三次作业
    福大软工1816 · 第二次作业
    福大软工1816 · 第一次作业
    1/10
    福大软工 · 第七次作业
    福大软工 · 第八次作业(课堂实战)- 项目UML设计(团队)
    2018软工第六次作业
    福大软工1816 · 第五次作业
  • 原文地址:https://www.cnblogs.com/xjy20170907/p/12672852.html
Copyright © 2011-2022 走看看