前端之深拷贝

前提：

就是在实际开发中，我有一个编辑的弹窗，可以查看和编辑，因为弹窗里面是一个步骤条，点击下一步就要向对应的接口发送请求，考虑到就比如我点击下一步，此次表箱信息其实不需要修改，我要修改的是控制器的信息，那么点击下一步发送请求其实是没有必要的，我就考虑到了进行比对，如果没有变化就直接下一步，不发送请求

我的想法是，在点击编辑时，把变化前的值给一个变量（旧值），然后在点击下一步用现在的值和旧值进行对比

const editDataBox = ref<any>({});
const initialFormData = ref<any>({});
//编辑
const handleEdit = async (data: any) => {editVisible.value = true;
//在弹窗弹出的时候，把传递过来的值给一个变量initialFormData.value=data
editDataBox.value = data;
....
}
const isFormDataEqual = (formData1: any, formData2: any) => {return JSON.stringify(formData1) === JSON.stringify(formData2);
};
//下一步
const editNext = () => {switch (editCurrent.value) {case 1:const formDataChanged = !isFormDataEqual(editDataBox.value, initialFormData.value);if (formDataChanged) {
...
}else{editCurrent.value += 1;
}
}

这是我刚开始的想法，原本我以为就是initialFormData这个值不会变化，然后我发现表单值变化了也没有发送请求，我就输出formDataChanged这个值，发现每次都是false,进而输出initialFormData它的值，就发现它既然是变化后的值，我就想问题在哪里，原因是：

在 JavaScript 中，当你将一个对象赋值给另一个变量时，实际上是将对象的引用赋值给了这个变量，而不是对象本身的拷贝。这意味着，如果你修改了其中一个变量所引用的对象，另一个变量也会受到影响，因为它们引用的是同一个对象。

在你的代码中，initialFormData 和 editDataBox 都是使用 ref 创建的响应式对象。当你在 handleEdit 函数中将 data 赋值给 initialFormData.value 和 editDataBox.value 时，它们实际上是引用了同一个对象。

因此，当你修改 editDataBox.value 后，initialFormData.value 也会受到影响，因为它们引用的是同一个对象。

为了避免这种情况，你需要确保 initialFormData 和 editDataBox 引用的是不同的对象，而不是同一个对象的引用。这就是为什么需要进行深拷贝的原因，因为深拷贝会创建一个新的对象，其值与原始对象相同，但是引用不同，这样就可以独立地修改新对象而不影响原始对象。

我的解决办法是使用 JSON.parse() 和 JSON.stringify() 进行深拷贝，修改后的代码是，加了一个deepCopy函数进行深拷贝

JSON.parse() 和 JSON.stringify()

const editDataBox = ref<any>({});
const initialFormData = ref<any>({});
const deepCopy = (obj: any) => {return JSON.parse(JSON.stringify(obj));
};
//编辑
const handleEdit = async (data: any) => {editVisible.value = true;initialFormData.value = deepCopy(data);
editDataBox.value = data;
....
}
const isFormDataEqual = (formData1: any, formData2: any) => {return JSON.stringify(formData1) === JSON.stringify(formData2);
};
//下一步
const editNext = () => {switch (editCurrent.value) {case 1:const formDataChanged = !isFormDataEqual(editDataBox.value, initialFormData.value);if (formDataChanged) {
...
}else{editCurrent.value += 1;
}
}

使用 Object.assign():

这个方法只能实现浅拷贝，但如果对象的结构比较简单且不包含嵌套对象，也可以考虑使用它 

const deepCopy = (obj) => {return Object.assign({}, obj);
};

 使用递归:

可以编写一个递归函数来遍历对象的所有属性，并对每个属性进行拷贝。这需要一些额外的代码，但也是一个有效的方法。

const deepCopy = (obj) => {if (typeof obj !== 'object' || obj === null) {return obj;}let newObj = Array.isArray(obj) ? [] : {};for (let key in obj) {if (obj.hasOwnProperty(key)) {newObj[key] = deepCopy(obj[key]);}}return newObj;
};

使用 Lodash 库 

Lodash 提供了 _.cloneDeep() 方法，可以实现对象的深拷贝。这是一个非常流行且易于使用的方法。

const _ = require('lodash');// 使用 _.cloneDeep() 进行深拷贝
const deepCopy = (obj) => {return _.cloneDeep(obj);
};

深拷贝在编程中几个重要的优势和应用场景： 

1. 数据独立性: 深拷贝创建了原始对象的完全独立副本，这意味着修改拷贝后的对象不会影响原始对象。这对于需要在多个地方使用同一份数据，但又需要独立修改数据的情况非常有用。

2. 避免引用问题: 在 JavaScript 中，如果你简单地将一个对象赋值给另一个变量，实际上是将对象的引用传递给了新变量。这意味着如果你修改了新变量中的对象，原始对象也会受到影响。深拷贝可以避免这种问题，因为它创建了一个完全独立的对象，不会共享内存地址。

3. 数据传递: 在许多情况下，你可能需要将数据传递给其他函数或组件，并且希望确保传递的是数据的副本而不是引用。深拷贝可以确保你传递的是数据的完整副本，而不会影响原始数据。

4. 数据比较: 当需要比较两个对象是否相等时，深拷贝可以确保比较的是对象的值而不是引用。这在进行单元测试、数据验证或其他需要比较对象的场景中非常有用。

总的来说，深拷贝是一种保护数据完整性和独立性的重要工具，可以帮助避免由于对象共享引起的意外行为，并确保数据在不同部分之间的传递和修改时保持一致。

你学会了吗？

嗯，可能有的朋友还不太了解JSON.parse() 和 JSON.stringify()？我也是一知半解。

我在想应该写在另一篇文章还是写在这里？emmm,还是重新写一个吧，可以点击跳转

最后，我也是刚入行时间不长的前端，如果有写的有什么问题欢迎指正与交流。