当前位置: 首页 > news >正文

JavaScript对象的深度拷贝

递归深度拷贝

情况一:基本数据类型,直接赋值

情况二:复杂数据类型(数组和对象)先声明空容器,再递归调用遍历赋值

情况三:正则表达式,日期对象等

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>深度拷贝示例</title>
</head>
<body><script>function deepCopy(target, source, map = new WeakMap()) {if (source === null) {return null;}if (typeof source !== 'object') {return source;}if (map.has(source)) {return map.get(source);}let clone;if (source instanceof Date) {clone = new Date(source.getTime());map.set(source, clone);return clone;}if (source instanceof RegExp) {clone = new RegExp(source);map.set(source, clone);return clone;}if (Array.isArray(source)) {clone = [];map.set(source, clone);source.forEach((item, index) => {clone[index] = deepCopy(null, item, map);});return clone;}clone = {};map.set(source, clone);Object.keys(source).forEach(key => {clone[key] = deepCopy(null, source[key], map);});return clone;}const original = {name: "张三",age: 30,isStudent: false,hobby: null,skills: ["JavaScript", "React", "Node.js"],contact: {phone: "13800138000",email: "zhangsan@example.com"},birthday: new Date("1990-01-01"),regex: /\d+/g,self: null};original.self = original;const clone = deepCopy(null, original);clone.age = 31;clone.skills.push("Vue");clone.contact.phone = "13900139000";clone.birthday.setFullYear(1991);console.log("原始对象:", original);console.log("克隆对象:", clone);console.log("克隆对象是否等于原始对象:", clone === original);console.log("克隆对象的self属性是否指向自身:", clone.self === clone);</script>
</body>
</html>

函数递归地复制对象及其嵌套属性,确保原始对象和克隆对象完全独立。它处理了多种数据类型和循环引用的情况。

function deepCopy(target, source, map = new WeakMap()) {// 处理 null 值if (source === null) {return null;}// 处理原始数据类型(非对象)if (typeof source !== 'object') {return source;}// 处理循环引用:如果已复制过该对象,直接返回之前的克隆if (map.has(source)) {return map.get(source);}let clone;// 处理日期对象if (source instanceof Date) {clone = new Date(source.getTime());map.set(source, clone);return clone;}// 处理正则表达式对象if (source instanceof RegExp) {clone = new RegExp(source);map.set(source, clone);return clone;}// 处理数组if (Array.isArray(source)) {clone = [];map.set(source, clone);source.forEach((item, index) => {clone[index] = deepCopy(null, item, map);});return clone;}// 处理普通对象clone = {};map.set(source, clone);Object.keys(source).forEach(key => {clone[key] = deepCopy(null, source[key], map);});return clone;
}

处理策略说明

  1. 原始值处理:直接返回原值,不进行复制。
  2. 对象类型处理
    • 日期对象:创建新的日期对象,使用相同的时间戳。
    • 正则表达式:创建新的正则对象,使用相同的模式和标志。
    • 数组:创建新数组,递归复制每个元素。
    • 普通对象:创建新对象,递归复制每个自有属性。
  3. 循环引用处理:使用 WeakMap 记录已处理的对象,避免无限递归。

测试对象 original

代码创建了一个包含多种数据类型的复杂对象,并设置了循环引用:

const original = {name: "张三",           // 字符串age: 30,               // 数字isStudent: false,      // 布尔值hobby: null,           // nullskills: ["JavaScript", "React", "Node.js"],  // 数组contact: {             // 嵌套对象phone: "13800138000",email: "zhangsan@example.com"},birthday: new Date("1990-01-01"),  // 日期对象regex: /\d+/g,                     // 正则表达式self: null                         // 用于循环引用
};
// 设置循环引用:self 属性指向对象自身
original.self = original;

深度拷贝测试

const clone = deepCopy(null, original);
// 修改克隆对象的属性
clone.age = 31;
clone.skills.push("Vue");
clone.contact.phone = "13900139000";
clone.birthday.setFullYear(1991);// 输出测试结果
console.log("原始对象:", original);
console.log("克隆对象:", clone);
console.log("克隆对象是否等于原始对象:", clone === original);
console.log("克隆对象的self属性是否指向自身:", clone.self === clone);

关键测试点

  1. 完全独立:修改克隆对象不会影响原始对象,反之亦然。
  2. 循环引用处理:克隆对象的 self 属性正确指向克隆对象自身,而非原始对象。
  3. 嵌套结构保持:所有嵌套对象都被递归复制,保持相同的结构。
http://www.lryc.cn/news/583601.html

相关文章:

  • 全球发展币GDEV:从中国出发,走向全球的数字发展合作蓝图
  • 【RK3568+PG2L50H开发板实验例程】FPGA部分 | DDR3 读写实验例程
  • 【学习笔记】OkHttp源码架构解析:从设计模式到核心实现
  • 【Java】【力扣】【字节高频】3.无重复字符的最长字串
  • 便捷的电脑自动关机辅助工具
  • Deepseek搭建智能体个人知识库
  • yolo8实现目标检测
  • 操作系统核心技术剖析:从Android驱动模型到鸿蒙微内核的国产化实践
  • Day 56
  • EPLAN 电气制图(六):结构盒与设备管理器核心概念(基础知识选看)
  • Linux操作系统之进程间通信:管道概念
  • EF提高性能(查询禁用追踪)(关闭延迟加载)
  • 神经网络初步学习3——数据与损失
  • 如何选择时序数据库:关键因素与实用指南
  • HCIP(综合实验)
  • 备受期待的 MMORPG 游戏《侍魂R》移动端现已上线 Sui
  • 【教程】基于GNN的药物相互作用网络中的链接预测
  • 200nl2sql
  • 安全管理协议(SMP):配对流程、密钥生成与防中间人攻击——蓝牙面试核心考点精解
  • python 在运行时没有加载修改后的版本
  • 自动驾驶决策与规划
  • 华为动态路由配置
  • 【Linux | 网络】socket编程 - 使用UDP实现服务端向客户端提供简单的服务
  • 分库分表之实战-sharding-JDBC水平分库+分表后:查询与删除操作实战
  • Android Notification 通过增加addAction 跳转回Service重新执行逻辑
  • 海信IP501H_GK6323处理器免拆卡刷包和线刷救砖包_当贝纯净版
  • LLM 在预测下一个词的时候是怎么计算向量的,说明详细过程
  • 数据库技术体系及场景选型方案
  • RNN及其变体的概念和案例
  • 数据一致性解决方案总结