首页 > 其他分享 >js 双对象对比拷贝数据

js 双对象对比拷贝数据

时间:2024-02-07 10:56:43浏览次数:21  
标签:数组 对象 js returnObj key cloneObjA 拷贝 对比 模板

应用场景:

  1、两个深层次对象

  2、第一个对象为模板对象,第二个对象为返回的实际数据对象(简称实例对象)

  3、如果一个属性在实例对象内,就拿取实例对象的这个属性;如果没有,就从模板对象里面拿取。如果某个属性是数组对象,那么实例对象的这个属性内每一个数组对象都要与模板对象的模板数组对象比较

 

 1 // 引用lodash插件的深拷贝方法
 2 import { cloneDeep } from "lodash";
 3 
 4 // 从原型上判断这个对象的类型是什么
 5 const checkType = (Obj) => {
 6   return Object.prototype.toString.call(Obj).slice(8, -1);
 7 };
 8 
 9 // objA 模板对象;        objB 已实例对象
10 const mergeObjects = (objA = {}, objB = {}) => {
11 
12   // 如果模板是空对象,那就直接返回空对象
13   if (!Object.keys(objA)) {
14     return {};
15   }
16 
17   // 深拷贝,防止指针错误
18   const cloneObjA = cloneDeep(objA);
19 
20   // 新建返回的对象以已实例对象为基础
21   const returnObj = ![null].includes(objB) ? cloneDeep(objB) : {};
22   // 循环模板对象开始赋值
23   for (let key in cloneObjA) {
24     // 判断 当前(键/key)是否为对象的自有属性:只有自有属性才进行赋值操作
25     if (cloneObjA.hasOwnProperty(key)) {
26       // 判断当前数据类型:
27       switch (checkType(cloneObjA[key])) {
28         // 如果是数组,则拿取 模板对象 的数组对象模板 进行下一层次的比较赋值
29         case "Array":
30           // 如果返回对象已经有了这个属性且是数组,将数组的每一项都基于模板的数组对象,进行比较赋值,然后map出一个新对象
31           if (checkType(returnObj[key]) === "Array") {
32             returnObj[key] = returnObj[key].map((obj) =>  mergeObjects(objA[key][0], obj) );
33           } else {
34             // 如果返回对象还没有这个属性,则将模板的数组对象尽心比较一个空对象进行复制,并把这个新返回的对象放进数组
35             if(cloneObjA[key].length == 0){            // cloneObjA[key]是一个空数组,直接赋值
36                 returnObj[key] = cloneObjA[key]
37             }else{                                    // cloneObjA[key]不是一个空数组,说明cloneObjA[key]内必然有一个模板,将这个模板赋值给实例对象
38                 returnObj[key] = [mergeObjects(cloneObjA[key][0], {})];
39             }
40           }
41           break;
42 
43         case "Object": // 如果是对象,无论返回对象有没有这个属性,都要进行比较赋值
44           returnObj[key] = mergeObjects(cloneObjA[key], returnObj[key]);
45           break;
46 
47         case "Date": // 如果是date,返回对象将实例一个时间
48           returnObj[key] = key in returnObj ? new Date(returnObj[key].valueOf()) : new Date(cloneObjA[key].valueOf()) ;
49           break;
50 
51         case "RegExp": // 如果是RegExp
52           returnObj[key] = key in returnObj ? new RegExp(returnObj[key]) : new RegExp(cloneObjA[key]);
53           break;
54 
55         default: // 默认情况先,字符串、数字
56             returnObj[key] = key in returnObj ? returnObj[key] : cloneObjA[key];
57           break;
58       }
59     }
60   }
61   return returnObj;
62 };
63 export default mergeObjects;

 

标签:数组,对象,js,returnObj,key,cloneObjA,拷贝,对比,模板
From: https://www.cnblogs.com/l-ialiu/p/18010732

相关文章

  • (填坑)考古,如何追索Jsp代码。
    我现在要找到一个按钮指向路径错误的原因。1.找到jsp页面——userlist.jspweb正常是不会暴露jsp文件原名的,这里我用vscode全文检索页面中的方法名unlock找到的。2.根据页面布局定位按钮标签,发现是个自定义标签——<t:dgToolBar/>3.jsp最上边有自定义标签的引用声明 ......
  • Three.js 实现年会3D抽奖页面
    突然翻到在之前公司写的抽奖软件(用于公司年会)。觉得挺感慨的,TM的一共30+人,抽15左右,代码还是我写的,就是抽不中我。(真的是,涨了人品,失了智)一、效果效果如下:二、基础效果元素周期表 照片墙?抽奖?写之前的那段时间,刚好逛博客,看到别个大神写的threejs版《元素周期表》,这效果大体有......
  • js XML 命名空间
    Node的变化在DOM2中,Node类型包含以下特定于命名空间的属性:namespaceURI,节点的命名空间URL,如果未指定则为null;prefix,命名空间前缀,如果未指定则为null。在节点使用命名空间前缀的情况下,nodeName等于prefix+":"+localName。比如下面这个例子:<head><title>Example......
  • js DOM2 和 DOM3
    DOM2(DOMLevel2)和DOM3(DOMLevel3)在这些结构之上加入更多交互能力,提供了更高级的XML特性。实际上,DOM2和DOM3是按照模块化的思路来制定标准的,每个模块之间有一定关联,但分别针对某个DOM子集。这些模式如下所示。DOMCore:在DOM1核心部分的基础上,为节点增加方法和属性。......
  • js 插入标记
    HTML5将IE发明的innerHTML和outerHTML纳入了标准,但还有两个属性没有入选。这两个剩下的属性是innerText和outerText。innerText属性innerText属性对应元素中包含的所有文本内容,无论文本在子树中哪个层级。在用于读取值时,innerText会按照深度优先的顺序将子树中所有文......
  • js scrollIntoView()
    DOM规范中没有涉及的一个问题是如何滚动页面中的某个区域。为填充这方面的缺失,不同浏览器实现了不同的控制滚动的方式。在所有这些专有方法中,HTML5选择了标准化scrollIntoView()。scrollIntoView()方法存在于所有HTML元素上,可以滚动浏览器窗口或容器元素以便包含元素进入视口......
  • js 字符集属性
    HTML5增加了几个与文档字符集有关的新属性。其中,characterSet属性表示文档实际使用的字符集,也可以用来指定新字符集。这个属性的默认值是"UTF-16",但可以通过元素或响应头,以及新增的characterSeet属性来修改。下面是一个例子:document.characterSet="UTF-8";自定义数据属性HTM......
  • js 焦点管理
    HTML5增加了辅助DOM焦点管理的功能。首先是document.activeElement,始终包含当前拥有焦点的DOM元素。页面加载时,可以通过用户输入(按Tab键或代码中使用focus()方法)让某个元素自动获得焦点。例如:```letbutton=document.getElementById("myButton");button.focus();conso......
  • 【nw.js】使用nw.js将html页面打包成exe免安装程序
    @[TOC]一、批处理zip命令(已有可跳过此步骤)下载zip,你可以到该网址下载zip执行文件,如下图:将文件路径配置到环境变量中,具体操作如下:右键计算机——>属性——>高级系统设置——>高级——>环境变量——>系统变量——>找到path,双击——>新建——>将所在路径添加进去(如:“F:\zip”包含进环......
  • spring boot controller设置返回json
    在SpringBoot中,Controller通常会返回JSON格式的数据,这得益于SpringBoot的自动配置能力以及内嵌的Jackson库。以下是如何设置Controller返回JSON数据的基本步骤:添加依赖:首先,确保你的项目中包含了SpringBoot的WebStarter依赖,它已经包括了Jackson库,用于处理JSON序列化。<dependen......