数据拷贝探秘：深入了解深拷贝与浅拷贝的玄机

前言

在JavaScript编程中，深拷贝和浅拷贝是两个重要的概念，它们涉及到如何复制和管理数据。深拷贝和浅拷贝在处理对象和数组等复杂数据类型时起到关键作用，但它们之间存在着显著的区别。在本文中，我们将深入探讨这两种拷贝方式的定义、实现和应用，以帮助开发者更好地理解和运用它们。

浅拷贝

浅拷贝是指创建一个新的对象或数组，然后将原始对象或数组中的元素复制到新对象或数组中。浅拷贝只复制了对象或数组的第一层结构，而没有递归地复制嵌套在其中的对象或数组。

let obj = {
    age:18
}
let obj2 = obj
obj.age = 20
console.log(obj2.age); // 20

这就是一个简单的浅拷贝的案例，将原始数据中所有的数据复制一份，放到新的变量空间中，两个变量不共享一个内存地址。

常见的浅拷贝的方法

1.Object.create(x)

let a = {name: '小红'}
let b = Object.create(a) 
a.name = '小明'

console.log(b.name);

2.Object.assign({}, x)

let a = {name: '小明', like: {n: 'coding'}}
let b = Object.assign({}, a) // assign 用于将一个或多个对象的所有属性复制到目标对象
a.like = {}

console.log(b.like);

3.concat

let a = [1, 2, 3, 4];

// 使用 concat() 创建新数组并复制原数组的元素
let nums = a.concat();
a[0] = 10;

console.log(a);         // Output: [10, 2, 3, 4]
console.log(nums);     // Output: [1, 2, 3, 4]

4.slice

let a = [1, 2, 3, 4];

// 使用 slice() 创建新数组并复制原数组的元素
let nums = a.slice();
a[0] = 10;

console.log(a);         // Output: [10, 2, 3, 4]
console.log(nums);     // Output: [1, 2, 3, 4]

5.使用展开运算符

let originalArray = [1, 2, 3, 4];
let shallowCopy = [...originalArray];

console.log(shallowCopy);

深拷贝

深拷贝是指创建一个新的对象或数组，并且递归地复制原始对象或数组中的所有嵌套元素，包括嵌套的对象和数组。深拷贝生成的副本是原始数据的完整副本，对副本的修改不会影响原始数据。在JavaScript中，由于对象的嵌套结构，通常需要使用递归方法实现深拷贝。

深拷贝的方法

let obj = {
    name: '伟哥',
    age: 18,
    like: {
        type: 'coding'
    },
    a: undefined,
    b: null,
    c: Symbol('c'),
    d: function () {},
}

let newObj = JSON.parse(JSON.stringify(obj)) // 深拷贝 对象转字符串，再转对象 
newObj.like.type = 'reading'
console.log(obj.like.type);  // coding

这是最常见的使用JSON.parse(JSON.stringify(obj))实现深拷贝的方法，该方法的原理是将对象先转换成JSON字符串，然后再将JSON字符串转换回对象。

总结

深拷贝：复制后的对象与原来的对象是完全隔离，互不影响。

浅拷贝：复制了之后，原来的变量和新的变量指向同一个东西，彼此之间的操作会互相影响。

感谢您的阅读，点赞关注作者更新更多后续