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也会进行被动更新