【JavaScript 】深拷贝与浅拷贝

在 JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的 bugs 和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。

浅拷贝（Shallow Copy）

浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数据类型的引用。即新对象与原对象共享对引用数据类型的引用。

用途：

浅拷贝通常用于复制简单的数据结构或仅需要复制顶层属性的场景。

优缺点：

优点：
- 性能较高：浅拷贝通常比深拷贝快，因为它不需要递归地复制对象中的所有嵌套结构。
- 实现简单：浅拷贝的实现比深拷贝简单。

缺点：
- 共享引用问题：对于对象或数组中包含的引用类型（如嵌套对象或数组），浅拷贝只复制了引用，而不是实际数据。这意味着对新对象的修改可能会影响原对象。

实现方式：

1.使用 Object.assign() 方法：

let obj1 = { a: 1, b: { c: 2 } };
let obj2 = Object.assign({}, obj1);
obj2.b.c = 3;
console.log(obj1.b.c); // 3（原对象的嵌套对象也被修改了）

2.使用展开运算符：

let obj1 = { a: 1, b: { c: 2 } };
let obj2 = { ...obj1 };
obj2.b.c = 3;
console.log(obj1.b.c); // 3

深拷贝（Deep Copy）

深拷贝是指创建一个新的对象或数组，其中包含原对象或数组的所有数据，并且递归地复制嵌套的对象或数组。新对象与原对象在内存中完全独立。

用途：

深拷贝适用于需要复制对象及其所有嵌套结构，且不希望修改新对象会影响原对象的场景。

优缺点：

优点：
- 数据隔离：修改新对象不会影响原对象，因为它们在内存中是完全独立的。

缺点：
- 性能开销：深拷贝通常比浅拷贝慢，因为它需要递归地复制所有嵌套的结构。
- 实现复杂：深拷贝的实现比浅拷贝复杂，特别是当对象包含循环引用或特殊数据类型（如日期、正则表达式等）时。

实现方式：

1.使用 JSON 方法（适用于没有函数、日期对象等特殊数据类型的对象）：

let obj1 = { a: 1, b: { c: 2 } };
let obj2 = JSON.parse(JSON.stringify(obj1));
obj2.b.c = 3;
console.log(obj1.b.c); // 2

2.使用递归函数实现深拷贝：

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

    if (Array.isArray(obj)) {
        return obj.map(item => deepClone(item));
    }

    const result = {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            result[key] = deepClone(obj[key]);
        }
    }
    return result;
}

let obj1 = { a: 1, b: { c: 2 } };
let obj2 = deepClone(obj1);
obj2.b.c = 3;
console.log(obj1.b.c); // 2

3.使用第三方库（如 Lodash）：

const _ = require('lodash');
let obj1 = { a: 1, b: { c: 2 } };
let obj2 = _.cloneDeep(obj1);
obj2.b.c = 3;
console.log(obj1.b.c); // 2

总结

浅拷贝：只复制对象的第一层属性，嵌套的对象或数组仍然共享引用。适用于不需要深层复制的场景。
深拷贝：递归复制对象的所有属性，创建完全独立的副本。适用于需要完全独立的数据结构的场景。

选择使用浅拷贝还是深拷贝取决于具体需求。如果需要处理的对象包含嵌套的复杂数据结构且修改副本不应该影响原始对象，深拷贝是更合适的选择。如果只需要复制顶层属性，浅拷贝就足够了。

文章版权归作者所有，未经允许请勿转载。

THE END