JavaScript深拷贝（js深拷贝，JavaScript递归函数，实现深拷贝）

2024-04-10 02:37:10

简述：JavaScript的深拷贝和浅拷贝大家都比较熟悉，今天来分享下深拷贝，就是使用该函数时，会复制拷贝一份该数据，修改该数据属性，不会改变原有数据，就是把复制的对象所引用的对象全都复制了一遍，具体实现如下；

1、定义拷贝对象；

var oldObj = {name: "张三",age: 18,colors: ["skyblue", 'plum', "pink"],status: {hobby: "study",}
}

2、定义递归函数deepClone()，实现深拷贝，方便调用；

function deepClone(obj) {//判断传进来的参数类型不是对象数组 或者是null时 直接返回if (typeof obj !== "object" || obj == null) {return obj}//定义返回值let result;// 判断传进来的数据类型 是数组/对象 就给result一个数组/对象if (obj instanceof Array) {result = []} else {result = {}}//循环遍历方便拷贝for (let key in obj) {//判读自有属性if (obj.hasOwnProperty(key)) {//函数递归实现深层拷贝result[key] = deepClone(obj[key])}}//返回出去return result
}//优化
function deepClone(obj) {//判断传进来的参数类型不是对象数组 或者是null时 直接返回if (typeof obj !== "object" || obj == null) {return obj}//定义返回值result// 判断传进来的数据类型 是数组/对象 就给result一个数组/对象let result = Array.isArray(obj) ? [] : {};//循环遍历方便拷贝for (let key in obj) {//判读自有属性if (obj.hasOwnProperty(key)) {//函数递归实现深层拷贝result[key] = deepClone(obj[key])}}//返回出去return result
}

2.1、obj instanceof Array 和 Array.isArray(obj)都是检测对象是否是一个数组的方法，更多判断数组的方法，详见

判断数组的7种方法https://blog.csdn.net/weixin_65793170/article/details/127082200?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167901515816800222886256%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=167901515816800222886256&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-2-127082200-null-null.blog_rank_default&utm_term=%E6%95%B0%E7%BB%84&spm=1018.2226.3001.4450

3、调用函数，实现递归深拷贝；

const newObj = deepClone(oldObj);
//检验拷贝结果
newObj.name = "李四";
newObj.status.hobby = "敲代码";
newObj.colors[2] = "purple";
console.log("oldObj", oldObj);
console.log("newObj", newObj);

3.1、输出结果，未改变原有嵌套层级较深的数据，递归函数，深拷贝成功；

4、具体使用，可以直接在项目中新建js文件导出该方法，然后引入使用，方便实现数据深拷贝：

1、导出：export function deepClone(obj) { ... }2、引入：import { deepClone } from "../utils/clone.js"；3、使用：const data = deepClone(this.obj)        console.log(data);

方便了很，哈哈，点赞收藏呀(●'◡'●)......

JavaScript深拷贝（js深拷贝，JavaScript递归函数，实现深拷贝）相关推荐

二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象控制HTML元素
1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...
js 浅拷贝直接赋值_js 深拷贝 vs 浅拷贝
本文主要讲一下 js 的基本数据类型以及一些堆和栈的知识和什么是深拷贝.什么是浅拷贝.深拷贝与浅拷贝的区别,以及怎么进行深拷贝和怎么进行浅拷贝. 本文思维导图如下:本文思维导图堆和栈的区别其实深拷 ...
实现深拷贝还在用JSON.parse(JSON.stringfy(obj))？带你用JS实现一个完整版深拷贝函数
实现深拷贝还在用JSON.parse(JSON.stringify(obj))?带你用JS实现一个完整版深拷贝函数目录实现深拷贝还在用JSON.parse(JSON.stringify(obj)) ...
一文搞懂JS中的赋值·浅拷贝·深拷贝
前言为什么写拷贝这篇文章?同事有一天提到了拷贝,他说赋值就是一种浅拷贝方式,另一个同事说赋值和浅拷贝并不相同.我也有些疑惑,于是我去MDN搜一下拷贝相关内容,发现并没有关于拷贝的实质概念,没有办法只 ...
JS（JavaScript）中实现深浅拷贝的几种方式（详细阅读非常重要）。
在了解深浅拷贝之前,我们先一起来简单来了解一下,JavaScript 数据存储的方式,以及数据类型(). JavaScript 中数据存储分为简单数据类型和复杂数据类型(引用数据类型) 其中 5 种 ...
如何使用 Javascript/node.js 在 WebRTC 中构建音视频通话APP？
语音和视频通信的嵌入对于现在的互联网产品发展的重要性已经毋庸置疑,WebRTC 事实上是一种通用的技术框架标准,它可以在浏览器之间不需要中介的情况下,实现任意数据流交换.这使得 web 应用程序和移动 ...
【JavaScript】JS事件机制学习
常用的事件通过事件机制,达到与用户的交互,与java的swing交互类似. 主要是结合js的函数使用. 当你添加一个事件之后没有达到想要的效果时,就要检查一下是不是给HTML标签添加了合适的事件,以 ...
JavaScript（JS）常用正则表达式汇总
文章目录自定义字符串校验函数常用正则表达式自定义字符串校验函数校验字符串是否全由数字组成,是则返回true,否则返回false: function isDigit(str) {var regE ...
初学JavaWeb需要的前端js，JavaScript是什么样的？
文章目录一.JavaScript简介二.HelloWorld 三.JavaScript基本语法四.DOM 五.JavaScript事件驱动六.网页制作完全手册分享关于HTML和css详见:& ...
韩顺平轻松搞定网页设计(html+css+js),韩顺平轻松搞定网页设计方案(html+css+js)之javascript现场授课笔记(完整版).doc...
2011韩顺平轻松搞定网页设计(html+css+js)之 javascript现场授课笔记(完整版) 视频18整和19的前半部分不用看 Javascript的基本介绍 JS是用于WEB开发的脚本语言 ...

最新文章

热门文章