JS进阶篇:数据的深浅拷贝

我不是女神ヾ 2022-09-30 12:52 132阅读 0赞

## 数据类型 ##

### 基本数据类型 ###

undefined:已声明未赋值  
null:不存在的对象

### 复杂数据类型 ###

## 简单数据类型和复杂数据类型复制的区别 ##

### 简单数据类型的复制 ###

基本数据类型的复制就是创建副本的过程，a和b占据大小相同但位置不同的内存空间。

### 复杂数据类型的复制 ###

### 对象的深拷贝 ###

蠢方法：

遍历复制对象的每个属性值

不是很蠢的方法：

<table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> 
 <tbody> 
  <tr style="background-color:rgb(249,249,249)"> 
   <td style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,&quot;PingFang SC&quot;,&quot;Microsoft YaHei&quot;,monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:10px; color:rgb(136,143,150); background:rgb(0,0,0); line-height:1.6; border:none; text-align:right">
      
       
     <div style="height:20px">
      
        
       1
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       2
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       3
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       4
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       5
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       6
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       7
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       8
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       9
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       10
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       11
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       12
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       13
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       14
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       15
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       16
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       17
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       18
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       19
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       20
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       21
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       22
      
       
     </div></pre> </td> 
   <td style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,&quot;PingFang SC&quot;,&quot;Microsoft YaHei&quot;,monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:10px; color:rgb(197,200,198); background:rgb(29,31,33); line-height:1.6; border:none">
      
       
     <div style="height:20px">
       
        
      <span style="color:rgb(178,148,187)">var</span> deepCopy = 
       
        
      <span style="color:rgb(129,162,190)"><span style="color:rgb(178,148,187)">function</span>(<span style="color:rgb(222,147,95)">source</span>)</span>{
      
       
     </div>
      
       
     <div style="height:20px">	
       
        
      <span style="color:rgb(178,148,187)">var</span> result = {};
      
       
     </div>
      
       
     <div style="height:20px"></div>
      
       
     <div style="height:20px">	
       
        
      <span style="color:rgb(178,148,187)">for</span>(
       
        
      <span style="color:rgb(178,148,187)">var</span> key 
       
        
      <span style="color:rgb(178,148,187)">in</span> source){
      
       
     </div>
      
       
     <div style="height:20px">		
       
        
      <span style="color:rgb(178,148,187)">if</span>(
       
        
      <span style="color:rgb(178,148,187)">typeof</span> source[key] === 
       
        
      <span style="color:rgb(181,189,104)">'object'</span>){
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       			result[key] = deepCopy(source[key]);
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       		}
       
        
      <span style="color:rgb(178,148,187)">else</span>{
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       			result[key] = source[key];
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       		}
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       	}
      
       
     </div>
      
       
     <div style="height:20px"></div>
      
       
     <div style="height:20px">	
       
        
      <span style="color:rgb(178,148,187)">return</span> result;
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       }
      
       
     </div>
      
       
     <div style="height:20px"></div>
      
       
     <div style="height:20px">
       
        
      <span style="color:rgb(178,148,187)">var</span> obj = {
      
       
     </div>
      
       
     <div style="height:20px">	
       
        
      <span>name</span>:
       
        
      <span style="color:rgb(181,189,104)">'zhq'</span>,
      
       
     </div>
      
       
     <div style="height:20px">	
       
        
      <span>age</span>:
       
        
      <span style="color:rgb(181,189,104)">24</span>
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       }
      
       
     </div>
      
       
     <div style="height:20px"></div>
      
       
     <div style="height:20px">
       
        
      <span style="color:rgb(178,148,187)">var</span> obj2 = deepCopy(obj);
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       obj2.name = 
       
        
      <span style="color:rgb(181,189,104)">'kobe'</span>;
      
       
     </div>
      
       
     <div style="height:20px">
       
        
      <span style="color:rgb(222,147,95)">console</span>.log(obj.name);   
       
        
      <span style="color:rgb(150,152,150)">//zhq</span>
      
       
     </div></pre> </td> 
  </tr> 
 </tbody> 
</table>

## 对象包括数组的深拷贝 ##

<table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> 
 <tbody> 
  <tr style="background-color:rgb(249,249,249)"> 
   <td style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,&quot;PingFang SC&quot;,&quot;Microsoft YaHei&quot;,monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:10px; color:rgb(136,143,150); background:rgb(0,0,0); line-height:1.6; border:none; text-align:right">
      
       
     <div style="height:20px">
      
        
       1
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       2
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       3
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       4
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       5
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       6
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       7
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       8
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       9
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       10
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       11
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       12
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       13
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       14
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       15
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       16
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       17
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       18
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       19
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       20
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       21
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       22
      
       
     </div></pre> </td> 
   <td style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,&quot;PingFang SC&quot;,&quot;Microsoft YaHei&quot;,monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:10px; color:rgb(197,200,198); background:rgb(29,31,33); line-height:1.6; border:none">
      
       
     <div style="height:20px">
       
        
      <span style="color:rgb(222,147,95)">Object</span>.prototype.deepCopy=
       
        
      <span style="color:rgb(129,162,190)"><span style="color:rgb(178,148,187)">function</span>(<span style="color:rgb(222,147,95)"></span>)</span>{
      
       
     </div>
      
       
     <div style="height:20px">    
       
        
      <span style="color:rgb(178,148,187)">var</span> obj=
       
        
      <span style="color:rgb(222,147,95)">null</span>;
       
        
      <span style="color:rgb(150,152,150)">//用于最后返回一个对象，这个对象是深复制的结果</span>
      
       
     </div>
      
       
     <div style="height:20px">    
       
        
      <span style="color:rgb(178,148,187)">for</span>(
       
        
      <span style="color:rgb(178,148,187)">var</span> attr 
       
        
      <span style="color:rgb(178,148,187)">in</span> 
       
        
      <span style="color:rgb(178,148,187)">this</span>){
       
        
      <span style="color:rgb(150,152,150)">//遍历这个对象的每一个属性</span>
      
       
     </div>
      
       
     <div style="height:20px">        
       
        
      <span style="color:rgb(178,148,187)">if</span>(
       
        
      <span style="color:rgb(178,148,187)">this</span>.hasOwnProperty(attr)){
       
        
      <span style="color:rgb(150,152,150)">//主要是递归自有属性</span>
      
       
     </div>
      
       
     <div style="height:20px">            
       
        
      <span style="color:rgb(178,148,187)">if</span>(
       
        
      <span style="color:rgb(178,148,187)">typeof</span> (
       
        
      <span style="color:rgb(178,148,187)">this</span>[attr]===
       
        
      <span style="color:rgb(181,189,104)">'object'</span>)){
       
        
      <span style="color:rgb(150,152,150)">//如果对象的属性是一个对象，就递归复制它的每一个属性</span>
      
       
     </div>
      
       
     <div style="height:20px">                
       
        
      <span style="color:rgb(178,148,187)">if</span>(
       
        
      <span style="color:rgb(178,148,187)">this</span>[attr]===
       
        
      <span style="color:rgb(222,147,95)">null</span>){
       
        
      <span style="color:rgb(150,152,150)">//如果对象为null</span>
      
       
     </div>
      
       
     <div style="height:20px">
      
        
                           obj[attr]=
       
        
      <span style="color:rgb(222,147,95)">null</span>;
      
       
     </div>
      
       
     <div style="height:20px">
      
        
                       }
       
        
      <span style="color:rgb(178,148,187)">else</span> 
       
        
      <span style="color:rgb(178,148,187)">if</span>(
       
        
      <span style="color:rgb(222,147,95)">Object</span>.prototype.toString(
       
        
      <span style="color:rgb(178,148,187)">this</span>[attr])===
       
        
      <span style="color:rgb(181,189,104)">'[object Array]'</span>){
       
        
      <span style="color:rgb(150,152,150)">//如果是个数组</span>
      
       
     </div>
      
       
     <div style="height:20px">
      
        
                           obj[attr]=[];
      
       
     </div>
      
       
     <div style="height:20px">                    
       
        
      <span style="color:rgb(178,148,187)">for</span>(
       
        
      <span style="color:rgb(178,148,187)">var</span> i=
       
        
      <span style="color:rgb(181,189,104)">0</span>;i&lt;
       
        
      <span style="color:rgb(178,148,187)">this</span>[attr].length;i++){
      
       
     </div>
      
       
     <div style="height:20px">
      
        
                               obj[attr].push(
       
        
      <span style="color:rgb(178,148,187)">this</span>[attr][i].deepCopy());
      
       
     </div>
      
       
     <div style="height:20px">
      
        
                           }
      
       
     </div>
      
       
     <div style="height:20px">
      
        
                       }
       
        
      <span style="color:rgb(178,148,187)">else</span>{
       
        
      <span style="color:rgb(150,152,150)">//object</span>
      
       
     </div>
      
       
     <div style="height:20px">
      
        
                           obj[attr]=
       
        
      <span style="color:rgb(178,148,187)">this</span>[attr].deepCopy();
      
       
     </div>
      
       
     <div style="height:20px">
      
        
                       }
      
       
     </div>
      
       
     <div style="height:20px">
      
        
                   }
       
        
      <span style="color:rgb(178,148,187)">else</span>{
      
       
     </div>
      
       
     <div style="height:20px">
      
        
                       obj[attr]=
       
        
      <span style="color:rgb(178,148,187)">this</span>[attr];
      
       
     </div>
      
       
     <div style="height:20px">
      
        
                   }
      
       
     </div>
      
       
     <div style="height:20px">
      
        
               }
      
       
     </div>
      
       
     <div style="height:20px">
      
        
           }
      
       
     </div>
      
       
     <div style="height:20px">    
       
        
      <span style="color:rgb(178,148,187)">return</span> obj;
      
       
     </div>
      
       
     <div style="height:20px">
      
        
       }
      
       
     </div></pre> </td> 
  </tr> 
 </tbody> 
</table>

个人建了前端学习群，旨在一起学习前端。纯净、纯粹技术讨论，非前端人员勿扰！入群加我[微信][Link 1]：iamaixiaoxiao。

![1460000008545203_w_276_h_261][]

[Link 1]: http://lib.csdn.net/base/wechat
[1460000008545203_w_276_h_261]: /images/20220705/98399ef475214e25b18741f4bfc6f19b.png