不容错过的JavaScript对象深拷贝方法，前端开发者必须掌握

前言

为什么js对象的赋值有时候需要进行深拷贝？

// 基本数据类型赋值
var a = 'aaa';
var b = a;
console.log(a);  // 'aaa'
console.log(b);  // 'aaa'
b = 'bbb';
console.log(a);  // 'aaa'
console.log(b);  // 'bbb'

// 引用数据类型赋值
var a = {    name: '张三'};
var b = a;
console.log(a);  // {name: "张三"}
console.log(b);  // {name: "张三"}
b.name = '李四';
b.age = 18;
console.log(a);  // {name: "李四", age: 18}
console.log(b);  // {name: "李四", age: 18}

深拷贝方法

1. JSON.parse(   JSON.stringify()   ) 序列化和反序列

// 测试数据
var test = {  name: "test"};
var data = {  a: "123", 
              b: 123, 
              c: true, 
              d: [43, 2], 
              e: undefined,
              f: null,
              g: function() {    console.log("g");  },
              h: new Set([3, 2, null]),
              i: Symbol("fsd"),
              j: test,
              k: new Map([    ["name", "张三"],    ["title", "Author"]  ])
            };

JSON.stringify(data) 

// 测试数据
var data = {
    name: 'foo',
    child: null,
}
data.child = data

// 测试数据
var test = {  name: "test"};
var data = {  a: "123",
              b: 123,
              c: true,
              d: [43, 2],
              e: test,
              f: { 
                    name: '张三',
                    age: 18, 
                    likes: {         
                         ball: ['足球','篮球']    
                           }  
                 }
            };
JSON.stringify(data) 

具体方法

function deepCopy(obj){ 
   if(typeof obj === 'function'){   
     throw new TypeError('请传入正确的数据类型格式')
    }
    try {
        let data = JSON.stringify(obj)
        let newData = JSON.parse(data)
        return newData
     } catch(e) {
      console.log(e)
      }
}

2. Object.assign(target, source1, source2)

var data = {
              a: "123",
              b: 123,
              c: true,
              d: [43, 2],
              e: undefined,
              f: null,
              g: function() {    console.log("g");  },
              h: new Set([3, 2, null]),
              i: Symbol("fsd"),
              k: new Map([    ["name", "张三"],    ["title", "Author"]  ])
        };

var newData = Object.assign({},data)
console.log(newData)  

var test = {  name: '张三' }
var data = { 
              a: 123,
              b: test
            }
var newData = Object.assign({},data)
console.log(newData) 
// {  a: 123,  b: {    name: '张三'  }}
test.age = 18
console.log(newData)
// {  a: 123,  b: {    name: '张三',   age: 18  }}

3. 迭代递归方法

话不多说，先附上自己写的代码

function deepCopy(data) {
      if(typeof data !== 'object' || data === null){
            throw new TypeError('传入参数不是对象')
        }
      let newData = {};
      const dataKeys = Object.keys(data);
      dataKeys.forEach(value => {
         const currentDataValue = data[value];
         // 基本数据类型的值和函数直接赋值拷贝 
         if (typeof currentDataValue !== "object" || currentDataValue === null) {
              newData[value] = currentDataValue;
          } else if (Array.isArray(currentDataValue)) {
             // 实现数组的深拷贝
            newData[value] = [...currentDataValue];
          } else if (currentDataValue instanceof Set) {
             // 实现set数据的深拷贝
             newData[value] = new Set([...currentDataValue]);
          } else if (currentDataValue instanceof Map) {
             // 实现map数据的深拷贝
             newData[value] = new Map([...currentDataValue]);
          } else { 
             // 普通对象则递归赋值
             newData[value] = deepCopy(currentDataValue);
          } 
       }); 
      return newData;
  }

然后写一个测试数据实测一下

// 测试数据项
var data = {
              age: 18,
              name: "liuruchao",
              education: ["小学", "初中", "高中", "大学", undefined, null],
              likesFood: new Set(["fish", "banana"]),
              friends: [
                    { name: "summer",  sex: "woman"},
                    { name: "daWen",   sex: "woman"},
                    { name: "yang",    sex: "man" }  ], 
              work: { 
                      time: "2019", 
                      project: { name: "test",obtain: ["css", "html", "js"]} 
                    }, 
              play: function() {    console.log("玩滑板");  }
          }

执行结果

基本上可以满足常用的数据结构的值的深拷贝，但因为js对象的数据结构较多，所以并不能全部覆盖，比如说new Number(),这种基本数据类型的包装对象，就没有进行处理。因此在使用时，可以先对所要进行深拷贝的对象进行一个预判，来决定使用哪种方式。

同样再试一下，第一种方法中，含有闭环对象的这种极端例子

// 测试数据
var data = {
    name: 'foo',
    child: null,
}
data.child = data

deepCopy(data)

阿欧，直接栈溢出，爆栈了！！递归方法真得得谨慎使用啊，稍不注意就入栈太多了，只能接着优化这个函数吧。

4. 迭代递归方法（解决闭环问题）

function deepCopy(data, hash = new WeakMap()) {
      if(typeof data !== 'object' || data === null){
            throw new TypeError('传入参数不是对象')
        }
      // 判断传入的待拷贝对象的引用是否存在于hash中
      if(hash.has(data)) {
            return hash.get(data)
        }
      let newData = {};
      const dataKeys = Object.keys(data);
      dataKeys.forEach(value => {
         const currentDataValue = data[value];
         // 基本数据类型的值和函数直接赋值拷贝 
         if (typeof currentDataValue !== "object" || currentDataValue === null) {
              newData[value] = currentDataValue;
          } else if (Array.isArray(currentDataValue)) {
             // 实现数组的深拷贝
            newData[value] = [...currentDataValue];
          } else if (currentDataValue instanceof Set) {
             // 实现set数据的深拷贝
             newData[value] = new Set([...currentDataValue]);
          } else if (currentDataValue instanceof Map) {
             // 实现map数据的深拷贝
             newData[value] = new Map([...currentDataValue]);
          } else { 
             // 将这个待拷贝对象的引用存于hash中
             hash.set(data,data)
             // 普通对象则递归赋值
             newData[value] = deepCopy(currentDataValue, hash);
          } 
       }); 
      return newData;
  }

比之前的1.0版本多了个存储对象的容器WeakMap，思路就是，初次调用deepCopy时，参数会创建一个WeakMap结构的对象，这种数据结构的特点之一是，存储键值对中的健必须是对象类型。

1. 首次调用时，weakMap为空，不会走上面那个if(hash.has())语句，如果待拷贝对象中有属性也为对象时，则将该待拷贝对象存入weakMap中，此时的健值和健名都是对该待拷贝对象的引用
2. 然后递归调用该函数
3. 再次进入该函数，传入了上一个待拷贝对象的对象属性的引用和存储了上一个待拷贝对象引用的weakMap，因为如果是循环引用产生的闭环，那么这两个引用是指向相同的对象的，因此会进入if(hash.has())语句内，然后return，退出函数，所以不会一直递归进栈，以此防止栈溢出。

总结

上述的几种方式不管优缺点如何，共同点是只能拷贝对象的可枚举属性，对于不可枚举或者原型上的属性，却不能拷贝，但对于基本的使用来说，已经足够了。最后如文中有错误或者遗漏或者您有更好的建议，欢迎与我交流

如果该篇文章对您有那么一点帮助的话，烦请帮忙点个赞哦，也是对偶的一种鼓励????!