关于Js深拷贝的三种方法详细讲解

目录

前言

一、pandas是什么?

二、使用步骤

1.利用函数递归来实现深拷贝

2.利用引入lodash包

3.利用JSON字符串转换

总结


前言

当涉及到JavaScript数据拷贝的时候,深拷贝是一个非常关键的概念。在JavaScript中,对象和数组被认为是引用类型,因此在进行赋值操作时,实际上是复制的引用而不是真正的拷贝。这就意味着当我们修改或操作某个拷贝后的对象或数组时,原始对象或数组也会被影响。

为了解决这个问题,我们可以使用深拷贝的方法来创建一个完全独立的副本,以便我们可以自由地修改或操作它,而不会影响到原始的数据。

在本文中,我们将详细讲解三种常用的JavaScript深拷贝方法,分别是递归拷贝、JSON序列化和使用第三方库。通过学习这些方法,我们将能够更好地理解深拷贝的原理以及如何在实际开发中应用它们。

让我们开始探索这三种方法,深入了解它们的优缺点以及适用场景。无论你是初学者还是有经验的开发者,相信本文都能对你有所帮助。让我们一起来掌握深拷贝的技巧,提升我们的JavaScript编程能力吧!


提示:以下是本篇文章正文内容,下面案例可供参考

一、为什么要用深拷贝?

二、使用步骤

1.利用函数递归来实现深拷贝

了解什么是递归函数:

如果一个函数在内部可以调用其本身,那么这个函数就是递归函数
 简单理解:函数内部自己调用自己, 这个函数就是递归函数
 递归函数的作用和循环效果类似
一个简单的递归函数:
 let u = 1;function pan() {console.log(`今天星期${u}`);if (u >= 7) {return;}u++;pan();}pan();

 

利用递归解释深拷贝问题:

 function deepColy(newobj, OldObj) {for (let k in OldObj) {if (OldObj[k] instanceof Array) {newobj[k] = [];deepColy(newobj[k], OldObj[k]); //再利用递归调用一下函数  []  ["小明", "小曹"]}if (OldObj[k] instanceof Object) {newobj[k] = {};deepColy(newobj[k], OldObj[k]); //再利用递归调用一下函数  {}   hoae: "河北", hoon: "邯郸",} else {//newobj[k]  创建   k 是属性名newobj[k] = OldObj[k];}}}

 

 总结:

当一个函数调用自身时,它会创建一个新的函数执行上下文,并将其添加到执行栈中。递归函数通常会包含一个或多个基本情况(base cases),用于终止递归的过程,并包含一个递归情况(recursive case),用于调用自身并不断进行计算。

递归在实现深拷贝时非常有用。在深层嵌套的对象或数组中,我们可以使用递归来遍历每个属性或元素,并进行拷贝操作。递归函数可以在遇到对象或数组时再次调用自身,以实现对嵌套层级的完全拷贝。

需要注意的是,在使用递归时,我们需要确保设置好基本情况,以避免进入无限循环的情况。此外,递归的性能可能不如迭代方式高效,因为每次调用递归函数都会创建新的函数执行上下文,消耗内存和处理时间。

2.利用引入lodash包

lodash

给大家说一下关于lodash如何使用:cmd下载方法

下载Lodash非常简单,可以使用npm(Node Package Manager)或者yarn来下载。

使用npm下载Lodash的命令是:

npm install lodash

使用yarn下载Lodash的命令是:

yarn add lodash

以上命令会自动从npm仓库下载Lodash,并将其添加到项目的依赖中。

如果你想下载Lodash的特定版本,可以使用以下命令:

使用npm下载特定版本的Lodash:

npm install lodash@版本号

使用yarn下载特定版本的Lodash:

yarn add lodash@版本号

例如,如果你想下载Lodash的4.17.21版本,可以使用以下命令:

使用npm下载Lodash 4.17.21:

npm install lodash@4.17.21

使用yarn下载Lodash 4.17.21:

yarn add lodash@4.17.21

下载完成后,你就可以在你的项目中引入和使用Lodash了。例如:

const _ = require('lodash');// 使用Lodash的函数
const result = _.capitalize('hello world');
console.log(result); // 输出:Hello world

第二利用引入js包来解决 

我已经为大家下载好 需要的私信我 

也可以去 https://www.lodashjs.com/

 <script src="../第四天/lodash.min.js"></script><script>const obj = {uname: "小明",age: 19,hooby: ["小明", "小曹"],finally: {hoae: "河北",hoon: "邯郸",},};const mang = _.cloneDeep(obj);console.log(mang);obj.finally.hoae = "四川";console.log(obj);console.log("_------------------------------------");

该处使用的url网络请求的数据。

3.利用JSON字符串转换

利用JSON字符串转换实现深拷贝的过程可以分为以下几个步骤:

  1. 首先,将需要拷贝的对象转换成JSON字符串。
const obj = { foo: 'bar', nested: { baz: 'qux' } };
const jsonString = JSON.stringify(obj);

  1. 然后,将JSON字符串转换回对象,这将创建一个新的对象。
const newObj = JSON.parse(jsonString);

  1. 现在,newObj是原始对象的深拷贝。你可以对newObj进行修改,而不会影响到原始对象。
newObj.foo = 'baz';
newObj.nested.baz = 'quux';console.log(obj.foo); // 输出:'bar'
console.log(obj.nested.baz); // 输出:'qux'
console.log(newObj.foo); // 输出:'baz'
console.log(newObj.nested.baz); // 输出:'quux'

需要注意的是,使用JSON字符串转换方法实现深拷贝有一些限制。例如,如果对象中包含函数、不可枚举的属性、循环引用等特殊情况,JSON.stringify()可能会在转换过程中丢失或无法正确处理这些数据。在这种情况下,你可能需要使用其他深拷贝方法,如递归深拷贝或第三方库。


总结

提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/334633.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python学习之路-Hello Python

Python学习之路-Hello Python Python解释器 简介 前面说到Python是解释型语言&#xff0c;Python解释器的作用就是用于"翻译"Python程序。Python规定了一个Python语法规则&#xff0c;根据该规则可编写Python解释器。 常见的Python解释器 CPython&#xff1a;官方…

2024年跨境电商上半年营销日历,建议收藏

2024年伊始&#xff0c;跨境电商开启新一轮的营销竞技&#xff0c;那么首先需要客户需求&#xff0c;节假日与用户需求息息相关&#xff0c;那么接下来小编为大家整理2024上半年海外都有哪些节日和假期&#xff1f;跨境卖家如何见针对营销日历选品&#xff0c;助力卖家把握2024…

1878_emacs company backend的选择尝试

Grey 全部学习内容汇总&#xff1a; GitHub - GreyZhang/editors_skills: Summary for some common editor skills I used. 1872_emacs company backend的选择尝试 从C语言开发的使用场景角度&#xff0c;通过测试尝试看看这个company的backend应该来如何配置。 主题由来介…

连接两个路由器的有线连法,关键时候可能会发挥不小的作用

路由器网桥连接两个或多个路由器&#xff0c;以扩展网络范围&#xff0c;提供额外的以太网端口和无线接入点。但在开始之前&#xff0c;你必须首先决定如何使用每个路由器。因此&#xff0c;你需要知道你想要实现什么&#xff0c;并清楚地了解你对每台设备的期望。 例如你想扩…

在VS Code中安装Copilot与安装其他扩展的方法一样,只需简单几步

GitHub Copilot是由OpenAI和GitHub开发的人工智能工具。它的目的是通过自动完成代码来帮助开发人员使用集成开发环境&#xff08;IDE&#xff09;&#xff0c;如Visual Studio Code。它目前仅作为技术预览版提供&#xff0c;因此只有在候补名单上被认可的用户才能访问它。对于用…

MP4转gif图片怎么操作?一个网站帮你搞定

Gif格式图片相较于视频它的体积更小&#xff0c;传播起来更方便。当我们手中有MP4格式的视频想要制作gif动画的时候应该怎么操作呢&#xff1f;通过使用mp4转换gif&#xff08;https://www.gif.cn/&#xff09;动图的工具&#xff0c;不用下载任何软件&#xff0c;手机也能在线…

基于Java SSM框架实现点餐系统网站系统项目【项目源码

基于java的SSM框架实现点餐系统网站系统演示 JAVA简介 JAVA语言是目前软件市场上应用最广泛的语言开发程序。可以在多种平台上运用的&#xff0c;兼容性比较强&#xff0c;适应市面上大多数操作系统&#xff0c;不会出现乱码的现像&#xff0c;其扩展性和维护性都更好&#xf…

09.面向对象进阶

面向对象进阶 在前面的章节我们已经了解了面向对象的入门知识&#xff0c;知道了如何定义类&#xff0c;如何创建对象以及如何给对象发消息。为了能够更好的使用面向对象编程思想进行程序开发&#xff0c;我们还需要对Python中的面向对象编程进行更为深入的了解。 property装…

Java进击框架:Spring-Web(八)

Java进击框架&#xff1a;Spring-Web&#xff08;八&#xff09; 前言DispatcherServlet拦截器异常视图解析重定向转发 语言环境日志 过滤器带注释的控制器声明映射请求其它注解验证 功能性端点URI Links异步请求CORSHTTP缓存视图技术MVC配置其他Web框架 前言 Spring Web MVC是…

亚马逊广告竞价影响大吗?亚马逊广告竞价设置方法?-站斧浏览器

亚马逊广告竞价影响大吗 频繁调整亚马逊广告竞价可能导致一些负面影响&#xff0c;包括&#xff1a; 广告权重重新评估&#xff1a; 每次调整都会导致亚马逊系统重新评估广告权重&#xff0c;如果调整后的权重下降&#xff0c;可能导致广告排名下降&#xff0c;PPC广告成本上…

24/01/09 qt work

1. 使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数 将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否为"admin"&#xff0c;密码是…

集合(二)Collection集合Set

一、无序列表Set&#xff1a; 是一个散列的集合&#xff0c;数据会按照散列值存储的&#xff0c;如两个hello的散列值相同&#xff0c;会存储在同一个地址中&#xff0c;所以看到的就是只有一个hello在集合中了。 1、Set集合有两个主要的实现子类&#xff1a;Hashset和Treeset…