技術標籤：JavaScriptjs

深淺拷貝

什麼是深淺拷貝？

深淺拷貝是隻針對Object和Array這樣的引用資料型別的

• 淺拷貝：只進行一層關係的拷貝，如果屬性是基本型別，直接拷貝基本型別的值，如果屬性值是記憶體地址，就拷貝這個地址，新舊物件公用一塊記憶體
• 深拷貝：進行無限層次的拷貝，會創造一個一摸一樣的物件，不共享記憶體，修改物件不會互相影響

為什麼要進行深淺拷貝？

let arr1 = arr2 = [1,2,3]
let obj1 = obj2 = {a:1, b:2, c:3}
arr1[0] = 2
obj1.a = 2
console.log(arr2[0]) // 2
console.
 
log(obj2.a) // 2

從上面的程式碼可以看出：同一個Array或者Object賦值給兩個不同變數時，變數指向的是同一個記憶體地址，改變其中一個變數的屬性值，另一個也會改變。如果我們想要的是兩個初始值相等但互不影響的變數，就要使用到拷貝。

深淺拷貝的使用

淺拷貝：

• 擴充套件運算子(ES6新語法)

  let a = {c: 1}
  let b = {...a}
  a.c = 2
  console.log(b.c) // 1
  

• Object.assign(target, source)

  將source的值淺拷貝到target目標物件上

  let a = {c: 1}
  let b = Object.assign
   
  ({}, a)
  a.c = 2
  console.log(b.c) // 1
  

深拷貝：

• JSON.stringify()

  let obj = {
      name: 'lxy',
      city: {
          city1: '北京',
          city2: '上海'
      }
  }
  // 淺拷貝
  let obj1 = {...obj}
  // 深拷貝
  let obj2 = JSON.stringify(obj)
  // 改變源物件的引用型別值
  obj.city.city1 = '杭州'
  console.log(obj1.city.city1) // 杭州
  console.log(JSON.parse
   
  (obj2).city.city1) // 北京
  

深淺拷貝的手動實現？

淺拷貝：

迴圈遍歷物件，將物件的屬性值拷貝到另一個物件中，返回該物件。

function shallowClone(o) {
    const onj = {};
    for(let i in o) {
        obj[i] = o[i]
    }
    return obj;
}

深拷貝：(簡單實現)

對於深拷貝來說，就是在淺拷貝的基礎上加上遞迴

var a1 = {
    b: {
        c: {
            d: 1
        }
    }
}
function deepClone(obj) {
    var target = {}
    for(var i in obj) {
        if(obj.hasOwnProperty(i)) {
            if(typeof obj[i] === 'object') {
                target[i] = deepClone(obj[i])
            } else {
                target[i] = obj[i]
            }
        }
    }
    return target
}