深浅拷贝，都会进行复制，区别在于是否会互相影响，改一个，另一个也会发生改变。
浅拷贝：复制的只是原对象的引用，新旧对象的指针指向同一块内存空间
深拷贝：对原对象完全的复制，开辟了新的内存空间，引用指向另一块内存空间，新旧对象互不影响。

浅拷贝

实现方法：遍历对象，将对象的属性和方法放到一个新的对象中

var shallowCopy = function (obj) {
  //只拷贝对象
  if (typeof obj !== 'object') return
  //根据对象类型判断新建数组还是对象
  let newObj = obj instanceof Array ? [] : {}
  //遍历对象
  for (let key in obj) {
    //判断是obj的属性才进行拷贝
    if (obj.hasOwnProperty(key)) {
      newObj[key] = obj[key]
    }
  }
  return newObj
}

//测试
var obj = [1, 2, 3]

var newObj = shallowCopy(obj)

newObj[0] = 4

console.log(obj); //[ 1, 2, 3 ]
console.log(newObj);//[ 4, 2, 3 ]
//是不是觉得是深拷贝，感觉互不影响，来看下一个例子
var obj = [1, [2, 3], [4, 5]]

var newObj = shallowCopy(obj)

newObj[1][0] = 4

console.log(obj); //[ 1, [ 4, 3 ], [ 4, 5 ] ]
console.log(newObj);//[ 1, [ 4, 3 ], [ 4, 5 ] ]
//我们发现，第一层的值是深拷贝，但第二层就是浅拷贝了(与Array的slice和concat方法实现的浅拷贝相似)

使用Array的slice和concat方法实现的浅拷贝

var obj = [1, [2, 3], [4, 5]]

var newObj = obj.slice()

newObj[1][0] = 4

console.log(obj); //[ 1, [ 4, 3 ], [ 4, 5 ] ]
console.log(newObj); //[ 1, [ 4, 3 ], [ 4, 5 ] ]
//concat方法实现与其相似

使用展开运算符

var obj = {a : 1, obj : {
  b : 2,
  c : 3
} }

var newObj = {...obj}

newObj.obj.b = 6

console.log(obj); //{ a: 1, obj: { b: 6, c: 3 } }
console.log(newObj); //{ a: 1, obj: { b: 6, c: 3 } }

深拷贝

• 取巧方法(利用JSON.parse和JSON.stringify())
  JOSN 对象中的 stringify 可以把一个 js 对象序列化为一个 JSON 字符串，parse 可以把 JSON 字符串反序列化为一个 js 对象
  缺点：不能拷贝函数

var obj = [1, [2, 3], [4, 5]]

var newObj = JSON.parse(JSON.stringify(obj))

newObj[1][0] = 4

console.log(obj); //[ 1, [ 2, 3 ], [ 4, 5 ] ]
console.log(newObj); //[ 1, [ 4, 3 ], [ 4, 5 ] ]

• 与浅拷贝相似，只是判断obj的属性如果为对象则递归调用深拷贝函数

var deepCopy = function (obj) {
  //只拷贝对象
  if (typeof obj !== 'object') return
  //根据对象类型判断新建数组还是对象
  var newObj = obj instanceof Array ? [] : {}
  //遍历对象
  for (var key in obj) {
    //判断是obj的属性如果为对象则递归调用深拷贝函数
    if (obj.hasOwnProperty(key)) {
      newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key]
    }
  }
  return newObj
}



var obj = [1, [2, 3], [4, 5]]

var newObj = deepCopy(obj)

newObj[1][0] = 4

console.log(obj); //[ 1, [ 2, 3 ], [ 4, 5 ] ]
console.log(newObj);//[ 1, [ 4, 3 ], [ 4, 5 ] ]

• 利用jquery的extend方法实现深拷贝
  语法：jQuery.extend( [deep ], target, object1 [, objectN ] )
  深浅拷贝对应的参数为 [deep],值为true或false,默认为false，且不能显示显现出来，要写只能写true
true对应深拷贝
  false对应浅拷贝

var obj = [1, [2, 3], [4, 5]]
let newObj = []
$.extend(true, newObj, obj) //深拷贝示例
newObj[1][0] = 4

console.log(obj); 
console.log(newObj);

image.png

var obj = [1, [2, 3], [4, 5]]
let newObj = []
$.extend(newObj, obj) //浅拷贝示例
newObj[1][0] = 4

console.log(obj); 
console.log(newObj);

image.png