当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript深浅拷贝区别解析

JavaScript深浅拷贝区别解析

2025-09-24 18:15:31 0浏览收藏

在JavaScript中，深拷贝与浅拷贝是处理对象和数组时必须理解的核心概念，它们决定了复制数据时，新旧数据之间是共享引用还是完全独立。**深拷贝与浅拷贝的区别**在于，浅拷贝仅复制顶层属性，嵌套对象仍然共享引用，修改会影响原对象。而深拷贝则递归复制所有层级，实现完全独立的数据副本。本文将详细介绍JavaScript中实现浅拷贝的常用方法，如扩展运算符、`Object.assign()`和`slice()`，并深入探讨深拷贝的实现方式，包括`JSON.parse(JSON.stringify())`的局限性及其替代方案，如`structuredClone()`和手写递归函数，并着重讲解如何使用WeakMap解决循环引用问题，确保复杂数据结构的安全复制。掌握这些技巧，能有效避免数据修改带来的意外副作用，编写出更健壮、可维护的代码。

深拷贝与浅拷贝的核心区别在于数据独立性，浅拷贝仅复制顶层属性，嵌套对象共享引用，修改会影响原对象；深拷贝递归复制所有层级，实现完全独立。常用浅拷贝方法包括扩展运算符、Object.assign()和slice()，适用于简单复制；深拷贝可使用JSON.parse(JSON.stringify())处理纯数据对象，但会丢失函数、undefined、Symbol，且无法处理循环引用；推荐使用structuredClone()或手写递归函数，结合WeakMap解决循环引用问题，确保复杂结构的安全复制。

如何实现JavaScript中的深拷贝与浅拷贝？

在JavaScript中，深拷贝与浅拷贝是处理对象和数组时绕不开的核心概念，它们决定了我们复制数据时，新旧数据之间是共享引用还是完全独立。简单来说，浅拷贝只是复制了数据的第一层，如果数据结构中有嵌套的对象或数组，那么新旧数据会共享这些嵌套内容的引用。这意味着修改新数据中的嵌套部分，原数据也会受到影响。而深拷贝则会递归地复制所有层级的数据，确保新数据与原数据在任何层面上都完全独立，互不干扰。理解并正确运用这两种拷贝方式，是编写健壮、可预测代码的关键。

解决方案

要实现JavaScript中的深拷贝与浅拷贝，我们有多种策略和工具，选择哪种取决于你的具体需求和数据结构的复杂程度。

浅拷贝的实现

浅拷贝相对简单，主要目标是复制顶层属性的值。对于基本类型（如数字、字符串、布尔值），它们的值会被直接复制；而对于引用类型（如对象、数组），复制的是它们的内存地址（引用），而不是它们指向的实际内容。

使用扩展运算符（Spread Syntax ...） 这是ES6引入的语法，非常简洁。

const originalObject = { a: 1, b: { c: 2 } };
const shallowCopyObject = { ...originalObject };
console.log(shallowCopyObject); // { a: 1, b: { c: 2 } }

shallowCopyObject.a = 100;
shallowCopyObject.b.c = 200; // 修改嵌套对象
console.log(originalObject.a); // 1 (基本类型未受影响)
console.log(originalObject.b.c); // 200 (嵌套对象受影响)

const originalArray = [1, { a: 2 }, 3];
const shallowCopyArray = [...originalArray];
console.log(shallowCopyArray); // [1, { a: 2 }, 3]

shallowCopyArray[0] = 100;
shallowCopyArray[1].a = 200; // 修改嵌套对象
console.log(originalArray[0]); // 1
console.log(originalArray[1].a); // 200

使用 Object.assign() 这个方法用于将所有可枚举的自有属性的值从一个或多个源对象复制到目标对象。它返回目标对象。

const originalObject = { a: 1, b: { c: 2 } };
const shallowCopyObject = Object.assign({}, originalObject);

shallowCopyObject.b.c = 300;
console.log(originalObject.b.c); // 300 (嵌套对象受影响)

使用 Array.prototype.slice() 或 Array.from() (针对数组) 这两个方法都可以创建数组的浅拷贝。

const originalArray = [1, { a: 2 }, 3];
const shallowCopySlice = originalArray.slice();
const shallowCopyFrom = Array.from(originalArray);

shallowCopySlice[1].a = 400;
console.log(originalArray[1].a); // 400

深拷贝的实现

深拷贝则复杂得多，因为它需要递归地遍历所有嵌套层级，为每个引用类型的数据都创建一个全新的副本。

使用 JSON.parse(JSON.stringify(obj)) 这是最常见也最简洁的深拷贝方式，尤其适用于那些只包含基本类型、普通对象和数组的数据。

const originalObject = { a: 1, b: { c: 2 }, d: [3, { e: 4 }] };
const deepCopyObject = JSON.parse(JSON.stringify(originalObject));

deepCopyObject.b.c = 500;
deepCopyObject.d[1].e = 600;
console.log(originalObject.b.c); // 2 (未受影响)
console.log(originalObject.d[1].e); // 4 (未受影响)

注意： 这种方法有很多局限性，下面会详细说明。

使用 structuredClone() (Web API) 这是一个相对较新的Web API，旨在提供一个标准化的深拷贝机制。它能处理许多复杂的数据类型，并且能处理循环引用。

const originalObject = {
    a: 1,
    b: { c: 2 },
    d: new Date(),
    reg: /test/g,
    func: () => console.log('hello')
};
// 注意：structuredClone 不会复制函数
const deepCopyObject = structuredClone(originalObject);

console.log(deepCopyObject.d instanceof Date); // true
console.log(deepCopyObject.reg instanceof RegExp); // true
console.log(deepCopyObject.func); // undefined (函数未被复制)

structuredClone() 的兼容性：目前在主流浏览器（Chrome 98+, Firefox 94+, Safari 15.4+）和 Node.js (v17.0.0+) 中都已支持。

手写递归深拷贝函数 对于更复杂或有特定需求的场景，比如需要拷贝函数、Symbol类型，或者处理循环引用，通常需要我们自己编写一个递归的深拷贝函数。

function deepClone(obj, hash = new WeakMap()) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }

    // 处理循环引用
    if (hash.has(obj)) {
        return hash.get(obj);
    }

    let clone;
    // 处理Date对象
    if (obj instanceof Date) {
        clone = new Date(obj.getTime());
    }
    // 处理RegExp对象
    else if (obj instanceof RegExp) {
        clone = new RegExp(obj);
    }
    // 处理数组
    else if (Array.isArray(obj)) {
        clone = [];
        hash.set(obj, clone); // 先将空数组放入hash，再填充
        obj.forEach((item, index) => {
            clone[index] = deepClone(item, hash);
        });
    }
    // 处理普通对象
    else {
        clone = {};
        hash.set(obj, clone); // 先将空对象放入hash，再填充
        for (let key in obj) {
            if (Object.prototype.hasOwnProperty.call(obj, key)) {
                clone[key] = deepClone(obj[key], hash);
            }
        }
    }
    return clone;
}

const original = {
    a: 1,
    b: { c: 2 },
    d: new Date(),
    e: /pattern/g,
    f: function() { console.log('func'); }, // 函数会被复制引用，但不会执行
    g: undefined,
    h: Symbol('test'),
    i: null
};
original.self = original; // 制造一个循环引用

const cloned = deepClone(original);

console.log(cloned.b.c); // 2
cloned.b.c = 999;
console.log(original.b.c); // 2 (原始未变)

console.log(cloned.d instanceof Date); // true
console.log(cloned.e instanceof RegExp); // true
console.log(cloned.f === original.f); // true (函数是引用拷贝)
console.log(cloned.g); // undefined
console.log(cloned.h === original.h); // true (Symbol是引用拷贝)
console.log(cloned.i); // null
console.log(cloned.self === cloned); // true (循环引用被正确处理)
console.log(cloned.self === original); // false

这个手写函数相对健壮，能处理多种类型和循环引用，但对于Map、Set、TypedArray等更复杂的数据结构，还需要进一步扩展。

为什么区分深拷贝与浅拷贝如此重要？

说实话，刚开始写JavaScript的时候，我经常会因为分不清深拷贝和浅拷贝而踩坑。最常见的场景就是，我明明“复制”了一个对象，然后修改了“副本”里的某个属性，结果发现原对象也跟着变了，这让我百思不得其解，甚至怀疑是不是JavaScript出了什么问题。这就是浅拷贝带来的隐患。

区分深拷贝与浅拷贝之所以重要，核心在于数据隔离和避免意外副作用。

想象一下，你在开发一个复杂的应用，比如一个用户配置页面。用户修改了某个配置项，你希望在用户点击“保存”之前，这些修改只影响到当前编辑的临时数据，而不会立即改变全局的用户配置。如果这里使用了浅拷贝，那么用户在编辑过程中修改了嵌套的配置项（比如一个权限列表），这些修改会立即反映到原始的全局配置对象上。一旦用户取消了操作，你就无法回溯到修改前的状态了，这显然是不可接受的。

另一个例子是React或Vue这类前端框架中的状态管理。为了确保组件的响应式更新机制正常工作，我们通常需要避免直接修改状态对象。当需要更新一个对象或数组时，我们应该创建一个新的对象或数组，然后将新的值赋给它。如果只是进行浅拷贝，然后修改了拷贝后的嵌套对象，框架可能无法检测到状态的变化，导致UI不更新。例如，this.setState({ user: { ...this.state.user, age: 30 } }) 这种写法，如果 user 对象内部还有更深的嵌套，而你直接修改了 this.state.user.profile.age = 30，React是不会重新渲染的，因为它只做了浅层比较。

所以，理解何时需要一个完全独立的数据副本（深拷贝），何时只需要一个顶层独立的副本（浅拷贝），是编写可维护、可预测且没有奇怪bug的代码的基础。它关乎我们对数据流的控制力，以及代码的健壮性。

`JSON.parse(JSON.stringify())` 的局限性有哪些，我们该如何应对？

JSON.parse(JSON.stringify()) 这种深拷贝方式，用起来确实很方便，一行代码就能搞定，特别是在处理那些纯粹由基本类型、普通对象和数组组成的简单数据时，它的表现非常出色。我个人在很多快速原型开发或者数据结构不复杂的场景下，都倾向于优先使用它。然而，它并不是万能的，存在一些显著的局限性：

无法处理函数（Function）：JSON.stringify() 会默默地忽略对象中的函数属性，或者在数组中直接将其转换为 null。这意味着你的拷贝对象会丢失所有方法。
```
const objWithFunc = {
    name: 'test',
    greet: function() { console.log('Hello'); }
};
const cloned = JSON.parse(JSON.stringify(objWithFunc));
console.log(cloned.greet); // undefined
```

无法处理 undefined 和 Symbol 类型：JSON.stringify() 遇到 undefined 和 Symbol 类型时，在对象属性中会直接忽略，在数组中则会将其转换为 null。

const objWithUndefined = { a: 1, b: undefined, c: Symbol('sym') };
const cloned = JSON.parse(JSON.stringify(objWithUndefined));
console.log(cloned); // { a: 1 } (b和c都丢失了)

const arrWithUndefined = [1, undefined, Symbol('sym')];
const clonedArr = JSON.parse(JSON.stringify(arrWithUndefined));
console.log(clonedArr); // [1, null, null]

日期对象（Date）会被转换为字符串：Date 对象在经过 JSON.stringify() 后，会变成ISO格式的字符串，而不是一个 Date 对象实例。虽然值还在，但类型变了，你无法直接调用 getDate() 等方法。
```
const objWithDate = { created: new Date() };
const cloned = JSON.parse(JSON.stringify(objWithDate));
console.log(cloned.created); // "2023-10-27T10:00:00.000Z" (字符串)
console.log(cloned.created instanceof Date); // false
```

正则表达式（RegExp）会被转换为 {} 空对象：这直接导致了正则表达式的丢失。

const objWithRegExp = { pattern: /abc/g };
const cloned = JSON.parse(JSON.stringify(objWithRegExp));
console.log(cloned.pattern); // {}

无法处理循环引用：如果对象中存在循环引用（即一个对象的属性直接或间接引用了自身），JSON.stringify() 会抛出 TypeError: Converting circular structure to JSON 错误。
```
const circularObj = {};
circularObj.self = circularObj;
try {
    JSON.parse(JSON.stringify(circularObj));
} catch (e) {
    console.error(e.message); // TypeError: Converting circular structure to JSON
}
```

应对策略：

明确使用场景：如果你的数据结构非常简单，只包含基本类型、普通对象和数组，且没有上述提到的特殊类型，那么 JSON.parse(JSON.stringify()) 是一个非常高效且简洁的选择。
对于复杂数据：
- 使用 structuredClone()：如果你的运行环境支持（现代浏览器和Node.js v17+），并且你不需要拷贝函数，那么 structuredClone() 是一个极佳的替代方案，它能处理日期、正则表达式、Map、Set、ArrayBuffer、ImageData等多种复杂类型，并且能处理循环引用。
- 引入第三方库：像Lodash这样的工具库提供了 _.cloneDeep() 方法，它经过了充分的测试和优化，能够处理各种复杂情况，包括函数、Symbol、循环引用等。这是在生产环境中处理复杂深拷贝问题的常见且推荐的做法。
- 手写递归深拷贝：如果不想引入额外库，或者有非常特定的拷贝需求（比如只拷贝某些属性，或者自定义某些类型的拷贝逻辑），那么自己实现一个递归深拷贝函数是必要的。这通常涉及到对各种数据类型的判断，以及处理循环引用的机制（通常使用 WeakMap 来记录已拷贝的对象）。

选择哪种方式，最终还是取决于你的项目需求、对性能的考量以及对代码复杂度的接受程度。没有银弹，只有最适合当前场景的方案。

如何编写一个能处理循环引用的健壮深拷贝函数？

编写一个能处理循环引用的深拷贝函数，关键在于维护一个映射表，记录已经拷贝过的对象。这样，当我们在递归过程中再次遇到同一个对象时，就可以直接返回之前拷贝的副本，而不是陷入无限递归导致栈溢出。

以下是一个相对健壮的深拷贝函数实现，它能处理基本类型、数组、普通对象、日期对象、正则表达式，并能有效避免循环引用问题。对于函数和Symbol，它会进行引用拷贝（因为函数通常不需要深拷贝其内部逻辑，而Symbol是不可变的）。

/**
 * 健壮的深拷贝函数，能处理基本类型、数组、对象、日期、正则表达式，并处理循环引用。
 * 对于函数和Symbol，进行引用拷贝。
 *
 * @param {any} obj 要拷贝的源对象
 * @param {WeakMap} hash 用于存储已拷贝对象的映射，避免循环引用
 * @returns {any} 深拷贝后的新对象
 */
function robustDeepClone(obj, hash = new WeakMap()) {
    // 1. 处理基本类型和null/undefined
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }

    // 2. 处理日期对象
    if (obj instanceof Date) {
        return new Date(obj.getTime());
    }

    // 3. 处理正则表达式
    if (obj instanceof RegExp) {
        return new RegExp(obj);
    }

    // 4. 处理循环引用：如果该对象已被拷贝过，直接返回其副本
    if (hash.has(obj)) {
        return hash.get(obj);
    }

    // 5. 根据类型创建新的容器（数组或对象）
    let clone;
    if (Array.isArray(obj)) {
        clone = [];
    } else {
        // 保留原对象的原型链
        clone = Object.create(Object.getPrototypeOf(obj));
    }

    // 6. 将新创建的空副本存入hash，以便在递归子属性时处理循环引用
    hash.set(obj, clone);

    // 7. 递归拷贝属性
    // 对于数组，使用forEach遍历
    if (Array.isArray(obj)) {
        obj.forEach((item, index) => {
            clone[index] = robustDeepClone(item, hash);
        });
    }
    // 对于对象，遍历其可枚举的自有属性
    else {
        for (let key in obj) {
            // 确保只拷贝对象自身的属性，而不是原型链上的属性
            if (Object.prototype.hasOwnProperty.call(obj, key)) {
                clone[key] = robustDeepClone(obj[key], hash);
            }
        }
    }

    return clone;
}

// 示例测试
const originalData = {
    name: 'Alice',
    age: 30,
    address: {
        city: 'New York',
        zip: '100

本篇关于《JavaScript深浅拷贝区别解析》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！