别再只用JSON.stringify做深拷贝了，这些坑你要知道

更新日期: 2025-09-19阅读: 117标签: 拷贝分享

复制链接

新浪微博

QQ 好友

扫一扫分享

在JavaScript里，我们经常需要复制一个对象。很多人喜欢用JSON.parse(JSON.stringify(obj))这种方法，因为它写起来简单。但你可能不知道，这种做法其实有不少问题，处理不好会导致程序出错或者数据丢失。

这篇文章会告诉你为什么不要总用这种方法，并介绍几种更好、更安全的深拷贝方式。

JSON.stringify 做深拷贝的主要问题

看起来一行代码就能搞定深拷贝，但实际上它有很多限制。下面是一些常见的问题：

遇到循环引用会报错

如果一个对象内部自己引用自己，用这种方法就会出错。

let obj = { name: "测试对象" };
obj.self = obj; // 自己引用自己

// 这行会报错
let copy = JSON.parse(JSON.stringify(obj));

运行时会直接抛出类型错误，程序就无法继续执行了。

很多数据类型无法正确处理

有些类型的数据会在转换过程中丢失或者改变：

let original = {
  func: function() { console.log('我是函数') },
  symbol: Symbol('符号'),
  undefinedVal: undefined,
  date: new Date(),
  pattern: /正则表达式/g,
  nan: NaN,
  infinity: Infinity
};

let copy = JSON.parse(JSON.stringify(original));
console.log(copy);
// 输出结果：
// { 
//   date: "2025-04-20T08:00:00.000Z", // 日期变成字符串
//   pattern: {}, // 正则变成空对象
//   nan: null, // NaN变成null
//   infinity: null // Infinity也变成null
//   // 函数、Symbol和undefined全部不见了
// }

从输出可以看出，很多类型的数据都没有被正确保留。

会丢失原型链信息

如果你复制的是类的实例，复制后会变成普通对象，失去原来的方法：

class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    return `你好，${this.name}`;
  }
}

let original = new Person('张三');
let copy = JSON.parse(JSON.stringify(original));

console.log(original.sayHello()); // 正常输出
console.log(copy.sayHello); // undefined，方法不见了
console.log(copy instanceof Person); // false，不再是Person的实例

无法处理Map、Set等集合类型

let original = {
  set: new Set([1, 2, 3]),
  map: new Map([['key', 'value']]),
};

let copy = JSON.parse(JSON.stringify(original));
console.log(copy); // { set: {}, map: {} }，内容全部丢失

更好的深拷贝方法

既然JSON方法有这么多问题，那我们应该用什么方法呢？

使用现代浏览器自带的structuredClone

现在大多数浏览器都支持这个api：

let copy = structuredClone(original);

它的优点很明显：

支持循环引用
能正确处理Date、RegExp、Map、Set等类型
性能比JSON方法更好

但也要注意，它还是不能复制函数和dom节点，也不会保留原型链。

手动实现深拷贝函数

如果需要更精细的控制，可以自己写一个深拷贝函数：

function deepClone(obj, hash = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  
  if (hash.has(obj)) {
    return hash.get(obj);
  }
  
  let result = Array.isArray(obj) ? [] : {};
  hash.set(obj, result);
  
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      result[key] = deepClone(obj[key], hash);
    }
  }
  
  return result;
}

使用现成的工具库

像Lodash这样的库提供了可靠的深拷贝方法：

// 需要先安装lodash
let copy = _.cloneDeep(original);

总结

虽然JSON.parse(JSON.stringify(obj))写起来很方便，但它的问题实在太多，不适合在正式项目中使用。根据你的具体需求，可以选择：

简单场景用structuredClone
复杂需求用自己实现的深拷贝函数
项目中有现成工具库的话直接用库里的方法

选择合适的深拷贝方式，可以避免很多潜在的问题，让代码更加可靠。希望这些信息对你有帮助。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/12922