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

已于 2024-07-12 09:51:44 修改
阅读量1.4w 收藏 11
点赞数 1
分类专栏： JavaScript 文章标签： javascript
于 2022-11-16 00:54:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65793170/article/details/127876864
版权

简述：JavaScript的深拷贝和浅拷贝大家都比较熟悉，就是调用该函数时，会复制拷贝一份该数据，修改该数据属性，不会改变原有数据，就是把复制的对象所引用的对象全都复制了一遍。这里来记录一下深拷贝函数

 

JavaScript ～ 第 4 篇   ——   JavaScript深拷贝函数

如何实现JavaScript深拷贝函数？

一. 定义拷贝对象

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

二. 定义递归函数deepClone()，实现深拷贝，方便调用


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  北城笑笑
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    11
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  5
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
JavaScript深拷贝的方法

				
			

			

				

					从来无所求，所得皆惊喜！
				

				

					03-20
					
					2462
					
				

			

		

		

			
				
深拷贝会将原始对象及其所有子对象都复制到堆中，并返回一个指向新对象的引用。这样，新的对象与原始对象之间**不存在任何关联**，修改其中一个对象不会影响另一个对象。

			
		

	



                

              
                



	

		

			

				
					
deep-copy-ts:typescriptjavascript的递归深拷贝、克隆和浅拷贝函数

				
			

			

				

					06-27
				

			

		

		

			
				
在JavaScript中，可以使用JSON的`parse()`和`stringify()`方法，或者第三方库如lodash的`_.cloneDeep()`来实现深拷贝。  "deep-copy-ts"项目提供了一种递归的深拷贝实现，它能处理复杂的数据结构，包括含有循环引用...

			
		

	



                


  
              

                


	

		

			

				
					
JS深拷贝、浅拷贝 和 使用场景 详解

				
			

			

				

					沐枫
				

				

					10-24
					
					8381
					
				

			

		

		

			
				
当对某个数据（数组或对象）进行拷贝后，修改新数据（拷贝后的数据）里面第1层的数据是不会影响老数据（被拷贝的数据）的，但是如果还要第2层 或 更深层次的数据（复杂数据类型），它仍然是有关联的，如果修改了新数据，那么老数据也会被修改。表示传递的是变量所在的内存地址【内存地址：也就是所谓的指针】（就是当一个变量的值 赋给 另一个新变量的时候，新变量修改了值，那么原来变量的值也会被修改，因为它们是同一个内存地址，所以一改全改）比如：想对某个数组 或 对象的值进行修改，但是又想保留原来数组 或 对象的值不被修改！

			
		

	





	

		

			

				
					
关于JS实现深拷贝的几种方法

				
			

			

				

					hdxx2022的博客
				

				

					08-06
					
					2353
					
				

			

		

		

			
				
那么到这里，我们知道了深拷贝与浅拷贝的区别，同时从数据存储规则来解释，也明白了为什么要使用深拷贝；其次，我们知道了几种简单粗暴的深拷贝办法，也明白在何种情况下我们应该使用深拷贝。到此这篇关于JS实现深拷贝的文章就介绍到这了，希望对大家的学习有所帮助。转自：微点阅读。

			
		

	



		

			
		



	

		

			

				
					
手写实现深拷贝deepClone(考虑循环引用引入weakMap())

					
最新发布

				
			

			

				

					Tian_std_scu的博客
				

				

					04-26
					
					564
					
				

			

		

		

			
				
手写实现深拷贝deepClone,考虑循环引用，引入weakMap()

			
		

	





	

		

			

				
					
详解js中的浅拷贝与深拷贝

				
			

			

				

					DZQ1223的博客
				

				

					05-30
					
					3714
					
				

			

		

		

			
				
栈(stack):由操作系统自动分配释放 ，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈；堆(heap)：一般由程序员分配释放， 若程序员不释放，程序结束时可能由OS回收，分配方式倒是类似于链表浅拷贝就是只拷贝基础数据类型的数据，并且数据只有单一的一层，而深拷贝用于拷贝具有复杂的数据类型的数据。

			
		

	





	

		

			

				
					
deepClone深拷贝函数

				
			

			

				

					Henrybalabl的博客
				

				

					03-22
					
					2316
					
				

			

		

		

			
				
//params  obj:目标值
        deepClone(obj,hash = new WeakMap()){
          // null
            if(obj === null) return obj
            // date
            if(obj instanceof Date) return new Date(obj)
            // reg
            if(obj instanceof ...

			
		

	





	

		

			

				
					
递归实现深拷贝

				
			

			

				

					weixin_43456275的博客
				

				

					11-08
					
					135
					
				

			

		

		

			
				
文章目录一、递归实现深拷贝


一、递归实现深拷贝
function copyData(obj) {
	if (!obj|| typeof obj !== 'object') {
		return false
	}
	let newObj = obj instanceof Array?[]:{}
	// 用for in 循环对象  但他会枚举到原型的属性
	for (let key in obj) {
		// hasOwnProperty过滤掉原型上的属性
		if (obj.hasOwnProperty

			
		

	





	

		

			

				
					
JavaScript基于遍历操作实现对象深拷贝功能示例

				
			

			

				

					10-17
				

			

		

		

			
				
本篇文章将深入探讨如何基于遍历操作实现JavaScript对象的深拷贝。  首先，我们需要一个函数来确定变量的类型。在提供的代码中，`getType` 函数用于获取传入对象的类型，考虑到了 `typeof` 的特殊情况，如数组和null...

			
		

	





	

		

			

				
					
JavaScript实现浅拷贝与深拷贝的方法分析

				
			

			

				

					12-01
				

			

		

		

			
				
 一些库如lodash提供了`_.cloneDeep()`函数来实现深拷贝，而ES6的`Object.assign()`和`Map`、`Set`的构造函数也可以帮助实现深拷贝，但都需要配合其他方法处理复杂情况。  8. **通用深拷贝函数**：  编写一个通用的...

			
		

	





	

		

			

				
					
javascript深拷贝的原理与实现方法分析

				
			

			

				

					10-20
				

			

		

		

			
				
JavaScript中的深拷贝还可以通过其他方式实现，如使用JSON对象的`parse`和`stringify`方法，或者利用第三方库如lodash的`_.cloneDeep`方法。但是需要注意的是，这些方法可能存在一些限制，例如不能处理函数、循环...

			
		

	





	

		

			

				
					
javascript深拷贝

				
			

			

				

					08-10
				

			

		

		

			
				
javascript深拷贝demo，有封装好的深拷贝函数和调用的demo

			
		

	





	

		

			

				
					
Javascript 浅拷贝、深拷贝的实现代码

				
			

			

				

					10-30
				

			

		

		

			
				
一个简单的深拷贝实现可以使用JSON.parse 和 JSON.stringify 方法，但这有局限性，因为它无法处理函数、循环引用或日期等复杂对象：  ```javascript function deepCopy(obj) {  return JSON.parse(JSON.stringify...

			
		

	





	

		

			

				
					
js递归方式实现深拷贝

				
			

			

				

					JiaPeng366的博客
				

				

					06-06
					
					2250
					
				

			

		

		

			
				
上篇文章提到了对象的浅拷贝和深拷贝，当时深拷贝使用的是最简单的方法，如下
JSON.parse(JSON.stringify(obj))
这个方法能实现简单数据的深拷贝，但是对于复杂对象还是有局限性的，比如说会把时间对象转化成字符串，会丢失函数等等。
今天亲自封装一个方法，来实现深拷贝。原理就是先判断各个字段类型，然后用递归解决嵌套数据。
// 获取数据类型， js获取数据类型也有很多方法，我用了比较严谨的方法。
const getObjType = obj => {
  var toString =

			
		

	





	

		

			

				
					
JS数组和对象的深拷贝方法

				
			

			

				

					drakseason的博客
				

				

					07-25
					
					1112
					
				

			

		

		

			
				
在学习JS数组和对象的深拷贝方法前，我们必须了解JS的变量存储方式，这样才能更好的了解深浅拷贝！栈：自动分配内存空间，系统自动释放，里面存放的是基本类型的值和引用类型的地址（指针）。堆：动态分配的内存，大小不定，也不会自动释放，里面存放引用类型的值。目前只是一些比较简单的深拷贝方法，还有其他深拷贝方法，未完待续…JS 的变量存储方式： 栈（stack）和堆（heap）。

			
		

	





	

		

			

				
					
js 对象拷贝的三种方法，深拷贝函数。

				
			

			

				

					slongzhang的博客
				

				

					07-11
					
					4769
					
				

			

		

		

			
				
js 对象拷贝的三种方法
以下面数据格式obj 为主：
const obj = {
    data: 1,
    un: undefined,
    info: {
      d: 2
    },
    fn: function() {
      console.log('Function')
    },
    get c() {
      return info.d
    }
  }

方法一、Object.assign
const ObjA = Object.assign({}, 

			
		

	





	

		

			

				
					
手写实现深拷贝函数

				
			

			

				

					zep
				

				

					03-16
					
					2884
					
				

			

		

		

			
				
对象相互赋值的一些关系，分别包括：

引入的赋值：指向同一个对象，相互之间会影响；
对象的浅拷贝：只是浅层的拷贝，内部引入对象时，依然会相互影响；
对象的深拷贝：两个对象不再有任何关系，不会相互影响；


可以通过JSON.parse来实现深拷贝，但存在以下弊端：

这种深拷贝的方式其实对于函数、Symbol等是无法处理的；
并且如果存在对象的循环引用，也会报错的；



一、简单的深拷贝函数实现
自定义深拷贝的基本功能：


二、对其他数据类型的值进行处理
包括：数组、函数、Symbol、Set、Map.

			
		

	





	

		

			

				
					
deepclone 克隆函数

				
			

			

				

					包磊磊的博客
				

				

					11-07
					
					301
					
				

			

		

		

			
				
loadsh 是不克隆函数的，将返回 {}。 因为克隆函数没有实际意义，公用同一个函数也没问题。 而且涉及到 科里化，this，闭包等问题，无法克隆相等价值的函数。 ​

但是面试会问，还是要克隆一个。

克隆函数


new Function('return ' + fn.toString())() 
// 或者
eval(`(${fn.toString()})`)

...

			
		

	





	

		

			

				
					
浅谈深拷贝和浅拷贝（js）

					
热门推荐

				
			

			

				

					GuoZebin的博客
				

				

					10-05
					
					2万+
					
				

			

		

		

			
				
如何区分深拷贝与浅拷贝？简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明是浅拷贝，如果B没变，那就是深拷贝。深入点来说，就是B复制了A，如果B复制的是A的引用，那就是浅拷贝，如果B复制的是A的本体，那就是深拷贝。在深入了解深拷贝和浅拷贝之前，我们先得了解堆栈和数据类型。

一.堆栈和数据类型

在js中，数据类型分为两种，基本类型和引用类型。基本类型指的是简单...

			
		

	





	

		

			

				
					
js使用递归函数实现数组的深拷贝

				
			

			

				

					11-23
				

			

		

		

			
				
以下是使用递归函数实现JavaScript数组深拷贝的代码示例：

```javascript
function deepCopy(arr) {
  let copyArr = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      copyArr[i] = deepCopy(arr[i]);
    } else {
      copyArr[i] = arr[i];
    }
  }
  return copyArr;
}
```

这个函数接受一个数组作为参数，并返回一个深拷贝的数组。它使用递归来遍历数组中的每个元素，如果元素本身是一个数组，则递归调用`deepCopy`函数来深拷贝这个数组，否则直接将元素复制到新数组中。

注意，这个函数只能用于纯数组，如果数组中包含对象或其他非基本类型的数据，需要进行额外的处理。



			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 5

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
北城笑笑

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值