前端深拷贝和浅拷贝面试题

关于前端深拷贝和浅拷贝
深拷贝与浅拷贝的概念
在 JavaScript 中，对象可以分为基本类型和引用类型。对于这两种类型的变量赋值操作有着不同的行为模式。

浅拷贝：当执行浅拷贝时，只会复制对象的第一层属性。如果这些属性是复杂的数据结构（即引用类型），那么源对象和目标对象将指向同一个内存地址。这意味着修改其中一个对象会影响另一个对象[^3]。

深拷贝：相比之下，深拷贝不仅会复制最外层的对象，还会递归地复制内部所有的嵌套对象或数组。因此，在完成深拷贝之后，两个对象之间没有任何关联，彼此独立存在。

实现方法对比
浅拷贝的方法

使用 Object.assign() 方法可以直接把多个源对象自身的可枚举属性复制到目标对象上，并返回该目标对象。需要注意的是这仅适用于单层次的属性复制[^2]。
const obj1 = { a: 1 };
const shallowCopy = Object.assign({}, obj1);
登录后复制

利用扩展运算符也可以达到同样的效果：
const obj1 = { a: 1 };
const shallowCopy = {...obj1};
登录后复制

深拷贝的方法

对于简单的 JSON 数据结构来说，JSON.parse(JSON.stringify()) 是一种常见的实现方式。不过这种方式无法处理函数、循环引用等问题[^5]。
const deepCloneSimpleObj = (obj) => {
return JSON.parse(JSON.stringify(obj));
}
登录后复制

更加健壮的做法是借助第三方库如 Lodash 提供的功能强大的工具函数 _cloneDeep() 来进行深拷贝[^4]。
import _ from 'lodash';
_.cloneDeep(source); // source是要被克隆的目标对象
登录后复制

手动编写递归算法也是可行的选择之一，但这通常比较麻烦而且容易出错。

性能考量
由于深拷贝涉及到了更多的计算资源消耗以及时间成本，所以在实际开发过程中应当谨慎选择合适的场景应用。例如，当只需要部分数据更新而不必完全重建整个对象树的时候，采用浅拷贝可能是更好的决定；而对于那些确实需要彻底隔离副本的情况，则应该优先考虑使用深拷贝技术。