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

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

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

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


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

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

  1. 遇到循环引用会报错

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

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

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

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

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

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

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全部不见了
// }

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

  1. 会丢失原型链信息

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

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的实例
  1. 无法处理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方法有这么多问题,那我们应该用什么方法呢?

  1. 使用现代浏览器自带的structuredClone

现在大多数浏览器都支持这个API:

let copy = structuredClone(original);

它的优点很明显:

  • 支持循环引用

  • 能正确处理Date、RegExp、Map、Set等类型

  • 性能比JSON方法更好

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

  1. 手动实现深拷贝函数

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

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;
}
  1. 使用现成的工具库

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

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


总结

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

  • 简单场景用structuredClone

  • 复杂需求用自己实现的深拷贝函数

  • 项目中有现成工具库的话直接用库里的方法

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

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_12922