js深拷贝和浅拷贝

最新推荐文章于 2025-05-30 01:15:00 发布

原创最新推荐文章于 2025-05-30 01:15:00 发布 · 719 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #深拷贝 #浅拷贝

JavaScript[0] 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了JavaScript中对象的浅拷贝和深拷贝概念及其实现方式。通过示例说明了浅拷贝和深拷贝的区别，并提供了几种常用的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单的拷贝

var obj1 = {a:10,b:20}
var obj2 = obj1
obj2.a = 0
console.log(obj1)//得到0，obj1的a也被改变

这是因为浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存，修改新对象也就相当于修改原对象。

一.浅拷贝的实现

1.遍历赋值

function simpleClone(data){
var obj = {};    
for ( var i in data) {
    obj[i] = data[i];
}    
return obj;
}
var obj1 = {a:10,b:{c:20}}
var obj2 = simpleClone(obj1)
obj2.a = 0
console.log(obj1)//10
obj2.b.c = 0
console.log(obj1.b.c)//0
//虽然第一层没有被修改，但是第二次还是指向原来的对象

2.Object.assign

var obj1 = {a:10,b:{c:20}}
var obj2 = Object.assign({}, obj1)

3.es6扩展运算符

var obj1 = {a:10,b:{c:20}}
var obj2 = {...obj1}

二.深拷贝的实现

1.转json字符串

var obj1 = {a:10,b:{c:20}}
JSON.parse(JSON.stringify(obj1));

这是最简单直接的方法，对象转成json字符串就断了与原对象的关系，但是这方法也有明显的问题，就是JSON.parse()方法会丢失函数、正则等
var1 = {fn:function(){}}，转json字符串之后fn就丢了

2.递归赋值

function deepClone(obj) {
  // 如果传递的是null 那就不处理
  // 函数没有引用关系
  if (typeof obj !== 'object') return obj;
  if (obj == null) return null;
  // 处理日期和正则
  if (obj instanceof RegExp) return new RegExp(obj);
  if (obj instanceof Date) return new Date(obj);
  let instance = new obj.constructor(); // 看当前实例的constructor
  // 实现深拷贝
  for (let key in obj) {
    instance[key] = deepClone(obj[key])
  }
  return instance;
}
// 函数不需要重新拷贝
let obj = { a: { a: 1 },fn:function(){} }
let newObj = deepClone(obj);
obj.a.a = 2;
console.log(newObj);