前端:深拷贝的多种方法(超全详解)

这篇具有很好参考价值的文章主要介绍了前端:深拷贝的多种方法(超全详解)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        别划走 !走过路过不要错过;错过这个村,我在下一个村等你!坚持每天进步一点点;一天两天可能没发现有效果;但一年365天后你将会感谢今天的自己!!!

       今天博主带大家了解一下前端常用的深拷贝方法:(超全详解)

       我们先举个例子:说说深拷贝的作用是什么?

一、 JSON.parse(JSON.stringify(xxx))

	var p = {
				"id":"007",
				"name":"刘德华",
				"wife":{
					"id":"008",
					"name":"刘德的妻子",
					"address":{
						"city":"北京",
						"area":"海淀区"
					}
				}
	}
		let p1 = JSON.parse(JSON.stringify(p));  // 这是第一种方法
		p1.name ='周星驰';
		console.log(p1.name)  // 周星驰
		console.log(p.name)   // 刘德华

		let p2 = p;
		p2.name ='周星驰';
		console.log(p2.name)  // 周星驰
		console.log(p.name)   // 周星驰

       这里我们就能够很明显的看出如果我们直接用等号赋值的话,我们的源对象里面的属性也会随着我们赋值对象属性改变而改变,这对于我们备份数据来说,这显然是不可取的。

      我们用JSON.parse(JSON.stringify(xxx))的话可以实现深拷贝,从而达到我们前端的数据备份,但这个方法使用的时候容易导致一些特殊类型的数据丢失和损坏。

例如:如果obj里有RegExp、Error对象,则序列化的结果将只得到空对象;如果obj里有函数,undefined,则序列化的结果会把函数或 undefined丢失等等。为了能够很好的避免以及面对可能出现的未知可能性,博主带大家拓展一下我们的知识小宝库,所谓学到老;活到老嘛。

二、 . . .xxx(扩展属性)  用这个方法的时候请注意一下博主写的案例;里面有点点需要注意的地方

	// 如果需要拷贝对象只有一层
	var p = {
					"id":"007",
					"name":"刘德华",
					"wife":'刘德的妻子'
			};
        let p1 ={...p};
        p1.name ='周星驰';
		console.log(p1.name)  // 周星驰
	    console.log(p.name)   // 刘德华

    // 如果需要拷贝的对象有两层或者多层
	var p = {
				"id":"007",
				"name":"刘德华",
				"wife":{
					"id":"008",
					"name":"刘德的妻子",
					"address":"北京"
				}
	    }
		let p2 ={...p};
    	p2.name ='周星驰';
		p2.wife.name='请注意'
		console.log(p2.name,p2.wife.name)  // 周星驰,请注意
		console.log(p.name,p.wife.name)    // 刘德华,请注意

    
		// let p2 = {}
		// for(let key in p){
		// 	p2[key] = {...p[key]}
		// }
		// p2.name ='周星驰';
		// p2.wife.name='请注意'
		// console.log(p2.name,p2.wife.name)  // 周星驰,请注意
		// console.log(p.name,p.wife.name)    // 刘德华,刘德的妻子

       ...这个语法是es6的语法糖,如果不是很理解的小伙伴建议百度查询一下学习要与时俱进。案例博主这里只列举了两层,多层的博主这里就没写了,主要目的就是想要大家知道使用这个方法前需要注意的事项,那如果工作中遇到多层的对象拷贝不会了怎么办?别慌往下看,博主会为大家仔细讲解的,等一下看完了博主介绍的其他方法再回来想想,我猜这就不是问题了。

三、Object.assign()

 // 看过方法二的应该知道,这个方法博主也只列举了单层
	var p = {
				"id":"007",
				"name":"刘德华",
				"wife":'刘德的妻子'
	    }
		let p3 = {};
		for(let key in p){
	      p3 = Object.assign(p3,{[key]:p[key]})
		}
		p3.name ='周星驰';
		p3.wife ='请注意'
		console.log(p3.name,p3.wife)  // 周星驰,请注意
		console.log(p.name,p.wife)    // 刘德华,刘德的妻子

       这个方法博主只简单列举了一下,如果数据类型是单层嵌套的对象可以拿过去直接用,学到这里我们已经知道了3种可以深拷贝的方法了,但为了保证能够扩展大家的知识库,博主这里在列举一些;创作不易,如果觉得还不错的伙伴们给博主一个支持,点点你们手中的小爱心,祝大家每天开开心心!哈哈哈插曲已过,下面我们精彩继续。

$.extend(这个方法需要在 jquery 环境下使用哦)

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
	var p = {
				"id":"007",
				"name":"刘德华",
				"wife":'刘德的妻子'
	    }
		let p4 = $.extend(true,{},p)
		p4.name ='周星驰';
		p4.wife ='请注意'
		console.log(p4.name,p4.wife)  // 周星驰,请注意
		console.log(p.name,p.wife)    // 刘德华,刘德的妻子

        方法4我就不做过多的介绍了,下面我们了解一下我们的方法。

原生手写拷贝(这里讲到了上面多层对象嵌套的处理方法


	var p = {
				"id":"007",
				"name":"刘德华",
				"wife":{
					"id":"008",
					"name":"刘德的妻子",
					"address":{
						"city":"北京",
						"area":"海淀区"
					}
				}
	    }	 
		//写函数
		function copyObj(obj){
			let newObj={};
			for(let key in obj){
				if(typeof obj[key] =='object'){//如:key是wife,引用类型,那就递归
					newObj[key] = copyObj(obj[key])
				}else{//基本类型,直接赋值
					newObj[key] = obj[key];
				}
			}
			return newObj;
		}
		let p5 = copyObj(p);
		p5.name = '周星驰';
		p5.wife.name ='朱茵'
		p5.wife.address.city='上海'
		console.log(p5.name,p5.wife.name,p5.wife.address.city) // 周星驰 朱茵 上海
		console.log(p.name,p.wife.name,p.wife.address.city)    // 刘德华 刘德的妻子 北京

     方法五里面的递归方法就是深拷贝重要的实现原理,也是上面多层级嵌套拷贝的重要解决方法,所以其实如果你不是特别喜欢运用简写的话,了解一下方法5的实现逻辑,这样的话下次你对深拷贝的运用就一点问题也没有啦!

      前端还有很多深拷贝的方法,就不一 一列举了;相信如果这几种方法都了解了;深拷贝也不算是问题了;快乐的时光总是短暂的,学海无涯!博主在这里预祝小伙伴们 "长风破浪会有时,直挂云帆济沧海"

前端:深拷贝的多种方法(超全详解)文章来源地址https://www.toymoban.com/news/detail-464150.html

到了这里,关于前端:深拷贝的多种方法(超全详解)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • AI绘画Stable Diffusion 高清放大,多种方法详解,建议收藏!

    在Stable Diffusion我们想要得到一张高分辨率且具有细节特征的图片时,我们就需要使用一些图片放大算法来帮助我们实现。 本文主要概述在sd中常常使用的高清修复方法以及不同方法的区别和应用场景。同时也给出一些推荐的工作流,你可以根据自己的情况来选择适合你的。

    2024年04月16日
    浏览(45)
  • chatgpt赋能python:Python数组合并操作详解-多种方法实现

    在Python编程中,数组合并是一种非常常见的操作。数组合并操作可以将两个或多个数组简单的合并为一个数组,这样可以方便的对数据进行处理。Python提供了多种方法用于数组合并,下面将对多种实现方法进行介绍。 在Python中,使用“+”操作符可以对两个数组进行简单的拼

    2024年02月14日
    浏览(55)
  • 【学习经验分享NO.16】超全代码-python画Sigmoid,ReLU,Tanh等十多种激活函数曲线及其梯度曲线(持续更新)

    激活函数是一种特殊的非线性函数,它能够在神经网络中使用,其作用是将输入信号转化成输出信号。它将神经元中的输入信号转换为一个有意义的输出,从而使得神经网络能够学习和识别复杂的模式。常用的激活函数有 Sigmoid、ReLU、Leaky ReLU 和 ELU 等。大论文理论部分需要介

    2023年04月08日
    浏览(53)
  • JavaScript之深度克隆、多种实现方式、列举各种方式的优缺点、对象自有属性、拷贝、复制

    在 JavaScript 中,对象和数组是引用类型,当将一个对象或数组赋值给另一个变量时,它们实际上是共享同一块内存空间。这意味着对一个对象或数组的修改会影响到所有引用它的变量。 为了创建一个独立的副本,可以使用深克隆。 JSON.stringify() 方法将 JavaScript 对象转换为一个

    2024年02月02日
    浏览(43)
  • html中的“居中”问题详解(超全)

    引言: 在网页设计和开发中,实现元素的居中是一个常见但也常被低估的挑战。无论是在传统的网页布局中还是在响应式设计中,居中都是一个重要的考虑因素。本文旨在为读者提供全面的指南,解决HTML中各种居中问题,使他们能够轻松地实现各种居中布局。 水平居中:给

    2024年04月13日
    浏览(37)
  • Array.from() 超全用法详解

    Array.from 方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。 下面是一个类似数组的对象, Array.from 将它转为真正的数组。 实际应用中,常见的类似数组的对象是 DOM 操作返回的 NodeList 集合

    2024年02月04日
    浏览(36)
  • 前端面试题---深拷贝、浅拷贝的实现和解构赋值

    在 JavaScript 中实现深拷贝和浅拷贝可以采用不同的方法。下面分别介绍这两种拷贝方式的实现方式 1.浅拷贝(Shallow Copy) 浅拷贝(shallow copy)是一种复制对象或数组的操作,创建一个新的对象或数组,并将原始对象或数组的属性或元素的引用复制到新的对象或数组中。这意味

    2024年02月08日
    浏览(85)
  • 【超全详解一文搞懂】Scala基础

    Scala是Spark的基础,我们需要研究将大数据引入到Spark的特定架构。 Scala集合很重要 作为数据结构,解决存储问题 包含了大量算子、解决问题的库 由于Scala集合很多,我们在学习的时候,需要先学一个作为共性 然后在掌握差异化的部分(其实高级程序语言不是很依赖差异化的数

    2024年03月28日
    浏览(37)
  • Java 中的泛型(两万字超全详解)

    博主将用 CSDN 记录 Java 后端开发学习之路上的经验,并将自己整理的编程经验和知识分享出来,希望能帮助到有需要的小伙伴。 博主也希望和一直在坚持努力学习的小伙伴们共勉!唯有努力钻研,多思考勤动手,方能在编程道路上行至所向。 由于博主技术知识有限,博文中

    2024年02月04日
    浏览(45)
  • Java 中的反射机制(两万字超全详解)

    反射( Reflection ),Java 中的反射机制是指,Java 程序在运行期间可以获取到一个对象的全部信息。 反射机制 一般用来解决Java 程序运行期间,对某个实例对象一无所知的情况下,如何调用该对象内部的方法问题。 反射机制允许 Java 程序在运行时调用 Reflection API 取得任何类的

    2024年02月05日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包