前端深拷贝 和浅拷贝有哪些方式,你在哪里使用过

前端深拷贝和浅拷贝的方式有很多，下面列举几种常用的方式：

深拷贝：
1. JSON.parse(JSON.stringify(obj))，该方法可以将对象序列化为字符串，再将字符串反序列化为新的对象，从而实现深拷贝。但是该方法有一些限制，例如无法拷贝函数、RegExp等类型的数据。
2. 递归拷贝，即遍历对象的每个属性并进行拷贝，如果属性值是对象，则递归进行拷贝。
3. 使用第三方库如lodash、jQuery等提供的深拷贝方法。

浅拷贝：
1. Object.assign(target, obj1, obj2, ...)，该方法可以将源对象的属性浅拷贝到目标对象中，如果有相同的属性，则会覆盖掉目标对象中的属性。
2. 手动遍历对象的每个属性并进行拷贝，例如使用for...in循环。

我在工作中经常使用深拷贝和浅拷贝，例如在React开发中需要对state和props进行拷贝，以避免直接修改原始数据。同时也可以在处理数据时对数据进行深拷贝，以避免对原始数据造成影响。

相关问题

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

### 关于前端深拷贝和浅拷贝

#### 深拷贝与浅拷贝的概念

在 JavaScript 中，对象可以分为基本类型和引用类型。对于这两种类型的变量赋值操作有着不同的行为模式。

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

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

#### 实现方法对比

##### 浅拷贝的方法

1. 使用 `Object.assign()` 方法可以直接把多个源对象自身的可枚举属性复制到目标对象上，并返回该目标对象。需要注意的是这仅适用于单层次的属性复制[^2]。

   const obj1 = { a: 1 };
   const shallowCopy = Object.assign({}, obj1);

2. 利用扩展运算符也可以达到同样的效果：

   const obj1 = { a: 1 };
   const shallowCopy = {...obj1};

##### 深拷贝的方法

1. 对于简单的 JSON 数据结构来说，`JSON.parse(JSON.stringify())` 是一种常见的实现方式。不过这种方式无法处理函数、循环引用等问题[^5]。

   const deepCloneSimpleObj = (obj) => {
       return JSON.parse(JSON.stringify(obj));
   }

2. 更加健壮的做法是借助第三方库如 Lodash 提供的功能强大的工具函数 `_cloneDeep()` 来进行深拷贝[^4]。

   import _ from 'lodash';
   _.cloneDeep(source); // source是要被克隆的目标对象

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

#### 性能考量

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

前端 深拷贝和浅拷贝

前端中的深拷贝和浅拷贝是用于复制对象或数组的概念。

浅拷贝是指创建一个新的对象或数组，然后将原始对象或数组的引用复制给新对象或数组。这意味着当你修改新对象或数组时，原始对象或数组也会被修改。实现浅拷贝的方法有多种，如使用 `Object.assign()`、扩展运算符 `...` 或者 `Array.prototype.slice()` 等。

例如，使用扩展运算符进行浅拷贝：

const originalObj = { a: 1, b: { c: 2 } };
const shallowCopy = { ...originalObj };

shallowCopy.a = 3;
shallowCopy.b.c = 4;

console.log(originalObj); // { a: 1, b: { c: 4 } }
console.log(shallowCopy); // { a: 3, b: { c: 4 } }

深拷贝则是在创建新对象或数组时，递归地复制原始对象或数组中的所有值，从而创建一个完全独立的副本。这意味着修改新对象或数组不会影响原始对象或数组。常见的实现深拷贝的方法有使用递归、`JSON.parse(JSON.stringify())` 或者第三方库如 `lodash` 的 `cloneDeep()`。

例如，使用`JSON.parse(JSON.stringify())`进行深拷贝：

const originalObj = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(originalObj));

deepCopy.a = 3;
deepCopy.b.c = 4;

console.log(originalObj); // { a: 1, b: { c: 2 } }
console.log(deepCopy); // { a: 3, b: { c: 4 } }

需要注意的是，使用 `JSON.parse(JSON.stringify())` 的方式存在一些限制，例如无法复制函数、循环引用等。在实际应用中，需要根据需求选择合适的方法进行拷贝。