JS中如何实现深拷贝？

判断目标类型是否为引用类型(Object、Array、Map、Set)

//判断目标为何种类型的值
function verifyType(target) {
  return Object.prototype.toString.call(target).slice(8, -1);
}

//是否为引用类型
function isReferenceType(target) {
  let ReferenceTypes = ["Object", "Array", "Set", "Map"];
  return ReferenceTypes.includes(verifyType(target));
}

递归实现深拷贝

//实现深拷贝
function deepCopy(target) {
  let type = verifyType(target);
  if (type == "Array") {
  
    let arr = [];
    
    target.forEach((element) => {
      arr.push(element);
    });
    
    return arr;
  } else if (type == "Object") {
  
    let obj = {};
    
    for (let attr in target) {
      if (isReferenceType(target[attr])) {
        obj[attr] = deepCopy(target[attr]);
      } else {
        obj[attr] = target[attr];
      }
    }
    
    return obj;
  } else if (type == "Map") {
  
    let map = new Map();
    
    target.forEach((value, key) => {
      map.set(key, value);
    });
    
    return map;
  } else if (type == "Set") {
  
    let set = new Set();
    
    target.forEach((value) => {
      set.add(value);
    });
    
    return set;
  }
  return target;
}

测试用例

对象的深拷贝

let deepObj = {
  info: {
    self: {
      age: 12,
      sex: 1,
      name: "cty",
    },
    family: {
      sister: {
        name: "clj",
        age: 18,
        sex: 0,
      },
      father: {
        name: "csw",
        age: 18,
        sex: 1,
      },
      mother: {
        name: "qrh",
        age: 18,
        sex: 0,
      },
      grandMother: {
        name: "lyx",
        age: 18,
        sex: 0,
      },
    },
  },
};

let o1 = deepCopy(deepObj);

o1.info.family.sister.age = 10;

查看结果

console.log(
  deepObj.info.family.sister,
  o1.info.family.sister,
  o1.info.family.sister == deepObj.info.family.sister
);

其他引用类型(Array、Map、Set)的深拷贝

let arr1 = [1, 2, 3, 4, 5, 6, 7],
  arr2 = deepCopy(arr1);
arr2[0] = 0;
console.log(arr1, arr2);

let map1 = new Map([["age", 12]]),
map2 = deepCopy(map1);
map2.set("age", 20);
console.log(map1, map2);

let set1 = new Set(arr1),
set2 = deepCopy(set1);
set2.add(8);
console.log(set1, set2);

结果