JSON方法实现深拷贝存在的问题

现在的前端面试中，深拷贝出现的频率极高。常规的问题中，可能首先问你，什么是深拷贝，实现深拷贝的方式都有哪些，你可能会答出几点，比如通过JSON对象提供的JSON.strinfy和JSON.parse来实现，因为这种实现方式异常简单，一行代码即可，心里美滋滋，你让我手写我丝毫不慌。那么，面试官如果反手问一句，通过JSON提供的方法实现深拷贝会不会存在哪些问题？你是否能答出满意的结果呢。

什么是深拷贝和浅拷贝

对于不了解深拷贝的同学，我们首先介绍一下JavaScript中深拷贝和浅拷贝的概念，再讨论实现方式以及其中存在的问题。

公众号：Code程序人生，个人网站：https://creatorblog.cn

在JavaScript中，我们经常需要对对象或数组进行复制，以便在不影响原数据的情况下进行操作。这时候，我们就需要区分深拷贝和浅拷贝的概念。

浅拷贝：只复制对象或数组的第一层属性，如果属性的值是引用类型，那么复制的是引用地址，而不是真正的值。这样，修改复制后的对象或数组，可能会影响到原对象或数组。
深拷贝：完全复制对象或数组的所有层级属性，如果属性的值是引用类型，那么递归复制其内部的属性，直到所有的值都是基本类型。这样，修改复制后的对象或数组，不会影响到原对象或数组。

举个例子，假设我们有一个对象obj，它的结构如下：

js 复制代码

let obj = {
  name: "Tom",
  age: 18,
  hobbies: ["basketball", "football"],
  friend: {
    name: "Jerry",
    age: 17
  }
};

如果我们使用浅拷贝的方法，比如Object.assign或扩展运算符，来复制obj，得到一个新的对象clone，那么clone的结构如下：

js 复制代码

let clone = Object.assign({}, obj); // 或者 let clone = {...obj};

clone的name和age属性是基本类型，所以复制的是真正的值，而hobbies和friend属性是引用类型，所以复制的是引用地址，指向原对象的属性。这样，如果我们修改clone的hobbies或friend属性，就会影响到obj的对应属性，比如：

js 复制代码

clone.hobbies.push("tennis"); // 修改clone的hobbies属性
console.log(obj.hobbies); // ["basketball", "football", "tennis"]，obj的hobbies属性也被修改了

如果我们使用深拷贝的方法，比如JSON.parse(JSON.stringify(obj))，来复制obj，得到一个新的对象clone，那么clone的结构如下：

js 复制代码

let clone = JSON.parse(JSON.stringify(obj));

clone的所有属性都是基本类型，或者是新创建的引用类型，与原对象没有任何关联。这样，如果我们修改clone的任何属性，都不会影响到obj的对应属性，比如：

js 复制代码

clone.friend.name = "Bob"; // 修改clone的friend属性
console.log(obj.friend.name); // "Jerry"，obj的friend属性没有被修改

为什么使用JSON方法实现深拷贝

使用JSON.parse(JSON.stringify(obj))实现深拷贝，是一种非常简单而又有效的方法。

它的原理是利用JSON.stringify将对象或数组序列化为一个JSON字符串，然后利用JSON.parse将字符串解析为一个新的对象或数组，从而实现深拷贝。

这种方法的优点是：

代码简洁，一行就能搞定
不需要考虑对象或数组的层级结构，可以自动处理嵌套的情况
不需要考虑对象或数组的属性名，可以自动复制所有的属性