JS 基础篇(八) 深拷贝与浅拷贝

前提

1. 堆栈的概念

在javascript中，Object，Array，Function是放到堆中，
Number，String，Null，Boolean存放在栈中

2. 指针

个人理解像一个内存地址，指向了数据存放的堆中

3. 数据存储
   

关于堆栈以后会细说

浅拷贝

浅拷贝就是赋值了一份内存地址而已，而内存中的数据并没有复制一份,
任何一个数据改变两个数据都会改变
看图：

let obj = {a:1,b:2}
let copyObj = obj
copyObj.a = 'kk'
console.log(obj)
//{a:'kk,b:2}

1. Object.assign(对象里包含引用类型 -->浅拷贝)

let objD = { a: 1, b: {a:1,b:2}}
let assignCopy = Object.assign({},objD)
assignCopy.b.a = 'change'
console.log(objD.b.a);
console.log(objD);
console.log(assignCopy);
//change
//{ a: 1, b: { a: 'change', b: 2 } }
//{ a: 1, b: { a: 'change', b: 2 } }

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

/**
 * 当对象包含 引用类型
 * slice  concat 浅拷贝
 */
let arrL = [1, { a: 1, b: 1 }]
let sliceArrL = arrL.slice(0)
sliceArrL[1].a = 'slice change'
console.log(arrL);
console.log(sliceArrL);
let concatArrL = Array.prototype.concat.call([],arrL)
concatArrL[1].a = 'concat change'
console.log(arrL);
console.log(sliceArrL);
console.log(concatArrL);

深拷贝

1. Object.assign(对象里不包含引用类型–>深拷贝)

let objL = { a: 1, b: 2 }
let copyObjL = Object.assign({},objL)
copyObjL.a = 'change'
console.log(objL);
console.log(copyObjL);
//{ a: 1, b: 2 }
//{ a: 'change', b: 2 }

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

/**
 * 当对象不包含 引用类型
 * slice  concat 深拷贝
 */
let arrL = [1, 2]
let sliceArrL = arrL.slice(0)
sliceArrL[1]= 'slice change'
console.log(arrL);
console.log(sliceArrL);
//[ 1, 2 ]
//[ 1, 'slice change' ]
let concatArrL = Array.prototype.concat.call([],arrL)
concatArrL[1] = 'concat change'
console.log(arrL);
console.log(sliceArrL);
console.log(concatArrL);
//[ 1, 2 ]
//[ 1, 'slice change' ]
//[ 1, 'concat change' ]

3. JSON.parse()和JSON.stringify()

/**
 * 当对象不包含 引用类型
 * json.stringify json.parse
 */
let obj = { a: 1, b: {a:1,b:2}}
let copyObj = JSON.parse(JSON.stringify(obj))
obj.b.a = 'change'
console.log(obj);
console.log(copyObj);

let arr = [1, { a: 1, b: 2 }]
let copyArr = JSON.parse(JSON.stringify(arr))
arr[1].a = 'change'
console.log(arr);
console.log(copyArr);
/*
*	不能复制function  正则 日期对象，
*	相同引用会重复复制	
*/
let tempObj = {a:'zzz'}
let obj = {
  syb: Symbol('kk'),
  fn: () => {console.log('kk')},
  reg: /^0-9$/,
  a:'string',
  obj1:tempObj,
  obj2:tempObj
}
let copyObj = JSON.parse(JSON.stringify(obj))
tempObj.a = 'change'
console.log(obj)

copyObj.obj1.a = 'change'
//copyObj.fn() //不能复制方法
console.log(copyObj);

手动递归实现

注意：这里没有处理日期，function，symbol，正则的拷贝

let obj = {
  arr: [1, 2, 3],
  obj: {a:1,b:2}
}

function judgeType(target) {
  return Object.prototype.toString.call(target).slice(8,-1)
}

function deepClone (target) {
  let result,targetType = judgeType(target)
  if (targetType !== 'Object' && targetType !== 'Array') return target
  if (targetType === 'Object') { result = {}}
  if (targetType === 'Array') { result = [] }
  for (const key in target) {
      let val = target[key]
      if (judgeType(val) === 'Object' || judgeType(val)==="Array") {
        result[key] = deepClone(val)
      } else {
        result[key] = val
      }
  }
  return result
}
let copyObj = deepClone(obj)
obj.arr[0] = 'change'
console.log(obj);
console.log(copyObj);
//{ arr: [ 'change', 2, 3 ], obj: { a: 1, b: 2 } }
//{ arr: [ 1, 2, 3 ], obj: { a: 1, b: 2 } }