目录
前端仅传递发生更改的字段
为什么
数据举例
递归对比函数
从回显数据到提交更新接口的模拟操作
前端仅传递发生更改的字段
在实际开发中前端肯定会遇到一个更新需求，回显数据 => 修改数据 => 请求更新接口这个步骤。
通常建议前端仅传递发生更改的字段，而不是将所有字段都传递给后端。
为什么
减少数据传输量： 如果只传递更改了的字段，可以减小数据传输的大小，降低网络开销，特别是在网络条件不理想的情况下更为重要。
提高性能： 传递更改了的字段可以减少后端的处理工作。只处理需要更新的字段可以提高性能，减少数据库操作的负担。
数据举例
const form = {a: 1,b: 2,c: 3,d: [1, 2, 3, 4],e: [{f: 5, g: 6}],h: {i: 7,g: 8}
}//修改字段
form.a = 2
form.h.i = 2
form.d[0] = 2//接口提交params
{a: 2,d: [2, 2, 3, 4],h: {i: 2}
}以下是递归对比原始对象和修改后的对象的函数，返回一个只修改过字段值的对象。
递归对比函数
function findObjectChanges(original, modified, path = []) {if(original instanceof Array && modified instanceof Array) {if(JSON.stringify(original) !== JSON.stringify(modified)) {return modified} else {return {}}}const changes = {};for (const key in modified) {const currentPath = [...path, key];if (typeof modified[key] === 'object' && modified[key] !== null) {// 递归比较嵌套对象const nestedChanges = findObjectChanges(original[key], modified[key], currentPath);if (Object.keys(nestedChanges).length > 0) {changes[key] = nestedChanges;}} else {// 比较基本数据类型if (original[key] !== modified[key]) {changes[key] = modified[key];}}}return changes;
}从回显数据到提交更新接口的模拟操作
let form = {} // 定义的form，不管是react的useState定义或者vue的reactive ref定义const formData = fetchDataApi(...)
//接口数据
{ a: 1,b: 2,c: 3,d: [1, 2, 3, 4],e: [{f: 5, g: 6}],h: {i: 7,g: 8}
}form = JSON.parse(JSON.stringify(formData)) //从接口获取到回显数据，生成新对象form.a = 2 //模拟vue或者react的form双向绑定更改值的操作
form.h.i = 2
form.d[0] = 2const formParams = findObjectChanges(formData, form) //递归对比修改了哪些字段if(JSON.stringify(formParams) === "{}") { //判断是否修改了字段alert('您还未修改任何数据')
} else {fetchUpdateApi(formParams) // 请求更新接口alert('数据已提交')
}
