一文读懂浅拷贝与深拷贝，面试必备技能

2023-06-26 19:56:21

深入浅出浅拷贝与深拷贝：前端工程师面试必备技能

在前端开发的广阔领域中，浅拷贝和深拷贝是两个至关重要的概念，它们在面试中经常被考察，并且是衡量对 JavaScript 对象和引用类型理解力的关键指标。

浅拷贝：复制对象的引用

浅拷贝是一种操作，它将一个对象的引用复制给另一个对象。这意味着这两个对象指向同一个内存地址，因此，如果其中一个对象发生变化，另一个对象也会受到影响。

举个例子，假设我们有一个对象 user，它具有 name 和 age 属性：

const user = {
  name: "John",
  age: 30
};

现在，我们使用浅拷贝创建一个新对象 userCopy：

const userCopy = Object.assign({}, user);

userCopy 现在指向与 user 相同的内存地址。如果我们更新 userCopy.name，它也会改变 user.name 的值：

userCopy.name = "Jane";
console.log(user.name); // 输出: Jane

深拷贝：复制对象的副本

与浅拷贝不同，深拷贝会创建一个新对象，并将原对象的属性值复制到新对象中。这意味着这两个对象具有不同的内存地址，当其中一个对象发生变化时，另一个对象不受影响。

让我们对 user 对象执行深拷贝：

const userCopy = JSON.parse(JSON.stringify(user));

userCopy 现在是一个新对象，具有与 user 相同的属性值，但指向一个不同的内存地址：

userCopy.name = "Jane";
console.log(user.name); // 输出: John

浅拷贝与深拷贝的区别

特征	浅拷贝	深拷贝
内存地址	相同	不同
改变一个对象	另一个对象也会改变	另一个对象不受影响
实现方式	`Object.assign()`、`扩展运算符`	`JSON.parse(JSON.stringify())`、递归

手写 JS 实现浅拷贝与深拷贝

为了进一步理解这些概念，让我们编写一些自己实现浅拷贝和深拷贝的 JavaScript 函数：

// 浅拷贝
const shallowCopy = (obj) => {
  return Object.assign({}, obj);
};

// 深拷贝
const deepCopy = (obj) => {
  if (typeof obj !== "object" || obj === null) {
    return obj;
  }

  if (Array.isArray(obj)) {
    return obj.map(deepCopy);
  }

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

  return newObj;
};

浅拷贝与深拷贝的应用场景

浅拷贝和深拷贝在实际开发中都有广泛的应用场景。浅拷贝通常用于需要共享对象数据但不想影响原对象的情况。例如，在组件之间传递数据时，浅拷贝可以确保组件不会意外地修改源数据。

深拷贝用于创建对象数据的副本并确保两个对象完全独立。例如，在存储敏感信息时，深拷贝可以防止未经授权的更改。

掌握浅拷贝与深拷贝，轻松搞定面试难题

浅拷贝和深拷贝是前端面试中常见的考察点，掌握它们的概念、区别和实现方式，对于顺利通过面试至关重要。通过本文的讲解，相信你已经对浅拷贝与深拷贝有了更深入的了解。希望这些知识能够帮助你轻松应对面试难题，在前端工程师的职业道路上更上一层楼！

常见问题解答

浅拷贝和深拷贝有什么缺点？
- 浅拷贝的缺点是它只复制对象的顶层属性，如果对象包含嵌套对象，则嵌套对象不会被复制。
- 深拷贝的缺点是它可能非常昂贵，尤其是在处理大型对象时。
什么时候应该使用浅拷贝？什么时候应该使用深拷贝？
- 当需要共享对象数据但不想影响原对象时，应使用浅拷贝。
- 当需要创建对象数据的副本并确保两个对象完全独立时，应使用深拷贝。
有哪些替代深拷贝的方法？
- 还可以使用 _.cloneDeep()（来自 lodash 库）或 structuredClone()（ES2020 中的新方法）来进行深拷贝。
如何在 React 中实现深拷贝？
- React 中没有内置的深拷贝函数。你可以使用 useMemo() 钩子结合 JSON.parse(JSON.stringify()) 来实现深拷贝。
浅拷贝和深拷贝有什么性能差异？
- 一般来说，浅拷贝比深拷贝快，因为浅拷贝只需要复制对象的引用，而深拷贝需要复制对象的整个结构。