簡單理解淺拷貝和深拷貝

博客地址：https://www.zhouhaipeng.com/
github https://github.com/Roc-zhou

什么是淺拷貝？

簡單來說 有個 A 和 B，我們把A 復制給了B，當我們修改B 的時候 發(fā)現(xiàn) A 的值也會發(fā)生改變，這就是淺拷貝

• 舉個例子

let a = [{ name: '張三' }],
b = a

b[0].name = '李四'
console.log(a);  // [{ name: '李四' }]
console.log(a); //  [{ name: '李四' }]

• 使用圖解釋一下

  
  
  9419407-1d09c5b4a0a06252.png
  
  
  9419407-ff2d0c88f14929a3.png

從圖中我們可以看到 a和b 全部 都指向了 同一個 堆內(nèi)存的值 ，所以我們改變 b 的數(shù)據(jù) a也會 改變 。

那什么是深拷貝呢？

理解了淺拷貝，我猜 深拷貝就是修改 b 的值 a 還是原來的值。

• 還是舉個例子先

// 深拷貝的方法有幾種 這里只寫一種 （JSON.stringify、jquery等）
function clone(obj) {
  let result = obj.constructor === Array ? [] : {};
  if (typeof obj !== 'object') {
    return obj;
  }
  for (const x in obj) {
    if (obj.hasOwnProperty(x)) {
      if (typeof obj[x] === 'object' && obj[x] !== null) {
        result[x] = clone(obj[x]);   //遞歸復制
      } else {
        result[x] = obj[x];
      }
    }
  }
  return result
}

let a = [{ name: '張三' }],
  b = clone(a)

console.log(a); // [ { name: '張三' } ]
console.log(b); // [ { name: '張三' } ]
// 成功復制
// 修改b的值
b[0].name = '李四'
console.log(a); // [ { name: '張三' } ]
console.log(b); // [ { name: '李四' } ]

• 還是上個圖

  
  
  9419407-efe13a61709541e3.png
  
  
  9419407-47e577f9b52cb1c7.png

從圖上我們可以看到 b 復制 a 是在 堆內(nèi)存中復制了一個生成了一個新的，所以我們修改b 的值的時候 a 不會受影響，這樣我們就得到了一個新的b 達到了深拷貝的效果！