js中的深拷贝、浅拷贝

记录一下js中深拷贝、浅拷贝。

一、深浅拷贝、赋值有什么区别

​ 深浅拷贝的区别在于，深拷贝会开辟一个新的内存空间，改变新对象不会影响原对象，而浅拷贝新旧对象共用同一块内存空间，改变新对象，原对象也会随之改变。

二、如何实现浅拷贝

1、Object.assign()

assign()既可以实现深拷贝，也可以实现浅拷贝。

（1）当object里有多层时，是浅拷贝。

var obj1 = {
      A: { a:'1', b:'2' }
    };
var obj2 = Object.assign( {}, obj1 );
obj2.A.a = '3'
console.log("obj1",obj1)
console.log("obj2",obj2)

（2）当object只有一层时，是深拷贝。

var obj1 = { A: '123' };
var obj2 = Object.assign( {}, obj1 );
obj2.A= 'ABC'
console.log("obj1",obj1)
console.log("obj2",obj2)

2、Array.prototype.concat()、Array.prototype.slice()

（1）Array.prototype.concat()

var arr1 = [1,2,{ A: '1' }];
var arr2 = arr1.concat();
arr2[2].A = '2'
console.log("arr1",arr1)
console.log("arr2",arr2)

（2）Array.prototype.slice()

var arr1 = [1,2,{ A: '1' }];
var arr2 = arr1.slice();
arr2[2].A = '2'
console.log("arr1",arr1)
console.log("arr2",arr2)

注意：当修改的值为基本类型时，为深拷贝。

var arr1 = [1,2,{ A: '1' }];
var arr2 = arr1.slice();
arr2[0] = '3'
console.log("arr1",arr1)
console.log("arr2",arr2)

三、如何实现深拷贝

（1）JSON.parse(JSON.stringify())

​ JSON.stringify()将值转换成一个JSON字符串，JSON.parse()再将JSON字串转换成一个对象，在此过程中，产生了一个开辟新的栈的新对象，实现深拷贝。

var arr1 = [1,2,{ A: '1' }];
var arr2 = JSON.parse(JSON.stringify(arr1))
arr2[2].A = '3'
console.log("arr1",arr1)
console.log("arr2",arr2)

注意：这种方法无法处理包含undefined、function(){}、symbol类型的值。

（2）递归

    test(){
      var obj1 = {
        id: 1,
        name: 'andy',
        msg: {
          age: '18',
          sex: '男',
        },
        color: ['pink', 'red'],
      }
      var obj2 = {}
      
      this.deepCopy(obj2, obj1)
      obj2.id = 0
      obj2.msg.age = '0'
      obj2.color[0] = '0'

      console.log("obj1",obj1)
      console.log("obj2",obj2)
    },

    //遍历对象、数组，直到里面全是基本数据类型，再复制。
    deepCopy(newobj, oldobj) {
      for (var k in oldobj) {
        var item = oldobj[k]
        if (item instanceof Array) {
          newobj[k] = []
          this.deepCopy(newobj[k], item)
        } else if (item instanceof Object) {
          newobj[k] = {}
          this.deepCopy(newobj[k], item)
        } else {
          newobj[k] = item
        }
      }
    }

（3）使用js函数库lodash中的cloneDeep()

lodash使用详情见官网 https://www.lodashjs.com/

import LoDash from "@/plugs/lodash.min"

linkDialog({ row }) {
    this.detailRow = LoDash.cloneDeep(row)
},