如何将对象中具有相同数字后缀的键值对合并为结构化数组

本文介绍一种高效、可扩展的方法,将具有相同数字后缀(如 `lote0` 与 `loteqnt0`)的对象键值对自动分组并映射为统一结构的对象数组。

在实际开发中,我们常遇到一类“成对命名”的扁平对象数据,例如表单字段、多组配置项或动态生成的输入框(如 field0, fieldLabel0, fieldRequired0),它们通过数字后缀关联逻辑关系。手动硬编码分组(如分别过滤 lote* 和 loteQnt*)不仅脆弱、难以维护,还无法应对新增字段类型或不规则命名。

更健壮的解决方案是:提取所有键的数字标识符 → 按数字归组 → 动态映射字段名 → 构建目标对象。以下是推荐实现:

function groupByNumericSuffix(obj, keyPatterns) {
  // keyPatterns: [{ key: 'name', pattern: /lote(\d+)$/ }, { key: 'value', pattern: /loteQnt(\d+)$/ }]
  const groups = new Map(); // Map

  Object.entries(obj).forEach(([key, value]) => {
    for (const { key: targetKey, pattern } of keyPatterns) {
      const match = key.match(pattern);
      if (match && match[1] !== undefined) {
        const num = match[1];
        if (!groups.has(num)) groups.set(num, {});
        groups.get(num)[targetKey] = value;
      }
    }
  });

  // 按数字顺序返回结果(可选,保证稳定性)
  return Array.from(groups.entries())
    .sort(([a], [b]) => Number(a) - Number(b))
    .map(([, obj]) => obj);
}

// 使用示例
const vls = {
  "lote0": "jg",
  "lote1": "h",
  "lote2": "fm",
  "loteQnt0": "jgvalue",
  "loteQnt1": "hvalue",
  "loteQnt2": "fmvalue"
};

const result = groupByNumericSuffix(vls, [
  { key: 'name', pattern: /lote(\d+)$/ },
  { key: 'value', pattern: /loteQnt(\d+)$/ }
]);

console.log(result);
// [
//   { name: "jg", value: "jgvalue" },
//   { name: "h", value: "hvalue" },
//   { name: "fm", value: "fmvalue" }
// ]

优势说明

  • 解耦清晰:字段语义(name/value)与命名规则(正则)分离,新增类型只需扩展 keyPatterns;
  • 健壮容错:自动跳过无匹配后缀的键,支持不连续编号(如 lote0, lote5, loteQ

    nt5);
  • 顺序可控:通过 sort() 确保输出按数字升序排列,符合直觉;
  • 类型友好:TypeScript 下可轻松添加泛型约束,保障 targetKey 类型安全。

⚠️ 注意事项

  • 正则需确保捕获组 (\d+) 准确提取数字(避免 lote10abc 被误判为 10);建议使用 ^lote(\d+)$ 严格边界;
  • 若存在同一数字对应多个同类型键(如两个 lote0),后出现的值会覆盖前者——这通常符合预期,但需在业务中明确约定;
  • 如需支持前导零(如 lote001),可将 match[1] 替换为原字符串,或使用 parseInt(match[1], 10) 统一处理。

该方法将硬编码逻辑升级为声明式配置,显著提升可读性、可测试性与长期可维护性,适用于表单聚合、动态表格渲染、配置解析等多种场景。