如何校验并合并含重复name的表单对象数组为多维数组用于过滤

我来帮你解决这个问题，核心思路是先通过分组去重合并相同name的参数值，再转换成你需要的结构。下面是具体的实现步骤和代码：

实现思路 #

1. 用一个临时对象存储每个name对应的参数值：利用对象键的唯一性自动去重name，同时把多个非空值收集成数组。
2. 遍历原表单数组，区分空值和非空值的处理逻辑：空值直接保留单个空字符串，非空的重复值合并为数组。
3. 最后将临时对象转换回你需要的数组结构，每个元素是{name, value}的格式。

代码实现 #

假设你从serializeArray拿到的原数据是formData：

// 模拟serializeArray返回的原数据
const formData = [
  {name: "holiday", value: "newyear"},
  {name: "holiday", value: "christmas"},
  {name: "startDate", value: ""},
  {name: "genre", value: ""},
  {name: "city", value: ""}
];

// 1. 创建临时对象分组处理
const groupedData = {};
formData.forEach(item => {
  const { name, value } = item;
  
  if (!groupedData[name]) {
    // 首次遇到该name：空值直接存空字符串，非空值存为数组
    groupedData[name] = value === "" ? "" : [value];
  } else {
    // 已存在该name：只处理非空值，避免空值混入数组
    if (value !== "") {
      // 如果之前是空字符串，先转为数组再添加值
      if (groupedData[name] === "") {
        groupedData[name] = [value];
      } else {
        groupedData[name].push(value);
      }
    }
  }
});

// 2. 转换为目标结构数组
const filteredFormData = Object.entries(groupedData).map(([name, value]) => ({
  name,
  value: value // 数组或空字符串，保持对应格式
}));

console.log(filteredFormData);

输出结果 #

运行后你会得到完全符合需求的结构：

[
  {name: "holiday", value: ["newyear", "christmas"]},
  {name: "startDate", value: ""},
  {name: "genre", value: ""},
  {name: "city", value: ""}
]

额外说明 #

• 如果你的过滤器需要的是Set类型（比如你例子里的{"christmas", "newyear"}写法），只需要把数组转换为Set即可：把groupedData[name] = [value]改成groupedData[name] = new Set([value])，push改成add，最后转结构时保持Set格式就行。
• 边界情况处理：如果同一个name既有空值又有非空值，代码会自动忽略空值，只保留有效参数；如果所有值都是空，会保留单个空字符串，完全匹配你的需求。

之后你就可以把filteredFormData按照自定义规则传入filter()方法啦～

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