新闻中心

JavaScript对象深拷贝、引用、克隆完整实战教程

栏目：软件教程 日期： 作者：admin 阅读：10

本教程面向 JavaScript 新手及前端开发者，详细讲解对象深拷贝方法，包括基本拷贝、递归拷贝、JSON 方法、第三方库和结构化克隆 API。通过小标题分步骤讲解，让用户快速掌握深拷贝技巧，解决对象引用、数据共享、修改影响原对象等问题，提高代码安全性和可维护性。

JavaScript对象深拷贝方法教程（详细版）

一、浅拷贝与深拷贝区别

步骤：

  1. 浅拷贝只复制对象第一层属性，嵌套对象仍是引用

const obj1 = {a:1, b:{c:2}};
const shallow = {...obj1};
shallow.b.c = 10;
console.log(obj1.b.c); // 输出 10

  1. 深拷贝复制所有层级，互不影响

技巧：

  • 理解对象引用和堆内存概念

  • 浅拷贝适合简单对象，深拷贝适合复杂对象

二、JSON方法实现深拷贝

步骤：

const obj = {a:1, b:{c:2}};
const deepCopy = JSON.parse(JSON.stringify(obj));
deepCopy.b.c = 10;
console.log(obj.b.c); // 输出 2

技巧：

  • 简单对象和数组适用

  • 不支持函数、Symbol、undefined、循环引用

三、递归函数实现深拷贝

步骤：

function deepClone(obj) {
    if(obj === null || typeof obj !== 'object') return obj;
    if(Array.isArray(obj)) {
        return obj.map(item => deepClone(item));
    }
    const clone = {};
    for(let key in obj){
        if(obj.hasOwnProperty(key)){
            clone[key] = deepClone(obj[key]);
        }
    }
    return clone;
}

const obj = {a:1, b:{c:2}};
const clone = deepClone(obj);
clone.b.c = 10;
console.log(obj.b.c); // 输出 2

技巧：

  • 适用于嵌套对象、数组

  • 可扩展支持 Set、Map、Date 类型

四、使用第三方库 Lodash

步骤：

import _ from 'lodash';
const obj = {a:1, b:{c:2}};
const clone = _.cloneDeep(obj);

技巧：

  • Lodash cloneDeep 支持大部分类型

  • 安全、高效、简洁，适合生产环境

五、结构化克隆 API（StructuredClone）

步骤：

const obj = {a:1, b:{c:2}};
const clone = structuredClone(obj);

技巧：

  • 支持大部分 JS 类型，包括 Map、Set、Date

  • 不支持函数、DOM 节点

  • 浏览器和 Node.js 最新版本支持

六、常见问题解决

  1. 循环引用导致 JSON 方法失败 → 使用递归或第三方库

  2. 函数或 Symbol 丢失 → 使用递归函数或结构化克隆 API

  3. 数组或嵌套对象未克隆 → 检查拷贝方法是否处理嵌套

总结：
通过本教程，你可以系统掌握 JavaScript 对象深拷贝方法，包括 JSON 方法、递归函数、Lodash 库及结构化克隆 API。结合这些方法，新手也能安全处理复杂对象，避免修改原对象，提高代码可维护性和安全性。

相关资讯