首页 > 其他分享 >js深拷贝

js深拷贝

时间:2024-08-17 23:49:16浏览次数:14  
标签:instanceof map set obj js result new 拷贝

功能如下:

  1. WeakMap 解决循环引用问题
  2. 支持拷贝的数据类型:
    • 基本数据类型:number、string、boolean、undefined、null、symbol
    • 引用数据类型:Date、RegExp、Function、Object、Map、Set
代码实现:   
 1 function clone(obj, map = new WeakMap) {
 2     if (map.has(obj)) return map.get(obj);
 3     if (obj === null) {
 4         return null;
 5     }
 6     let result = {};
 7     if (Array.isArray(obj)) {
 8         result = [];
 9     }
10     if (obj instanceof RegExp || obj instanceof Date) {
11         result = new obj.constructor(obj);
12         map.set(obj, result);
13     }
14     if (obj instanceof Map || obj instanceof Set) {
15         result = new obj.constructor();
16         map.set(obj, result)
17         if (obj instanceof Map) {
18             obj.forEach((val, key) => {
19                 result.set(key, clone(val, map));
20             });
21         } else {
22             obj.forEach((val, key) => {
23                 result.add(clone(val, map));
24             });
25         }
26         // 由于Map、Set的typeof 为object,这里需要return;
27         return result;
28     }
29     if (obj instanceof Function) {
30         result = () => { obj() };
31         map.set(obj, result)
32     }
33     if (['number', 'string', 'boolean'].includes(typeof obj)) {
34         result = obj;
35     }
36     if (typeof obj === 'object') {
37         result = Object.create(Reflect.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj), Object.getOwnPropertySymbols(obj));
38         map.set(obj, result)
39         Reflect.ownKeys(obj).forEach(key => {
40             result[key] = clone(obj[key], map);
41         });
42     }
43     return result;
44 }

测试代码:

 1 const mapA = new Map();
 2 mapA.set('a', 'aaa');
 3 const setA = new Set();
 4 setA.add(1,2,3);
 5 const sym = Symbol('m');
 6 const obj = {
 7     a: 1,
 8     b: '1',
 9     c: true,
10     d: undefined,
11     e: null,
12     f: new Date(),
13     g: new RegExp(),
14     h: function(){
15         console.log('111')
16     },
17     i: {i: '1', ii: {ii: '11'}},
18     j: [1,2,3, {j: 'j', jj: 'jj'}],
19     k: mapA,
20     l: setA,
21     [sym]: 'm'
22 }
23 const newObj = clone(obj);

 

标签:instanceof,map,set,obj,js,result,new,拷贝
From: https://www.cnblogs.com/dadouF4/p/18365180

相关文章

  • JSP基于JAVAWEB医院挂号系统jep98(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表系统功能:用户,医生,护士,科室信息,预约时间段,出诊信息,预约挂号,门诊病历,医生打卡,护士打卡,就诊评价技术要求:开发语言:JSP前端使用:HTML5,CSS,JSP动态网页技......
  • JSP基于JavaWeb的CRM系统684y6程序+源码+数据库+调试部署+开发环境
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表系统功能:公告信息,部门,职位,用户,客户分组,客户信息,拜访记录,商机信息,订单信息技术要求:开发语言:JSP前端使用:HTML5,CSS,JSP动态网页技术后端使用SpringBoo......
  • JSP惠民一网通nwzyz--(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表系统功能:户主,新生入证明,迁入户籍,死亡证明,迁出户籍,本地人员流动,外来人员流动,民生业务,评分信息,应急电话开题报告内容一、项目背景随着信息化技术的飞速......
  • 聊聊JS中的WebSocket
    你好,我是沐爸,欢迎点赞、收藏和关注。个人知乎在JavaScript中,使用WebSocket非常简单直观。通过几行代码,你就可以轻松创建一个WebSocket连接,并监听来自服务器的消息。无论是开发实时聊天应用、在线游戏、实时数据分析平台,还是任何需要实时数据交互的场景,WebSocket都能为你提......
  • C/C++ 拷贝构造函数 | 赋值构造函数 | 移动构造函数 | 移动赋值构造函数
    文章目录前言1.拷贝构造函数(CopyConstructor)2.赋值构造函数(CopyAssignmentOperator)3.移动构造函数(MoveConstructor)4.移动赋值构造函数(MoveAssignmentOperator)总结前言C++中关于一个对象的构造,就有很多讲究。其中最常用的可能就是拷贝构造函数......
  • Json
    Jsonstringjson=@"{'Result':{'ResponseStatus':{'IsSuccess':true,'Errors':[],'SuccessEntitys':[{'Id......
  • 【免费】ssm驾校预约管理系统jsp|毕业设计|Javaweb项目
    收藏点赞不迷路 关注作者有好处编号:ssm560ssm驾校预约管理系统jsp开发语言:Java数据库:MySQL技术:Spring+SpringMVC+MyBatis+Vue工具:IDEA/Ecilpse、Navicat、Maven1.系统展示2.万字文档展示第5章系统详细设计系统实现这个章节的内容主要还是展示系统的功能界面设计......
  • 【免费】基于SSM的蛋糕甜品店管理系统的设计与开发jsp|毕业设计|Javaweb项目
    收藏点赞不迷路 关注作者有好处编号:ssm544基于SSM的蛋糕甜品店管理系统的设计与开发jsp开发语言:Java数据库:MySQL技术:Spring+SpringMVC+MyBatis+Vue工具:IDEA/Ecilpse、Navicat、Maven文末获取源码(免费|领源码)1.系统展示2.万字文档展示第5章系统详细设计5.1个人中......
  • ssm驾校预约管理系统jsp管理系统|【源码+论文+PPT+部署视频】
    我们提供多元化的技术项目服务,涵盖Java、PHP、Python等编程语言,以及前端开发、人工智能、大数据、单片机开发、ASP.NET、物联网等领域。我们还提供简历模板、面试题库和学习资料,帮助用户提升技术能力和就业竞争力。我们的服务内容包括:免费功能设计、任务书和开题报告撰写、中......
  • 基于nodejs+vue秒杀系统实现[程序+论文+开题]-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着互联网技术的不断成熟和电子商务的蓬勃发展,秒杀活动作为电商平台吸引用户流量、提升销售额的重要手段,其重要性日益凸显。秒杀活动以其独特的限时、限量......