JS深拷贝，面试宝典！

2023-09-10 11:25:06

了解JavaScript深拷贝，面试时轻松过关！今天我们就来探讨深拷贝的奥秘，它不仅是面试备用的必备技能，也是开发中常见且重要的需求。深拷贝与浅拷贝之别将在本文中一目了然。准备好了吗？一起踏上JS深拷贝之旅吧！

浅尝辄止的赋值与浅拷贝

初学者常把赋值和浅拷贝混为一谈，甚至认为它们完全相同。事实上，它们有着本质上的区别。赋值只是简单地将一个变量的值赋予另一个变量，而浅拷贝则是复制对象或数组的引用，而不是实际的副本。

举个例子，如果我们有一个对象：

const person = {
  name: "John Doe",
  age: 30,
  hobbies: ["coding", "reading", "hiking"],
};

然后，我们用赋值的方式创建一个新的变量：

const newPerson = person;

此时，newPerson变量并没有指向一个新的对象，而是指向了person对象本身。因此，如果我们修改newPerson的属性值，person对象也会受到影响。

另一方面，如果我们使用浅拷贝来创建一个新对象：

const newPerson = Object.assign({}, person);

那么newPerson变量指向了一个新的对象，而不是person对象的引用。这意味着，我们可以修改newPerson的属性值，而不会影响person对象。

窥破迷障，深拷贝的真面目

浅拷贝虽然简单易用，但它并不适用于所有情况。当我们需要复制一个对象的所有属性值，包括嵌套的对象或数组时，就需要用到深拷贝。

深拷贝的实现方式有很多种，但最常见的莫过于递归算法。我们可以通过递归的方式，遍历对象或数组的每一个属性值，并复制一份新的副本。

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

  if (Array.isArray(obj)) {
    const newArr = [];
    for (const item of obj) {
      newArr.push(deepCopy(item));
    }
    return newArr;
  }

  const newObj = {};
  for (const key in obj) {
    newObj[key] = deepCopy(obj[key]);
  }
  return newObj;
}