JS深拷贝和浅拷贝

一、含义

浅拷贝:仅仅指向被复制的内存地址，如果原地址中的对象被改变了，那么浅拷贝也会相应的改变
深拷贝:会重新开辟一个内存空间，所以被拷贝和拷贝的数据之间不会相互影响

二、数组的浅拷贝 + 深拷贝

1、数组的浅拷贝：直接赋值，修改被赋值的数组，原数组会被改变

 var arr = ['1', '2', '3', '4', '5']
 var arr_1 = arr
 arr_1[0] = '刘备'
 console.log(arr_1) // ["刘备", "2", "3", "4", "5"]
 console.log(arr)   // ["刘备", "2", "3", "4", "5"]

 2、数组的深拷贝：JS中实现深拷贝的方法有  slice、concat、map、JSON.parse(JSON.stringify())、Object.assign

（1）concat：只能对一维数组进行深拷贝

一维数组：可以实现深拷贝
var obj = [{name: 'wuyanzhi'}]
var obj1 = obj.concat()
obj1[1] = 'wuyanzhi_xiugai'
console.log(obj)  // [{name: 'wuyanzhi'}]
console.log(obj1) // [{name: 'wuyanzhi_xiugai'}]


二维数组：被拷贝的数组改变会影响原数组
var arr = [[1, 2, 3, 4],[5, 6, 7, 8]]
var arr1 = arr.concat()
arr1[1][1] = 'wuyanzhi'
console.log(arr)  // [[1, 2, 3, 4],[5, 'wuyanzhi', 7, 8]]
console.log(arr)  // [[1, 2, 3, 4],[5, 'wuyanzhi', 7, 8]]

（2）slice：只能对一维数组进行深拷贝

一维数组:可以实现深拷贝
var q = [1,2,3,4,5]
var q1 = q.slice(0,3)
q1[0] = 'wuyanzhi'
console.log(q)   // [1,2,3,4,5]
console.log(q1)  // ['wuyanzhi',2,3]

二维数组:被拷贝的数组改变会影响原数组
var arr = [[1, 2],[5, 6], [7,8]]
var arr1 = arr.slice(0,1)
arr1[0][1] = 'wuyanzhi'
console.log(arr)   // [[1,'wuyanzhi'],[5,6],[7,8]] 
console.log(arr1)  // [[1,'wuyanzhi']]

（3）map：只能对一维数组进行深拷贝

（4）[...]：运算展开符只能对一维数组进行深拷贝

（5）JSON.parse(JSON.stringify(arr))：可以实现对多维数组的深拷贝

（6）Object.assign：可以实现对多维数组的深拷贝

二、对象的浅拷贝 + 深拷贝

1、对象的浅拷贝：直接赋值，修改被赋值的数组，原数组会被改变

2、对象的深拷贝

（1）[...]运算展开符实现深拷贝：实现对对象的深拷贝

（2）JSON.parse(JSON.stringify(arr))：可以实现对象的深拷贝

（3）Object.assign：可以实现对对象的深拷贝

三、自己封装实现深拷贝和浅拷贝的方法

// 2 自己实现深拷贝

    function deepClone(source) {
      var result = Array.isArray(source) ? [] : {}
      for (key in source) {
        result[key] = source[key] instanceof Object ? deepClone(source[key]) : source[key]
      }
      return result
    }
    
    // 2.1 对象

    var o3 = deepClone(obj)
    o3.name = '赵云'
    console.log(o3)
    console.log(obj)

    // 2.2 数组

    var a3 = deepClone(arr)
    a3[0] = '赵云'
    console.log(a3)
    console.log(arr)

【有时间完善】