深拷贝的方法与应用

深拷贝方法，复制一份对象，不改变原来对象，可以进行更改属性。

• 很多时候需要对数据进行更改 ，但又不想改变原数据，因此需要对数据进行复制一份，已达到数据互不影响的情况。

数组与对象的赋值都叫做浅拷贝（藕断丝连）

	let arr=[1,2,3]           //arr没变 相当于深拷贝
	let newArr=[...arr]
	newArr.push(4)
	
	let arr2=[[1,2,3],[4,5,6]]  //arr2，newArr2一样 相当于浅拷贝
	let newArr2=[...arr2]
	newArr2[0].push(8)

针对一维数组和对象可以看作是深拷贝，多维就是浅拷贝

深拷贝用法

	let newlist=JSON.parse(JSON.stringify(list))

封装函数

 function deepClone(source) {
      // []=>Array(基类)  {}=>Object
      const targetObj = source.constructor === Array ? [] : {};
      for (let keys in source) {
          // hasOwnProperty检查对象的自有属性
        if (source.hasOwnProperty(keys)) {
          // 引用数据类型
          if (source[keys] && typeof source[keys] === "object") {
            // 维护层代码
            source[keys].constructor === Array ? [] : {};
            // 递归
            targetObj[keys] = deepClone(source[keys]);
          } else {
            // 基本数据类型，直接赋值
            targetObj[keys] = source[keys];
          }
        }
      }
      return targetObj;
    }

 let newlist=deepClone(list)) //使用

deepClone(obj) {
      let newObj = null; //接受拷贝的新对象
      //判断是否时引用类型
      if (typeof obj == "object" && typeof obj !== null) {
        //判断是数组还是对象
        newObj = obj instanceof Array ? [] : {};
        for (var i in obj) {
          newObj[i] = this.deepClone(obj[i]);
        }
      } else {
        newObj = obj;
      }
      return newObj;
    },

 

使用

//vue中使用
    let params = this.deepClone(this.obj1); //拷贝一份，不改变原对象
    params.data = "数据"; //修改
    this.$parent.$refs.test(
        JSON.stringify(params)
     );