JS 深拷贝和浅拷贝的区别|极客笔记

JS 深拷贝和浅拷贝的区别

在JavaScript中，我们经常会遇到深拷贝和浅拷贝这两个概念。它们是在赋值操作中常常涉及的重要概念，深拷贝和浅拷贝的概念是为了解决引用类型数据在赋值操作中可能会出现的问题。本文将详细介绍深拷贝和浅拷贝的概念、区别以及如何实现深拷贝和浅拷贝。

什么是浅拷贝？

在JavaScript中，浅拷贝是指将一个对象的值复制到另一个对象中，如果对象的属性是基本数据类型，则会直接复制该属性的值，如果对象的属性是引用类型数据（如数组、对象等），则复制的是该属性的引用，而不是实际的值。

举个示例来说明浅拷贝：

let obj1 = {
    name: 'Alice',
    age: 30,
    hobbies: ['reading', 'traveling']
};

let obj2 = Object.assign({}, obj1);

obj2.name = 'Bob';
obj2.hobbies.push('swimming');

console.log(obj1); // { name: 'Alice', age: 30, hobbies: ['reading', 'traveling', 'swimming'] }
console.log(obj2); // { name: 'Bob', age: 30, hobbies: ['reading', 'traveling', 'swimming'] }

在上面的示例中，我们使用Object.assign()方法将obj1浅拷贝到obj2中。当我们修改obj2的属性值时，obj1的属性值也会发生改变，这是因为浅拷贝只是复制了引用而不是实际的值。

什么是深拷贝？

深拷贝是指在赋值操作时，复制源对象的所有属性值，包括基本数据类型和引用类型数据，而不是复制引用。这样，在深拷贝后，原对象和新对象之间完全独立，修改一个对象的属性值不会影响到另一个对象。

下面是一个实现深拷贝的示例：

function deepCopy(obj) {
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }

    let copy = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            copy[key] = deepCopy(obj[key]);
        }
    }

    return copy;
}

let obj1 = {
    name: 'Alice',
    age: 30,
    hobbies: ['reading', 'traveling']
};

let obj2 = deepCopy(obj1);

obj2.name = 'Bob';
obj2.hobbies.push('swimming');

console.log(obj1); // { name: 'Alice', age: 30, hobbies: ['reading', 'traveling'] }
console.log(obj2); // { name: 'Bob', age: 30, hobbies: ['reading', 'traveling', 'swimming'] }

在上面的示例中，我们使用deepCopy()函数实现了深拷贝，当我们修改obj2的属性值时，obj1的属性值不会受到影响。

浅拷贝和深拷贝的区别

赋值操作是否会影响原对象
- 浅拷贝：赋值操作会影响原对象，因为复制的是引用。
- 深拷贝：赋值操作不会影响原对象，对象之间完全独立。
性能和内存占用
- 浅拷贝：浅拷贝只是复制引用，因此相对来说性能更优，但可能会存在原对象和新对象之间的关联，需要注意修改对原对象的影响。
- 深拷贝：深拷贝需要递归复制对象的所有属性值，可能会比较耗时，并且占用更多的内存空间。
实现方式
- 浅拷贝：可以使用Object.assign()、Array.slice()等方法实现浅拷贝。
- 深拷贝：需要通过递归复制对象的属性值来实现深拷贝。