前端 深拷贝和浅拷贝

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

浅拷贝是指创建一个新的对象或数组，然后将原始对象或数组的引用复制给新对象或数组。这意味着当你修改新对象或数组时，原始对象或数组也会被修改。实现浅拷贝的方法有多种，如使用 `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())` 的方式存在一些限制，例如无法复制函数、循环引用等。在实际应用中，需要根据需求选择合适的方法进行拷贝。