首页 > 其他分享 >001[Js修炼]手写深拷贝

001[Js修炼]手写深拷贝

时间:2022-11-10 00:24:09浏览次数:45  
标签:deepClone obj Js objA 001 objB const 手写 type

/**
// 编写一个深度克隆函数,满足以下需求(此题考察面较广,注意细节)
function deepClone(obj) {}

// deepClone 函数测试效果
const objA = {
  name: 'jack',
  birthday: new Date(),
  pattern: /jack/g,
  body: document.body,
  others: [123, 'coding', new Date(), /abc/gim],
};

const objB = deepClone(objA);
console.log(objA === objB); // 打印 false
console.log(objA, objB); // 对象内容一样

*/
@解法:jayce
function deepClone(obj) {
  const cloneObj = {};
  if (Object.keys(obj).length > 0) {
    for (let i in obj) {
      const type = isType(obj[i]);
      if (['String', 'Number', 'Boolean', 'Undefined', 'Null'].includes(type)) {
        cloneObj[i] = obj[i];
      } else if (['RegExp', 'Date', 'Array'].includes(type)) {
        const cStruct = Object.getPrototypeOf(obj[i]).constructor;
        cloneObj[i] = Reflect.construct(cStruct, [obj[i]]);
      } else if (type === 'HTMLBodyElement') {// 这里考虑去换作nodeType === 1 ,这样可以匹配所有元素节点
        cloneObj[i] = obj[i].cloneNode();
      } else if (type === 'Object') {
        cloneObj[i] = deepClone(obj[i]);
      } else {
        throw new Error(
          `${type} is currently not matched!! need add the type!`,
        );
      }
    }
  }

  function isType(target) {
    return Object.prototype.toString.call(target).split(/\W/)[2];
  }
  return cloneObj;
}

const objB = deepClone(objA);
console.log(objA === objB); // 打印 false
console.log(objA, objB); // 对象内容一样

// TODO:

  1. 考虑更多解法, 例如使用 call/apply 去替换 反射方法
  2. 不用构造函数怎么解?
  3. 类型判断 loadash/ vueUse 中是怎么实现的?去看看

标签:deepClone,obj,Js,objA,001,objB,const,手写,type
From: https://www.cnblogs.com/jaycethanks/p/16875690.html

相关文章

  • [Element UI 2.x] el-upload组件的部分事件属性传参在.jsx文件中失效的问题
    在之前的开发工作经历中,基本会首选Antd、ant-design-vue、Vant做为前端工程的UI库。今天在处理一个现有项目时,其UI库使用的是ElementUI(2.15.10)。在以JSX形式编写一个具......
  • json数据传递参数
    1.类型json数组json对象(POJO)json数组(POJO) 2.接收请求中的json数据的步骤:(1)添加json数据转换相关坐标  (2)  (3)  注意:@EnableWebMvc注解功能强大,该注解整合......
  • js获取字符串中含有某个字符个数
    得到字符串含有某个字符的个数/***获取字符串中某字符的个数*@paramstr字符串*@paramcharchar为某字符*@returnsString*/constgetCharCount=(......
  • 推荐一款个人感觉比较好用的 JSON 格式化 chrome 插件-JSON-handle
    ​​插件下载地址​​,记得打开VPN。JSON数据展示效果如下图,个人感觉还不错,就是加载起来可能会稍微慢一点,但并不影响我对它的好感。可以展开,收起。右上角有个小方框,点一下......
  • js 闭包和promise
    闭包概述:闭包就是在函数内部返回一个函数,内部函数可以对外部函数的属性和方法进行引用,外部的属性和方法不会被js垃圾回收机制所回收这个结构就称为闭包函数的生命周......
  • 关于异常DBG_TERMINATE_PROCESS(0x40010004)
    简介DBG_TERMINATE_PROCESS表示进程被调试器终止。值为0x40010004。其定义如下:////MessageId:DBG_TERMINATE_PROCESS////MessageText:////Debuggerterminatedproce......
  • 手写本地缓存实战2—— 打造正规军,构建通用本地缓存框架
    大家好,又见面了。本文是笔者作为掘金技术社区签约作者的身份输出的缓存专栏系列内容,将会通过系列专题,讲清楚缓存的方方面面。如果感兴趣,欢迎关注以获取后续更新。村......
  • EXTJS 中Grid控件的常用代码
    1、定义列varcm=newExtgridColumnModel([{header:编号,dataIndex:id},{header:名称,dataIndex:name},{header:描述,dataIndex:descn}......
  • 2022-11-09 js 秒数转换成时分
    注:本文转载于http://t.csdn.cn/AHK3yfunctionformatSeconds(value){varsecondTime=parseInt(value);//秒varminuteTime=0;//分......
  • 手写map和filter
    mapfunctionmyMap(arr,callback){if(Array.isArray(arr)){if(arr.length===0)returnarr;constbrr=[];for(letitemofarr){brr.pu......