浅拷贝和深拷贝
数据的拷贝
在前端开发中，经常会涉及到数据的拷贝操作。数据的拷贝可以分为浅拷贝和深拷贝两种方式。浅拷贝和深拷贝的概念在前端开发中非常重要，因为在处理数据时，我们经常需要对数据进行拷贝操作，以避免对原始数据的修改影响到其他地方的数据。
浅拷贝和深拷贝的区别在于拷贝的深度。浅拷贝只会拷贝对象的第一层属性，而深拷贝会递归地拷贝对象的所有属性，包括嵌套对象和数组。在实际开发中，我们需要根据具体的需求选择合适的拷贝方式，以确保数据的完整性和一致性。
浅拷贝
浅拷贝是指创建一个新的对象或数组，将原始对象或数组的值复制到新对象或数组中。浅拷贝只会复制对象或数组的第一层属性或元素，而不会递归复制嵌套的对象或数组。这意味着如果原始对象或数组中包含引用类型的属性，浅拷贝后的对象或数组中的这些属性仍然会指向同一个引用。
浅拷贝的实现比较简单，可以通过Object.assign()方法或展开运算符(…)来实现。浅拷贝只会拷贝对象的第一层属性，如果对象中包含嵌套对象或数组，则拷贝后的对象和原始对象会共享这些嵌套对象或数组，这就意味着对拷贝后的对象的修改会影响到原始对象。
let obj1 = {name: 'Alice', age: 20, hobbies: ['reading', 'traveling']};
let obj2 = Object.assign({}, obj1);
obj2.name = 'Bob';
obj2.hobbies.push('coding');
console.log(obj1); // {name: 'Alice', age: 20, hobbies: ['reading', 'traveling', 'coding']}
console.log(obj2); // {name: 'Bob', age: 20, hobbies: ['reading', 'traveling', 'coding']}
使用Object.assign()方法对obj1进行浅拷贝得到obj2，然后修改obj2的name属性和hobbies属性，发现obj1的hobbies属性也被修改了。这是因为浅拷贝只是拷贝了对象的引用，而不是对象本身，所以对拷贝后的对象的修改会影响到原始对象。
为了避免这种情况，我们可以使用深拷贝来实现对对象的完全拷贝。深拷贝会递归地拷贝对象的所有属性，包括嵌套对象和数组，确保拷贝后的对象和原始对象完全独立，互不影响。
深拷贝
深拷贝是指创建一个新的对象或数组，并递归复制原始对象或数组的所有属性或元素，包括嵌套的对象或数组。深拷贝会完全复制原始数据结构，使得新对象或数组与原始数据结构完全独立，互不影响。
实现深拷贝的方式有很多种，可以使用JSON.parse(JSON.stringify(obj))方法、递归函数、第三方库等。下面是使用JSON.parse(JSON.stringify(obj))方法实现深拷贝的示例：
let obj1 = {name: 'Alice', age: 20, hobbies: ['reading', 'traveling']};
let obj2 = JSON.parse(JSON.stringify(obj1));
obj2.name = 'Bob';
obj2.hobbies.push('coding');
console.log(obj1); // {name: 'Alice', age: 20, hobbies: ['reading', 'traveling']}
console.log(obj2); // {name: 'Bob', age: 20, hobbies: ['reading', 'traveling', 'coding']}
使用JSON.parse(JSON.stringify(obj1))方法对obj1进行深拷贝得到obj2，然后修改obj2的name属性和hobbies属性，发现obj1的属性没有被修改。这是因为深拷贝会递归地拷贝对象的所有属性，确保拷贝后的对象和原始对象完全独立，互不影响。
需要注意的是，使用JSON.parse(JSON.stringify(obj))方法实现深拷贝时，会忽略对象的原型链和不可枚举属性，只拷贝对象的可枚举属性。如果对象中包含函数、RegExp对象、Date对象等特殊类型的属性，这些属性在深拷贝后会丢失。
在实际开发中，为了避免这种情况，可以使用递归函数来实现深拷贝，确保拷贝对象的完整性。下面是使用递归函数实现深拷贝的示例：
function deepClone(obj) {
if (obj === null || typeof obj !== 'object') {
return obj;
}
let clone = Array.isArray(obj) ? [] : {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
clone[key] = deepClone(obj[key]);
}
}
return clone;
}
let obj1 = {name: 'Alice', age: 20, hobbies: ['reading', 'traveling']};
let obj2 = deepClone(obj1);
obj2.name = 'Bob';
obj2.hobbies.push('coding');
console.log(obj1); // {name: 'Alice', age: 20, hobbies: ['reading', 'traveling']}
console.log(obj2); // {name: 'Bob', age: 20, hobbies: ['reading', 'traveling', 'coding']}
定义一个deepClone()函数来递归地拷贝对象的所有属性，确保拷贝后的对象和原始对象完全独立，互不影响。使用递归函数实现深拷贝可以处理对象中包含函数、RegExp对象、Date对象等特殊类型的属性，确保拷贝对象的完整性。
除了使用JSON.parse(JSON.stringify(obj))方法和递归函数，还可以使用第三方库来实现深拷贝。例如，lodash库提供了_.cloneDeep()方法来实现深拷贝，该方法可以处理各种特殊类型的属性，并且性能较高，是一个非常实用的工具。
如何选择浅拷贝还是深拷贝？
在实际开发中，我们需要根据具体的需求和数据结构来选择使用浅拷贝还是深拷贝。
-
如果数据结构较为简单，且不包含嵌套的对象或数组，可以使用浅拷贝来复制数据，以减少性能开销。
-
如果数据结构较为复杂，包含嵌套的对象或数组，或者需要完全独立的数据副本，应该使用深拷贝来确保数据的完整性和正确性。
-
在处理不可变数据时，通常使用深拷贝来创建新的数据副本，以避免意外修改原始数据。
-
在处理可变数据时，可以根据具体情况选择使用浅拷贝或深拷贝，以提高性能和减少内存占用。
总结
-
复制方式：浅拷贝只复制对象或数组的第一层属性或元素，而深拷贝会递归复制所有属性或元素，包括嵌套的对象或数组。
-
引用关系：浅拷贝复制的对象或数组中的引用类型属性仍然会指向同一个引用，而深拷贝会创建新的引用，使得新对象或数组与原始数据结构完全独立。
-
性能开销：由于深拷贝需要递归复制所有属性或元素，所以性能开销比浅拷贝更大。在处理大型对象或数组时，深拷贝可能会导致性能问题。
-
应用场景：浅拷贝通常用于复制简单的对象或数组，而深拷贝适用于复制复杂的对象或数组，特别是包含嵌套的对象或数组。
原文链接：https://juejin.cn/post/7338691767434739747 作者：前端fighter
