如何将含方括号键的表单数据转换为多维嵌套对象？

要把other[a]这类带括号的表单字段转换成嵌套对象结构，你需要修改当前的reduce逻辑，手动解析键名中的层级关系，而不是直接将键值对平级赋值。

实现步骤： #

1. 写一个辅助函数，用来处理嵌套键的赋值，自动创建层级对象
2. 在reduce循环中判断键是否包含括号，调用辅助函数处理嵌套字段，普通字段直接赋值

完整代码示例： #

// 辅助函数：将带括号的键路径赋值到嵌套对象中
function setNestedValue(obj, keyPath, value) {
  // 拆分键路径，比如"other[a]"拆分成["other", "a"]，过滤空字符串
  const keys = keyPath.split(/\[|\]/).filter(Boolean);
  let currentLayer = obj;
  
  // 遍历除最后一个键之外的层级，创建空对象（如果不存在）
  for (let i = 0; i < keys.length - 1; i++) {
    const key = keys[i];
    if (!currentLayer[key]) {
      currentLayer[key] = {};
    }
    currentLayer = currentLayer[key];
  }
  
  // 给最后一层的键赋值
  currentLayer[keys[keys.length - 1]] = value;
}

// 处理FormData转换
const data = Array.from(new FormData(this.form).entries()).reduce((memo, [key, value]) => {
  if (key.includes('[')) {
    // 嵌套字段，用辅助函数处理
    setNestedValue(memo, key, value);
  } else {
    // 普通平级字段直接赋值
    memo[key] = value;
  }
  return memo;
}, {});

测试结果： #

运行上述代码后，你的表单数据会被解析为：

{
  "name":"X",
  "email":"Y",
  "other": {
    "a": "A",
    "b": "B"
  }
}

额外说明： #

这个辅助函数还支持更深层级的嵌套字段，比如表单中如果有other[c][d]这样的字段，会自动解析为{ other: { c: { d: '值' } } }的结构，不需要额外修改代码。

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