JavaScript对象值重置函数失控，寻求动态嵌套表单字段重置方案

我完全懂你现在的处境——手动去逐个重置那些既有扁平字段又有嵌套对象的表单，代码很快就会变得乱糟糟的，维护起来简直头疼。这里有几个实用的方案，能帮你把重置逻辑变得简洁又健壮：

方案1：递归遍历重置（适配动态结构） #

如果你的表单字段结构是动态变化的（比如会随时新增/删除字段），递归遍历是最灵活的方案——它会自动处理所有层级的字段，不管嵌套多深都能覆盖到：

function resetFormFields(formObj) {
  // 遍历对象的每个属性，确保只处理自身属性
  for (const key in formObj) {
    if (formObj.hasOwnProperty(key)) {
      const value = formObj[key];
      if (Array.isArray(value)) {
        // 如果是数组，直接清空（可根据需求改为重置每个元素）
        formObj[key] = [];
      } else if (typeof value === 'object' && value !== null) {
        // 嵌套对象，递归处理
        resetFormFields(value);
      } else {
        // 基础类型，重置为空字符串
        formObj[key] = '';
      }
    }
  }
}

// 使用示例：直接传入你的表单实例
resetFormFields(yourFormInstance);

这个函数的优势在于：不管之后新增多少嵌套字段，你都不用修改重置逻辑，它会自动适配，彻底解决“函数失控”的问题。

方案2：基于初始模板重置（适配固定结构） #

如果你的表单结构是固定的（只是值会动态变化），可以先定义一个空的初始模板，重置时直接用模板的深拷贝替换当前表单对象。这种方式代码更直观，可读性更强：

// 定义和你的表单结构完全一致的初始空模板
const emptyFormTemplate = {
  jamb_style: '',
  cutouts: '',
  door: {
    length: '',
    width: '',
    thickness: '',
  },
  lock_bore: {
    location: '',
    diameter: '',
  },
  hinge: {
    size: '',
    pocket_radius: '',
    backset: '',
    locations: {
      first: '',
      second: '',
      third: '',
      fourth: '',
    },
  },
  face_plate: {
    length: '',
    width: '',
    radius: '',
  }
};

// 深拷贝函数，避免引用共享导致的模板污染
function deepClone(obj) {
  // 简单场景用JSON序列化即可，复杂场景可使用lodash的_.cloneDeep
  return JSON.parse(JSON.stringify(obj));
}

// 重置函数：直接替换为干净的模板
function resetForm() {
  yourFormInstance = deepClone(emptyFormTemplate);
}

这个方法的好处是逻辑一目了然，重置后的表单绝对是“干净”的，不会有遗漏的字段。但如果表单结构会动态变化，就不太适合了。

额外优化：适配更多字段类型 #

如果你的表单里有数字、布尔值等其他类型的字段，只需在重置逻辑里加对应判断即可：

function resetFormFields(formObj) {
  for (const key in formObj) {
    if (formObj.hasOwnProperty(key)) {
      const value = formObj[key];
      if (Array.isArray(value)) {
        formObj[key] = [];
      } else if (typeof value === 'object' && value !== null) {
        resetFormFields(value);
      } else if (typeof value === 'number') {
        formObj[key] = 0;
      } else if (typeof value === 'boolean') {
        formObj[key] = false;
      } else {
        formObj[key] = '';
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者benjivm