前端知识笔记（四）———深浅拷贝的区别，如何实现？

首先要了解什么是浅拷贝，什么是深拷贝，才能更好的清除他们有什么区别，从而如何实现深浅拷贝

一，什么是浅拷贝？

浅拷贝(shallow copy):指创建一个新的数据结构，该数据结构中的元素值是原始数据结构中元素的副本；只复制指向某个对象的指针,而不复制这个对象本身，新旧对象共享一块内存

二，什么是深拷贝？

深拷贝(deep copy):指创建一个新的数据结构，该数据结构中的所有元素及其嵌套元素都是原始数据结构中元素的副本；复制并创建一个一模一样的对象，不共享内存，修改新对象旧对象不会改变

三，深浅拷贝有什么区别？

深拷贝和浅拷贝的区别在于复制数据结构时是否复制了其中的嵌套对象或数组；

选择深拷贝还是浅拷贝取决于具体的需求，以及对数据结构中嵌套元素的处理方式。在处理较为复杂的数据结构时，特别是涉及到嵌套对象或数组的情况下，深拷贝通常更适合确保数据的独立性和完整性；

上述已分析两者区别。

四，浅拷贝如何实现？

像是一些简单的赋值，那就是浅拷贝，

Object.assign()、展开操作符（spread operator）、Array.slice()等也是浅拷贝实现的方法

实例：

// 原始数组
const originalArray = [1, 2, 3];
// 使用展开操作符进行浅拷贝
const shallowCopy = [...originalArray];
console.log(shallowCopy); // 输出: [1, 2, 3]

在上面的示例中，[...originalArray] 使用了展开操作符来创建了 originalArray 的浅拷贝。浅拷贝后的数组 shallowCopy 中的元素值与原始数组 originalArray 中的元素值相同，但它们是独立的副本，对其中一个进行修改不会影响另一个。

五，如何实现深拷贝？

使用递归遍历原始数据结构，并对其中的对象和数组进行递归复制。另外，也可以使用现成的第三方库，比如 lodash 中的 cloneDeep 方法来实现深拷贝。

实例：

function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    // 如果不是对象或者是null，则直接返回
    return obj;
  }
  let copy = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}
// 原始对象
const originalObject = {
  a: 1,
  b: {
    c: 2,
    d: [3, 4]
  }
};
// 深拷贝
const deepClone = deepCopy(originalObject);
console.log(deepClone);

在上面的示例中，deepCopy 函数通过递归遍历原始对象 obj，并对其中的对象和数组进行递归复制，从而实现了深拷贝。