JS 面試級問題之--淺拷貝和深拷貝的區別和實現方法？

如果你想應聘前端工程師，這個問題你是繞不過去的？
淺拷貝和深拷貝的區別和實現方法？

首先，淺拷貝和深拷貝都只針對於像Object， Array這樣的複雜對象，

區別：淺拷貝只複製對象的第一層屬性、深拷貝可以對對象的屬性進行遞歸複製

舉個例子：

const obj1 = {
    name: 'mengft',
    family: ['父親', '母親', '妹妹']
}

shallowCopy () {
    let object2 = {}
    for(let i in o) {
        if (o.hasOwnProperty(i)) {
            object2[i] = o[i]
        }
    }
    return object2
}

console.dir(shallowCopy(obj1))

通過淺拷貝得到的object2的family屬性和object1的family屬性在內存中指向同一個地址，這顯然並不是我們期望得到的效果

那麼，用深拷貝是怎麼做到的呢？

 deepCopy (o, c) {
   c = c || {}
   for (let i in o) {
     if (typeof o[i] === 'object') {
       // 需要深拷貝
       if (o[i].constructor === Array) {
         // 數組
         console.log('是數組')
         c[i] = []
       } else {
         // 對象
         console.log('是對象')
         c[i] = {}
       }
       this.deepCopy(o[i], c[i])
     } else {
       c[i] = o[i]
     }
   }
   return c
 }

console.dir(this.deepCopy(obj1, { school: '天津科技大學' }))

效果如下：

案例：

項目中也確實遇到了這個問題，分享給大家

從服務器fetch到數據之後我將其存放在store中，通過props傳遞給界面，然後我需要對這堆數據進行修改，那涉及到修改就一定有保存和取消，所以我們需要將這堆數據拷貝到其他地方，之前，我是這麼做的

componentWillRecieveProps(nextProps) {
    if (next props.nurseList !== this.props.nurseList) {
        this.setState({ nurseListSource: nextPorps.nurseList })
    }
}

在對數據進行維護的時候我發現我並沒有直接操作store裏面的數據，但是store卻有diff數據，這是這麼回事呢？在檢查了所有的操作，確定沒有觸發其他操作之後，我開始意識到這個問題，我用的是淺拷貝，所以當state中的數據進行更新之後，指向同一地址的store也會進行被動更新