深拷贝几种方法

最新推荐文章于 2025-06-15 15:36:51 发布

转载最新推荐文章于 2025-06-15 15:36:51 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://blog.csdn.net/qq_41080490/article/details/82493394

文章标签：

#javascript #node.js #vue.js

#深拷贝指的是：将原对象的各个属性逐个复制出去，而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上。并开辟了一块新的内存地址来存放复制的对象。

当对对象a进行深拷贝给对象b后，之后无论是对a操作还是对b操作，都是指改变自己的内容。实现深拷贝的方法有很多种，如下：

#1、JSON.stringify/parse的方法

下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
let arr1 = [1,2,3,4];
let arr2 = JSON.parse(JSON.stringify(arr1));
arr2.push(5);
console.log(arr1); //[1, 2, 3, 4]
console.log(arr2); //[1, 2, 3, 4, 5]

const obj1 = {a:'a',b:'b'};
const obj2 = JSON.parse(JSON.stringify(obj1));

0bj2.a = 'aa';

console.log(0bj1); // {a:'a',b:'b'};
console.log(0bj2); // {a:'aa',b:'b'};

对于简单的对象使用该方法是可以正常进行深拷贝的,但是如果对象中含有function则会出现问题
下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
const obj = {
  name:'zhangsan',
  fn:function(){
    console.log('Hello World');
  }
}
console.log(obj); // {name: "zhangsan", fn: ƒ}
const obj2 = JSON.parse(JSON.stringify(obj));
console.log(obj2); // {name: "zhangsan"}

#JSON.stringify/parse实现深拷贝的时候，需要求目标对象（非 undefined，function）

#2、使用递归方法

使用递归方法，就是对每一层的数据都实现一次创建对象->对象赋值的操作
下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
function deepClone(item){
  const target = item.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象
  for(let keys in item){ // 遍历目标
    if(item.hasOwnProperty(keys)){
      if(item[keys] && typeof item[keys] === 'object'){ // 如果值是对象，就递归一下
        target[keys] = item[keys].constructor === Array ? [] : {};
        target[keys] = deepClone(item[keys]);
      }else{ // 如果不是，就直接赋值
        target[keys] = item[keys];
      }
    }
  }
  return target;
}

const obj1 = {a:'a',b:'b'};
const obj2 = deepClone(obj1);

obj2.a = 'aa';

console.log(obj1); // {a:'a',b:'b'};
console.log(obj2); // {a:'aa',b:'b'};

const obj3 = {
  name:'zhangsan',
  fn:function(){
    console.log('Hello World');
  }
}
console.log(obj3); // {name: "zhangsan", fn: ƒ}
const obj4 = deepClone(obj3);
console.log(obj4); // {name: "zhangsan", fn: ƒ}

改函数可以深拷贝数组、对象、以及带函数的对象。
————————————————
版权声明：本文为CSDN博主「鱼丸粗面不要香菜」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41080490/article/details/82493394