JS中引用数据类型的的深浅拷贝

• JS的深浅拷贝就不用说了，基本数据类型直接等号赋值即可

1、常见的浅层拷贝

//对象
var obj = {
  name: "张三",
  hobby: ["吃饭", "睡觉"]
}
var newobj = Object.assign({}, obj)
console.log(obj)       //{ name: '张三', hobby: [ '吃饭', '睡觉' ] }
console.log(newobj)		//{ name: '张三', hobby: [ '吃饭', '睡觉' ] }
obj.hobby.pop()
obj.name = '李四'
console.log(obj)		//{ name: '李四', hobby: [ '吃饭' ] }
console.log(newobj)		//{ name: '张三', hobby: [ '吃饭' ] }
//可以看到只有第一层的数据是深拷贝

//数组
var arr = [1,2,[3,2,1]]

//展开运算符和concat方法是一样的
// var newarr = [...arr]
var newarr = [].concat(arr)

console.log(arr)			//[ 1, 2, [ 3, 2, 1 ] ]
console.log(newarr)			//[ 1, 2, [ 3, 2, 1 ] ]
arr[2].pop()
arr[0] = 99
console.log(arr)			//[ 99, 2, [ 3, 2 ] ]
console.log(newarr)			//[ 1, 2, [ 3, 2 ] ]

3、 深拷贝

//JSON方式
var arr = [1, 2, [3, 2, 1], {
  name: '张三',
  sayName: function () {
    console.log("我是" + this.name)
  }
}]
var newarr = JSON.parse(JSON.stringify(arr))
console.log(arr)		//[ 1, 2, [ 3, 2, 1 ], { name: '张三', sayName: [Function: sayName] } ]
console.log(newarr)		//[ 1, 2, [ 3, 2, 1 ], { name: '张三' } ]
arr[2].pop()
arr[0] = 99
arr[3].name = '李四'
console.log(arr)		//[ 99, 2, [ 3, 2 ], { name: '李四', sayName: [Function: sayName] } ]
console.log(newarr)		//[ 1, 2, [ 3, 2, 1 ], { name: '张三' } ]
//可以看到这种方式可以实现属性的深层拷贝，但是对于对象中的方法就不行了



// 递归深拷贝既可以深拷贝属性，也可以深拷贝方法
function deepClone(obj) {
  // 判断要进行深拷贝的是数组还是对象
  var objClone = Array.isArray(obj) ? [] : {};

  // 进行深拷贝的数值不能为空，并且是对象或者是数组
  if (obj && typeof obj === "object") {
    for (let key in obj) {
      // 判断自身是否有这个属性
      if (obj.hasOwnProperty(key)) {
        // 判断属性是否为引用类型
        if (obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone(obj[key]);
        } else {
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone
  }

var arr = [1, 2, [3, 2, 1], {
  name: '张三',
  sayName: function () {
    console.log("我是" + this.name)
  }
}]
var newarr = deepClone(arr)

console.log(arr)		//[ 1, 2, [ 3, 2, 1 ], { name: '张三', sayName: [Function: sayName] } ]
console.log(newarr)		//[ 1, 2, [ 3, 2, 1 ], { name: '张三' } ]
arr[2].pop()
arr[0] = 99
arr[3].name = '李四'
console.log(arr)		//[ 99, 2, [ 3, 2 ], { name: '李四', sayName: [Function: sayName] } ]
console.log(newarr)		//[ 1, 2, [ 3, 2, 1 ], { name: '张三', sayName: [Function: sayName] } ]