如何将JS serializeArray函数返回结果转换为单一数组？

嘿，我来帮你搞定这个问题！serializeArray() 返回的这种包含 name 和 value 的扁平数组，本质是表单字段的平铺结构，我们只需要解析 name 属性里的路径规则，就能把它们组装成更易用的单一结构化对象数组。

实现思路 #

核心逻辑是拆解每个项的 name 字符串：提取出模板的索引（比如 [1] 里的数字1）和对应的字段名（比如 maintenance_problem_id），然后把同一索引下的所有字段合并到同一个对象中，最后将这些对象整理成数组即可。

具体代码实现 #

function transformSerializedData(serializedArray) {
  const templateMap = {};

  serializedArray.forEach(item => {
    // 用正则匹配name中的模板索引和字段名，适配你给出的格式
    const regexMatch = item.name.match(/sub_maintenance_template\[(\d+)\]\[(\w+)\]/);
    if (!regexMatch) return; // 如果格式不匹配，直接跳过该项

    const [, templateIndex, fieldName] = regexMatch;
    // 若当前索引的模板对象不存在，先初始化空对象
    if (!templateMap[templateIndex]) {
      templateMap[templateIndex] = {};
    }
    // 赋值到对应字段，还可以按需做类型转换（比如把ID、天数转成数字）
    templateMap[templateIndex][fieldName] = item.value;
    // 示例：针对数值型字段做转换的代码
    // if (fieldName.endsWith('id') || fieldName === 'days_to_complete') {
    //   templateMap[templateIndex][fieldName] = parseInt(item.value, 10);
    // } else {
    //   templateMap[templateIndex][fieldName] = item.value;
    // }
  });

  // 将映射对象转换为数组，得到最终的单一结构化数组
  return Object.values(templateMap);
}

使用示例 #

假设你的 serializeArray() 返回数据如下：

const formData = [
  {name: "sub_maintenance_template[1][maintenance_problem_id]", value: "471354"},
  {name: "sub_maintenance_template[1][maintenance_location_id]", value: "38565"},
  {name: "sub_maintenance_template[1][maintenance_priority_id]", value: "24879"},
  {name: "sub_maintenance_template[1][days_to_complete]", value: "2"},
  {name: "sub_maintenance_template[1][description]", value: "fff"}
];

const transformedArray = transformSerializedData(formData);
console.log(transformedArray);

输出结果 #

[
  {
    maintenance_problem_id: "471354",
    maintenance_location_id: "38565",
    maintenance_priority_id: "24879",
    days_to_complete: "2",
    description: "fff"
  }
]

如果你的表单里有多个模板（比如sub_maintenance_template[2][...]这类项），这个函数会自动把不同索引的模板分成数组中的独立元素，完美适配多模板场景。

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