本文介绍如何将 FormData 中带方括号的键名（如 other[a]、other[b]）智能转换为多维嵌套对象，避免手动扁平化处理，确保 AJAX 提交时数据结构符合后端预期。

本文介绍如何将 formdata 中带方括号的键名（如 `other[a]`、`other[b]`）智能转换为多维嵌套对象，避免手动扁平化处理，确保 ajax 提交时数据结构符合后端预期。

在前端表单提交（尤其是通过 Axios 等库配合 FormData 发送 AJAX 请求）时，常需支持类似 PHP 风格的数组字段命名，例如 other[a]、other[b]，期望服务端接收为 { other: { a: 'A', b: 'B' } }。但原生 FormData.entries() 仅返回扁平键值对（如 "other[a]": "A"），无法直接映射为嵌套结构。为此，我们需要一个通用、健壮的转换函数。

以下是一个可扩展的 transformFormData 实现，不仅支持 other[a] 这类单层嵌套，还兼顾可读性与健壮性：

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

  for (const [key, value] of formData.entries()) {
    // 匹配形如 "prefix[key]" 的模式（支持多级，如 "user[profile][name]"）
    const match = key.match(/^([^[\]]+)(\[[^\]]+\])*$/);
    if (match && match[2]) {
      // 提取根键名（如 "other"）和所有嵌套路径（如 ["[a]", "[b]" ]）
      const rootKey = match[1];
      const pathParts = Array.from(key.matchAll(/\[([^\]]+)\]/g)).map(m => m[1]);

      // 逐层构建嵌套对象
      let target = data;
      for (let i = 0; i < pathParts.length - 1; i++) {
        const part = pathParts[i];
        if (!target[rootKey]) target[rootKey] = {};
        if (i === 0) {
          target = target[rootKey];
        } else {
          target = target[part] ??= {};
        }
      }

      // 设置最终值（最后一级 key）
      const lastKey = pathParts[pathParts.length - 1];
      if (!target[rootKey]) target[rootKey] = {};
      target[rootKey][lastKey] = value;
    } else {
      // 普通字段，直接赋值
      data[key] = value;
    }
  }

  return data;
}

不过，针对你当前场景（仅 other[a]/other[b] 这类一级嵌套），更简洁、高效且易维护的写法如下：

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

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

  for (const [key, value] of formData.entries()) {
    const bracketMatch = key.match(/^(\w+)\[(\w+)\]$/);
    if (bracketMatch) {
      const [, root, nestedKey] = bracketMatch;
      if (!data[root]) data[root] = {};
      data[root][nestedKey] = value;
    } else {
      data[key] = value;
    }
  }

  return data;
}

// 使用方式（替换原有逻辑）
const formData = new FormData(this.form);
const payload = transformFormData(formData);

// 后续提交（例如 Axios）
axios.post('/api/submit', payload)
  .then(res => console.log('Success:', res.data));

✅ 注意事项：

• 此方案不依赖外部库，纯原生 JavaScript，兼容现代浏览器；
• 正则 /^(\w+)\[(\w+)\]$/ 严格匹配 字母+[字母] 格式，避免误解析 user[email]（含 @）或带空格字段；若需支持更复杂键名（如含连字符、数字开头），可调整正则为 /^([\w-]+)\[([\w-]+)\]$/；
• 若表单存在多重嵌套（如 config[db][host]），建议升级为递归解析版本（可基于 lodash.set 或自定义路径分割逻辑）；
• 始终确保 FormData 已正确收集所有字段（如 <input name="other[a]"> 的 name 属性必须准确）；
• 对于文件字段，该逻辑同样适用——value 将是 File 对象，可直接参与后续上传。

通过该转换，你即可无缝对接需要结构化 JSON 的后端接口，告别手动拼接、提升代码可维护性与可测试性。