js深浅拷贝
创始人
2025-05-29 00:27:42
0

1、浅拷贝

const obj = {name:"李旭亮",age:20,family:{baby:'yll',}
}
console.log(obj);
// 浅拷贝:拷贝的是地址
const o={...obj};
o.age=200;
console.log(o.age);//200
console.log(obj.age);//20 
// ***********************
o.family.baby='xxx';
console.log(obj.family.baby);//xxx 里面的内容仍然会改变

在这里插入图片描述

2、深拷贝

首先浅拷贝和深拷贝只针对引用类型
深拷贝: 拷贝的是对象,不是地址

常见方法:
1.通过递归实现深拷贝
2. lodash/cloneDeep
3.通过JSON.stringify()实现

2.1、通过递归实现深拷贝

函数递归:
如果一个函数在内部可以调用其本身,那么这个函数就是递归函数

  • 简单理解:函数内部自己调用自己,这个函数就是递归函数
  • 递归函数的作用和循环效果类似
  • 由于递归很容易发生“栈溢出”错误 (stack overflow),所以必须要加退出条件 return

在这里插入图片描述

// 函数递归实现时间输出
function gitTime() {document.querySelector('div').innerHTML=new Date().toLocaleString();setTimeout(gitTime,1000);
}
gitTime();

在这里插入图片描述

const obj = {name: "李旭亮",age: 20,family: {baby: 'yll',}
}
let o = {};
function deepCopy(newObj, oldObj) {for (const k in oldObj) {if (oldObj[k] instanceof Array) {console.log(oldObj[k]);newObj[k] = [];deepCopy(newObj, oldObj);} else if (oldObj[k] instanceof Object) {newObj[k] = {};deepCopy(newObj[k], oldObj[k])} else {newObj[k] = oldObj[k];}}
}
deepCopy(o, obj);
console.log(o);
o.family.baby = 'xxx';
console.log(o.family.baby);
console.log(obj.family.baby);

在这里插入图片描述

2.2、 lodash/cloneDeep



2.3、 通过JSON实现

const obj = {name: 'lxl',age: 18,books: ['JavaScript', '语文'],family: {baby: 'xxx',}
}
const newObj = JSON.parse(JSON.stringify(obj));
// 将新对象的baby改名
newObj.family.baby = 'lxl';
// 观察旧对象的baby有没有变化
console.log(obj.family.baby);//xxx

相关内容

热门资讯

linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作: 我们首先创建了一个文件并在这个文件里面添加了...
C++ 机房预约系统(六):学... 8、 学生模块 8.1 学生子菜单、登录和注销 实现步骤: 在Student.cpp的...
JAVA多线程知识整理 Java多线程基础 线程的创建和启动 继承Thread类来创建并启动 自定义Thread类的子类&#...
【洛谷 P1090】[NOIP... [NOIP2004 提高组] 合并果子 / [USACO06NOV] Fence Repair G ...
国民技术LPUART介绍 低功耗通用异步接收器(LPUART) 简介 低功耗通用异步收发器...
城乡供水一体化平台-助力乡村振... 城乡供水一体化管理系统建设方案 城乡供水一体化管理系统是运用云计算、大数据等信息化手段࿰...
程序的循环结构和random库...   第三个参数就是步长     引入文件时记得指明字符格式,否则读入不了 ...
中国版ChatGPT在哪些方面... 目录 一、中国巨大的市场需求 二、中国企业加速创新 三、中国的人工智能发展 四、企业愿景的推进 五、...
报名开启 | 共赴一场 Flu... 2023 年 1 月 25 日,Flutter Forward 大会在肯尼亚首都内罗毕...
汇编00-MASM 和 Vis... Qt源码解析 索引 汇编逆向--- MASM 和 Visual Studio入门 前提知识ÿ...
【简陋Web应用3】实现人脸比... 文章目录🍉 前情提要🌷 效果演示🥝 实现过程1. u...
前缀和与对数器与二分法 1. 前缀和 假设有一个数组,我们想大量频繁的去访问L到R这个区间的和,...
windows安装JDK步骤 一、 下载JDK安装包 下载地址:https://www.oracle.com/jav...
分治法实现合并排序(归并排序)... 🎊【数据结构与算法】专题正在持续更新中,各种数据结构的创建原理与运用✨...
在linux上安装配置node... 目录前言1,关于nodejs2,配置环境变量3,总结 前言...
Linux学习之端口、网络协议... 端口:设备与外界通讯交流的出口 网络协议:   网络协议是指计算机通信网...
Linux内核进程管理并发同步... 并发同步并发 是指在某一时间段内能够处理多个任务的能力,而 并行 是指同一时间能够处理...
opencv学习-HOG LO... 目录1. HOG(Histogram of Oriented Gradients,方向梯度直方图)1...
EEG微状态的功能意义 导读大脑的瞬时全局功能状态反映在其电场结构上。聚类分析方法一致地提取了四种头表面脑电场结构ÿ...
【Unity 手写PBR】Bu... 写在前面 前期积累: GAMES101作业7提高-实现微表面模型你需要了解的知识 【技...