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