“js深拷贝和浅拷贝具体使用区别：避免常见错误的技巧，js浅拷贝和深拷贝原理详解”

2024-05-27 02:57:37 抖音SEO ℃

在前端开发中，我们经常需要复制一个对象。但是对象的复制是一个非常复杂的问题，因为对象在 JavaScript 中是通过引用来处理的，而不是通过值来处理的。因此，有时需要复制对象的值，有时需要复制对象的引用。为了满足不同的需求，JavaScript 提供了两种复制对象的方法，浅拷贝和深拷贝。

浅拷贝（Shallow Copy）

浅拷贝是创建一个新对象，将原对象的属性值逐一复制到新对象中，如果属性值是基本类型，那么直接复制值；如果属性值是引用类型，那么复制引用，原对象和新对象中的引用类型属性指向同一个内存地址。

浅拷贝使用场景是当需要对原对象进行修改时，不会影响到其他使用相同引用类型属性的对象。

以下是一个浅拷贝的示例代码：

function shallowCopy(obj) {
  let newObj = {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = obj[key];
    }
  }
  return newObj;
}

以上代码中，我们首先创建一个新对象，然后遍历原对象的属性并逐一复制到新对象中。需要注意的是，我们只复制了原对象中的第一层属性，因为浅拷贝只复制了对象的第一层。

深拷贝（Deep Copy）

深拷贝是创建一个新对象，将原对象的属性值逐一复制到新对象中，与浅拷贝不同的是，深拷贝会递归地复制原对象的所有层级属性值，包括基本类型和引用类型，原对象和新对象中的引用类型属性指向不同的内存地址。

深拷贝使用场景是当需要对原对象进行修改时，不会影响到其他使用相同引用类型属性的对象，当原对象包含嵌套的对象或数组时，深拷贝可以确保这些嵌套对象的独立性。

以下是一个深拷贝的示例代码：

function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  let newObj = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepCopy(obj[key]);
    }
  }
  return newObj;
}

以上代码中，我们首先判断传入的对象是否为基本类型或者 null，如果是则直接返回；然后判断传入的对象是否为数组或普通对象，分别创建一个新的数组或普通对象；接着遍历原对象的属性，如果属性值为引用类型，则递归地调用深拷贝函数，将返回值赋给新对象的相应属性。这样递归进行直到遍历完所有的属性，最后返回新的对象。