最近遇到一个需求使用redux可以比较简洁的实现,但是比较奇怪的是出现了下面的问题:
从图中可以看出status的值实际上已经是true,然后在真正使用时渲染出来的是false。经过调试发现,原因在于对于redux中的数据进行操作时是浅拷贝的方式,实际上指针指向的仍是最初初始化的值,因此导致了取值时不正确的情况!
由于数据结构只涉及一层,最终选择了es6的扩展运算符解决了该问题。
深拷贝和浅拷贝的区别在于:
浅拷贝得到的数据在当原始数据发生变化时随之变化,因为指针指向内存中同样的位置。
深拷贝由于指针指向不同的位置,因此数据不会随之变化。
深拷贝的几种方式:
1.递归
function deepClone(obj) {
let newObj = Array.isArray(obj) ? [] : {};
if (obj && typeof obj === 'object') {
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
if (obj[key] && typeof obj[key] === 'object') {
newObj[key] = deepClone(obj[key]);
} else {
newObj[key] = obj[key];
}