JavaScript深浅拷贝

在 JavaScript 中，深浅拷贝都是对对象或数组进行复制，以便在对原始对象进行更改时不会影响到已复制的对象。浅拷贝只复制对象的一层，而深拷贝会复制整个对象的所有层次。

• 浅拷贝：重新在堆中创建内存，拷贝前后对象的基本数据类型互不影响，但拷贝前后对象的引用类型因共享同一块内存，会相互影响。
• 深拷贝：重新在堆中创建内存，对象中的子元素进行递归拷贝，拷贝前后的两个对象进行修改值时互不影响。

 使用场景

1. 表单数据处理

在前端开发中，表单处理是一个非常常见的场景。当用户在表单中输入数据时，我们需要将这些数据保存到一个对象中，然后将对象发送到服务器。但是，由于表单中可能包含嵌套的对象和数组，因此我们需要使用深拷贝来复制整个表单数据，确保数据完整无误地发送到服务器上。

2. Redux 状态管理

在使用 Redux 进行状态管理时，由于 Redux 的状态通常是一个对象或包含对象的数组，因此深拷贝也经常会用到。在 Redux 中，当我们需要修改状态时，我们通常会复制整个状态对象，然后对副本进行修改，以避免修改原始状态。使用深拷贝可以确保我们复制的状态对象是完全独立的，从而保持应用程序的稳定性和可维护性。

3. 对象的缓存和比较

在前端开发中，当我们需要缓存某些对象时，我们需要使用深拷贝来复制对象并将其存储在缓存中。这样可以确保缓存中的对象与原始对象完全独立，从而避免意外的修改。此外，当我们需要比较两个对象是否相等时，也可以使用深拷贝来比较它们的值，以避免引用相等和值相等的混淆。

4. 数据结构的变换

在前端开发中，有时我们需要对一个复杂的数据结构进行变换，例如将一个嵌套的对象转换为数组或将一个数组转换为嵌套的对象。在这种情况下，我们可以使用深拷贝来复制原始数据，并使用适当的算法对副本进行变换，以避免修改原始数据。

总之，在前端开发中，深拷贝是非常常见的场景，可以帮助我们处理复杂的数据结构，并保持代码的稳定性和可维护性。

 浅拷贝

浅拷贝是对对象或数组进行浅层复制，只复制对象的一层属性，当复制的对象中有引用类型的属性时，复制出来的对象和原对象会共享引用类型的属性。

这意味着，如果原对象中的引用类型属性被修改，复制出来的对象也会受到影响。因此，浅拷贝只适用于一些简单的数据类型的对象。

以下是实现浅拷贝的几种方式：

1. Object.assign()

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。返回目标对象。Object.assign() 会覆盖目标对象中与源对象属性名相同的属性值。通过传入一个空对象，可以很容易地实现浅拷贝。

const obj = { a: 1, b: 2 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1, b: 2 }

2. Spread operator(拓展运算符，常用)

Spread operator 可以将一个对象或数组展开为多个参数，也可以用于浅拷贝。通过展开一个对象，可以将其属性复制到新的对象中。

const obj = { a: 1, b: 2 };
const copy = { ...obj };
console.log(copy); // { a: 1, b: 2 }

3. Array.slice()

Array.slice() 方法返回一个从开始索引到结束索引（不包括结束索引）的新数组。如果不传入任何参数，将返回一个原数组的浅拷贝。可以使用该方法对数组进行浅拷贝。

const arr = [1, 2, 3];
const copy = arr.slice();
console.log(copy); // [1, 2, 3]

4. Array.concat()

Array.concat() 方法用于将一个或多个数组与原数组合并，并返回新的数组。如果不传入任何参数，将返回一个原数组的浅拷贝。可以使用该方法对数组进行浅拷贝。

const arr = [1, 2, 3];
const copy = [].concat(arr);
console.log(copy); // [1, 2, 3]

 深拷贝

深拷贝是对对象或数组进行递归复制，复制整个对象的所有层次，这样就可以避免对象中的引用类型的属性共享的问题。深拷贝可以完全复制原始对象，并生成一个新的独立的对象。但是，深拷贝的性能比浅拷贝要

以下是实现深拷贝的几种方式：

1. JSON.parse() 和 JSON.stringify()

可以使用 JSON.parse() 和 JSON.stringify() 方法实现深拷贝。通过将原对象转换为 JSON 字符串，然后将其再转换回对象，可以实现一个新的独立的对象。

const obj = { a: { b: 1 } };
const copy = JSON.parse(JSON.stringify(obj));
console.log(copy); // { a: { b: 1 } }

但是，需要注意的是，这种方法只能用于序列化可以转换为 JSON 的数据类型，例如对象、数组、字符串、数字、布尔值和 null。不能用于序列化函数、正则表达式和日期等非 JSON 标准的数据类型。而且，这种方法也不能处理循环引用的对象，因为 JSON.stringify() 在处理循环引用时会抛出异常。

JSON.parse(JSON.stringify(obj)) 不仅能复制数组还可以复制对象，但是几个弊端：
1）它会抛弃对象的 constructor，深拷贝之后，不管这个对象原来的构造函数是什么，在深拷贝之后都会变成 Object；
2）这种方法能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象，即那些能够被 json 直接表示的数据结构。RegExp 对象是无法通过这种方式深拷贝。
3）只有可以转成 JSON 格式的对象才可以这样用，像 function 没办法转成 JSON。

2. 递归实现

递归是实现深拷贝的一种常用方法。递归可以在对象或数组的每一层进行复制，并生成一个新的独立的对象。可以使用 typeof 操作符来判断一个属性是不是一个对象或数组，如果是，则对其进行递归复制。

function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  const copy = Array.isArray(obj) ? [] : {};

  Object.keys(obj).forEach(key => {
    copy[key] = deepCopy(obj[key]);
  });

  return copy;
}

const obj = { a: { b: 1 } };
const copy = deepCopy(obj);
console.log(copy); // { a: { b: 1 } }

深浅拷贝是 JavaScript 中常用的操作，用于复制对象和数组。浅拷贝只复制对象的一层，而深拷贝会复制整个对象的所有层次。浅拷贝的实现方式有 Object.assign()、Spread operator、Array.slice() 和 Array.concat()，而深拷贝的实现方式有 JSON.parse() 和 JSON.stringify() 和递归实现。需要根据具体的场景选择适合的方法。