本文介绍如何将 FormData 中带方括号命名的字段（如 other[a]、other[b]）智能解析为多维嵌套对象，替代默认扁平化键名，使提交数据符合后端期望的结构。

本文介绍如何将 formdata 中带方括号命名的字段（如 `other[a]`、`other[b]`）智能解析为多维嵌套对象，替代默认扁平化键名，使提交数据符合后端期望的结构。

在使用 FormData 提交表单（尤其配合 Axios 异步请求）时，浏览器原生不会自动解析形如 other[a] 的键名为嵌套结构——它只会作为字符串字面量保留。若后端接口要求接收 other: { a: 'A', b: 'B' } 这样的结构，而前端仅传入 { 'other[a]': 'A', 'other[b]': 'B' }，则需在序列化前主动做键名解析与对象重组。

以下是一个健壮、可复用的转换函数，支持任意前缀（不仅限于 other），并具备良好的边界处理能力：

function transformFormData(formData) {
  const data = {};

  for (const [key, value] of formData.entries()) {
    // 匹配形如 prefix[keyName] 的模式，例如 "other[a]"、"config[timeout]"
    const match = key.match(/^([^[\]]+)\[([^\]]+)\]$/);
    if (match) {
      const [, prefix, nestedKey] = match;
      if (!data[prefix]) data[prefix] = {};
      data[prefix][nestedKey] = value;
    } else {
      data[key] = value;
    }
  }

  return data;
}

使用方式非常简洁，直接替换原有逻辑即可：

// 原写法（扁平化）
// const data = Array.from(new FormData(this.form).entries()).reduce(...);

// 新写法（自动嵌套）
const data = transformFormData(new FormData(this.form));
console.log(data);
// → { name: "X", email: "Y", other: { a: "A", b: "B" } }

✅ 优势说明：

• 正则匹配更精准：/^([^[\]]+)\[([^\]]+)\]$/ 可安全识别多级前缀（如 user[profile][avatar] 尚不支持，但本例中单层已覆盖常见场景）；
• 无硬编码字段名：不再依赖 key.startsWith('other[')，而是动态提取 prefix，便于复用到 settings[theme]、files[0] 等多种命名约定；
• 兼容原始字段：非方括号字段（如 name、email）保持原样，不干扰现有逻辑。

⚠️ 注意事项：

• 该实现仅支持单层嵌套（即 prefix[key]），如需深度嵌套（如 a[b][c]），建议引入专用库（如 form-data-to-object）或扩展正则与递归逻辑；
• 若表单含同名普通字段与嵌套字段（如同时存在 other 和 other[a]），后者将被挂载到 other 对象下，前者可能被覆盖——应避免此类命名冲突；
• FormData.entries() 返回的是迭代器，确保在调用 transformFormData 前表单未被重置或 DOM 已稳定。

通过这一轻量转换，你无需修改 HTML 结构或后端契约，即可让前端表单数据天然适配结构化 API 设计，提升前后端协作效率与代码可维护性。