一文搞懂JS深拷贝和浅拷贝，避免面试掉坑

前端

2022-12-07 04:50:32

深拷贝和浅拷贝：面试官必问的面试技巧

浅拷贝还是深拷贝：微妙的差别

在处理JavaScript对象时，经常需要复制数据。这时，就要考虑深拷贝和浅拷贝这两种方式。虽然它们看起来相似，但它们之间的区别却截然不同。

深拷贝：一比一克隆

深拷贝就像一个细致的工匠，它一丝不苟地复制原对象的每一个属性，包括嵌套的对象。就像一个完美的复制品，新对象拥有自己的独立值，与原对象完全一致。当修改新对象时，不会影响原对象，反之亦然。

适用场景：

需要完全独立的对象，比如复杂的数据结构、组件实例等。
避免对原对象造成意外修改。

浅拷贝：复制一层，只取表面

浅拷贝则像是一个偷懒的帮手，只复制对象的第一层属性，忽略嵌套的对象。就像一个带有链接的副本，新对象只包含原对象的直接属性，当修改新对象时，会同时影响原对象。

适用场景：

不需要复制嵌套对象的场景，比如简单的数据传输、性能优化等。
当对象结构简单，修改不会造成影响时。

技术实现：值传递与引用传递

深拷贝和浅拷贝的本质差异在于它们传递的是值还是引用。深拷贝传递的是值，即新对象拥有自己的独立值。浅拷贝传递的是引用，即新对象与原对象共享相同的内存地址。

实践出真知：代码实例

深拷贝：利用递归

function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj; // 基本数据类型或null直接返回
  }
  // 创建一个新对象，类型与原对象一致
  const newObj = Array.isArray(obj) ? [] : {};
  for (const key in obj) {
    newObj[key] = deepCopy(obj[key]); // 递归复制属性值
  }
  return newObj;
}

浅拷贝：利用Object.assign()

function shallowCopy(obj) {
  return Object.assign({}, obj);
}

面试官，请接招！

深拷贝和浅拷贝是JavaScript面试中的常见问题。掌握它们的原理和应用场景，就能从容应对面试官的挑战，为你的简历添彩。

学以致用，提升代码质量

深拷贝和浅拷贝在实际开发中也有着广泛的应用。合理选择拷贝方式，可以提升代码质量和性能。例如：

使用深拷贝复制复杂的数据结构，避免意外修改导致的混乱。
使用浅拷贝传输简单的数据，减少数据量和提升性能。

常见问题解答

什么是深拷贝和浅拷贝？

答：深拷贝复制对象的所有属性，包括嵌套对象；浅拷贝只复制对象的第一层属性，不复制嵌套对象。
什么时候使用深拷贝？

答：需要完全独立的对象，避免意外修改时使用深拷贝。
什么时候使用浅拷贝？

答：不需要复制嵌套对象的场景，比如简单的数据传输、性能优化时使用浅拷贝。
深拷贝和浅拷贝的本质差异是什么？

答：深拷贝传递值，浅拷贝传递引用。
如何实现深拷贝和浅拷贝？

答：深拷贝可以使用递归或JSON.parse(JSON.stringify(obj))；浅拷贝可以使用Object.assign()或扩展运算符(...obj)。