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

不念不忘少年蓝@ 2022-10-04 15:50 373阅读 0赞

## 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({ }, obj)
    ObjA.data = 'a'
    ObjA.info.d = 'b'
    
    const ObjB = Object.assign({ }, obj)
    ObjB.data = 'c'
    ObjB.info.d = 'd'
    
    console.log(ObjA)
    console.log(ObjB)
    /* ==========输出========== { data: 'a', info: { d: 'd' }, un: undefined, fn: [Function: fn] } { data: 'c', info: { d: 'd' }, un: undefined, fn: [Function: fn] } */

我们会发现info.d 内容相等，说明Object.assign无法拷贝深层次内容,适用于浅层拷贝。

### 方法二、JSON.stringify & JSON.parse ###

const ObjA = JSON.parse(JSON.stringify(obj))
    ObjA.data = 'a'
    ObjA.info.d = 'b'
    
    const ObjB = JSON.parse(JSON.stringify(obj))
    ObjB.data = 'c'
    ObjB.info.d = 'd'
    console.log(ObjA)
    console.log(ObjB)
    
    /* ==========输出========== { data: 'a', info: { d: 'b' }, c: 2 } { data: 'c', info: { d: 'd' }, c: 2 } */

我们将源对象转换为字符串,再转换为新对象虽然解决了深层次拷贝的问题，但我们会发现对象中的Function和undefined 无法拷贝，并且将c: \[Getter\] 直接转换成了键值对 c:2。

### 方法三、Object.create ###

const ObjA = Object.create(obj)
    ObjA.data = 'a'
    ObjA.info.d = 'b'
    
    const ObjB = Object.create(obj)
    ObjB.data = 'c'
    ObjB.info.d = 'd'
    
    console.log(ObjA)
    console.log(ObjB)
    console.log(ObjA.__proto__)
    console.log(ObjB.__proto__)
    /* ==========输出========== { data: 'a' } { data: 'c' } { data: 1, info: { d: 'd' }, fn: [Function: fn], c: [Getter] } { data: 1, info: { d: 'd' }, fn: [Function: fn], c: [Getter] } */

Object.create 原型链继承，也可以达到内容浅层拷贝。

总结：

<table> 
 <thead> 
  <tr> 
   <th>赋值</th> 
   <th>浅层拷贝</th> 
   <th>深层拷贝</th> 
   <th>getter/setter</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Object.assign</td> 
   <td><font>ok</font></td> 
   <td>no</td> 
   <td>no</td> 
  </tr> 
  <tr> 
   <td>JSON.stringify</td> 
   <td><font>ok</font></td> 
   <td><font>ok</font></td> 
   <td>no</td> 
  </tr> 
  <tr> 
   <td>Object.create</td> 
   <td><font>ok</font></td> 
   <td>no</td> 
   <td><font>ok</font></td> 
  </tr> 
 </tbody> 
</table>

## 深拷贝函数 ##