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

js深度拷贝

时间:2023-04-17 16:33:51浏览次数:33  
标签:obj1 stringify obj2 log js JSON 深度 拷贝 target


法一:有局限性

//通过js的内置对象JSON来进行数组对象的深拷贝
function deepClone(obj: any): any {
  const _obj = JSON.stringify(obj),
  const objClone = JSON.parse(_obj);
  return objClone;
}

这种简单粗暴的方法有其局限性,当值为undefined、function、symbol 会在转换过程中被忽略

法二:Object.assign()

针对深拷贝,需要使用其他办法,因为 Object.assign()拷贝的是(可枚举)属性值。个人理解 Object.assign() 只会拷贝一层结构

const log = console.log;

function test() {
  'use strict';
  let obj1 = { a: 0 , b: { c: 0}};
  let obj2 = Object.assign({}, obj1);
  log(JSON.stringify(obj2));
  // { a: 0, b: { c: 0}}

  obj1.a = 1;
  log(JSON.stringify(obj1));
  // { a: 1, b: { c: 0}}
  log(JSON.stringify(obj2));
  // { a: 0, b: { c: 0}}

  obj2.a = 2;
  log(JSON.stringify(obj1));
  // { a: 1, b: { c: 0}}
  log(JSON.stringify(obj2));
  // { a: 2, b: { c: 0}}

  obj2.b.c = 3;
  log(JSON.stringify(obj1));
  // { a: 1, b: { c: 3}}
  log(JSON.stringify(obj2));
  // { a: 2, b: { c: 3}}

  // Deep Clone
  obj1 = { a: 0 , b: { c: 0}};
  let obj3 = JSON.parse(JSON.stringify(obj1));
  obj1.a = 4;
  obj1.b.c = 4;
  log(JSON.stringify(obj3));
  // { a: 0, b: { c: 0}}
}

test();

法三:利用循环和递归

public deepClone(target: any): any {
    if (target == null) {
      return null;
    }
    const cloneObject = new target.constructor();
    Object.keys(target).forEach(
      (attr: string) => {
        cloneObject[attr] = (typeof target[attr] === 'object') ? this.deepClone(target[attr]) : target[attr];
      }
    );

    return cloneObject;
  }

 

标签:obj1,stringify,obj2,log,js,JSON,深度,拷贝,target
From: https://blog.51cto.com/u_12374018/6195458

相关文章

  • npm自定义模块及发布模块NodeJS
    在模块目录下执行:npminit(可以加--yes一键生成)新建文件index.jsvaryunan='helloyunan';module.exports=yunan;然后将文件夹放到node_modules可以用下面方法使用试试constyunan=require('huyunan');console.log('yunan',yunan);//yunanhelloyunan发布之前......
  • C# 数组深拷贝浅拷贝
    1bool[]tmp1={true,true};2bool[]tmp2;34//tmp2=tmp1;//浅拷贝更改tmp2会影响tmp156tmp2=(bool[])tmp1.Clone();//克隆深拷贝更改tmp2不会影响tmp178tmp2[0]=false;9......
  • 使用js对tensorspace/three.js/webgl进行截图
    使用js对tensorspace/three.js/webgl进行截图问题分析场景:在右侧,是tensorspace库使用three.js调用webgl对模型进行渲染的画面。我需要使用js对右侧画面进行截图,并保存至本地用于分析。问题:对webgl进行截图需要进行一些特别的操作,使用html2canvas行不通。同时,针对tensorspa......
  • ASEMI代理ADAU1701JSTZ-RL原装ADI车规级ADAU1701JSTZ-RL
    编辑:llASEMI代理ADAU1701JSTZ-RL原装ADI车规级ADAU1701JSTZ-RL型号:ADAU1701JSTZ-RL品牌:ADI/亚德诺封装:LQFP-48批号:2023+安装类型:表面贴装型引脚数量:48类型:车规级芯片工作温度:−0°C~70°CADAU1701JSTZ-RL特征28-/56位,50MIPS数字音频处理器从串行EEPROM自启动用于模拟控制的带4输......
  • js开发规范
    ####################### 1.缩进[强制] 使用4个空格做为一个缩进层级,不允许使用2个空格或tab字符。[强制] switch中缩进2个空格[强制] 要求分号前面不可以有空格,后面可以有空格[强制] 要求语句块之前保留一个空格[强制] 关键字和类似关键字前后保留一个空格[强制] 要......
  • 《皇家骑士:300自走棋》携手来电科技,达成深度战略合作
    近日,跳跃互娱旗下高热度游戏《皇家骑士:300自走棋》与共享充电宝领域的开创企业《来电科技》达成深度战略合作。皇家骑士和来电科技联合定制充电宝,不但能充分发挥皇家骑士的IP效应,更为充电宝赋予了IP趣味元素,让用户享受到联合定制共享充电服务。本次战略合作,无论是对皇家骑士还是来......
  • 【js】时间戳转时间 1680338700 =》2023-04-01 16:45:00
    1transformTimestamp(timestamp){2letdate=newDate(parseInt(timestamp)*1000)3letYear=date.getFullYear()4letMoth=(date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1)5letDay=(date.getDat......
  • 盘点国内前端npm CDN替代方案,基本上可以替代unpkg、jsdelivr
    收集一波常见的加速NPM包的CDN,发现有些还是挺好用的,用来做博客或者网站加载NPM使用还是可以的。经典老牌的CDN加速unpkg.comcdn.jsdelivr.netfastly.jsdelivr.net使用方法:直接进官网,搜NPM包名使用。缺点:有时候不是很稳定,而且国内有些地方没法访问,jsdelivr曾经被用来结合......
  • Python Web 深度学习实用指南:第四部分
    原文:Hands-OnPythonDeepLearningfortheWeb协议:CCBY-NC-SA4.0译者:飞龙本文来自【ApacheCN深度学习译文集】,采用译后编辑(MTPE)流程来尽可能提升效率。不要担心自己的形象,只关心如何实现目标。——《原则》,生活原则2.3.c第4节:生产中的深度学习(智能Web应用)本节......
  • 深度学习的基本原理和常用框架介绍
    深度学习是一种基于人工神经网络的机器学习方法,它可以从大量的数据中学习抽象和复杂的特征,从而实现各种智能任务,如图像识别、自然语言处理、语音识别等。深度学习的基本原理是利用多层的神经网络结构,通过前向传播和反向传播的算法,不断调整网络中的参数,使得网络的输出能够逼近或优......