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

posted @ 2020-04-10 13:15  seeBetter  阅读(222)  评论(0编辑  收藏  举报