讲师中心 微信公众号
AI工具推荐 视频效率加速

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

冬芳君_9277

冬芳君_9277

发布时间:2026-01-20 15:23:16

|

523人浏览过

|

来源于php中文网

原创

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

本文介绍一种高效、可扩展的方法,将具有相同数字后缀的键(如 `lote0` 与 `loteqnt0`)自动配对,并生成标准化的对象数组(如 `{ name: 'jg', value: 'jgvalue' }`),避免硬编码分组逻辑。

在实际前端开发或数据处理场景中,我们常遇到一类“带编号的平行字段”结构:例如表单中动态生成的 field0/fieldValue0、item1/itemPrice1 等键名。这类数据天然具备分组逻辑(后缀数字一致即属同一组),但原始对象是扁平的,需按数字索引聚合为结构化数组。

以下是一种健壮、通用且无需预设键名前缀的解决方案:

前端美化
前端美化

使用此技能可创建独具特色、具备生产级质量的前端界面,设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时(例如:网站、落地页、仪表盘、React 组件、HTML/CSS 布局,或对任意 Web UI 进行样式优化与视觉美化),请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计,避免千篇一律的 AI 风格。

下载

✅ 核心思路

  1. 提取所有键的数字后缀:使用正则 /(\d+)$/ 匹配末尾数字;
  2. 按数字分组键值对:构建 Map<number, Array<[key, value]>>;
  3. 为每组生成目标对象:根据键名前缀(如 'lote' → name,'loteQnt' → value)映射字段;
  4. 支持自定义映射规则,便于复用到不同业务场景。

? 示例代码(推荐实现)

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

// 定义字段映射规则:正则匹配前缀 → 目标属性名
const fieldMapping = [
  { pattern: /^lote(\d+)$/, key: 'name' },
  { pattern: /^loteQnt(\d+)$/, key: 'value' }
];

// 步骤1:按数字后缀分组
const groups = new Map();
Object.entries(vls).forEach(([key, value]) => {
  for (const { pattern, key: targetKey } of fieldMapping) {
    const match = key.match(pattern);
    if (match) {
      const num = match[1];
      if (!groups.has(num)) groups.set(num, {});
      groups.get(num)[targetKey] = value;
      break; // 每个键只匹配一个规则
    }
  }
});

// 步骤2:转换为数组(确保顺序,按数字升序)
const result = Array.from(groups.entries())
  .sort(([a], [b]) => Number(a) - Number(b))
  .map(([, obj]) => obj);

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

⚠️ 注意事项

  • 键名唯一性保障:同一数字后缀下,每个映射规则应仅匹配一个键(如不能同时存在 lote0 和 loteAlt0),否则后者会覆盖前者;
  • 数字排序:Array.from(groups.entries()).sort() 确保输出顺序与数字逻辑一致(非插入顺序);
  • 扩展性:新增字段(如 loteUnit2: 'kg')只需在 fieldMapping 中添加 { pattern: /^loteUnit(\d+)$/, key: 'unit' } 即可;
  • 健壮性:若某数字缺失某字段(如无 loteQnt1),对应位置将为 undefined,生产环境建议增加空值校验。

该方法摆脱了原方案中手动拆分 lote/loteQnt 对象、依赖 Object.values() 顺序等脆弱假设,真正以「数字后缀」为聚合依据,语义清晰、易于维护,适用于各类动态表单、配置项解析等场景。

热门AI工具

更多
LibLibAI
LibLibAI Hot

一款AI视频创作工具,主要用于国内领先的AI创意平台,以海量模型、低门槛操作与“创作-分享-商业化”生态,让小白与专业创作者都能高效实现图文乃至视频创意表达,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

相关专题

更多
sort排序函数用法
sort排序函数用法

sort排序函数的用法:1、对列表进行排序,默认情况下,sort函数按升序排序,因此最终输出的结果是按从小到大的顺序排列的;2、对元组进行排序,默认情况下,sort函数按元素的大小进行排序,因此最终输出的结果是按从小到大的顺序排列的;3、对字典进行排序,由于字典是无序的,因此排序后的结果仍然是原来的字典,使用一个lambda表达式作为key参数的值,用于指定排序的依据。

1098

2023.09.04

golang map内存释放
golang map内存释放

本专题整合了golang map内存相关教程,阅读专题下面的文章了解更多相关内容。

430

2025.09.05

golang map相关教程
golang map相关教程

本专题整合了golang map相关教程,阅读专题下面的文章了解更多详细内容。

323

2025.11.16

golang map原理
golang map原理

本专题整合了golang map相关内容,阅读专题下面的文章了解更多详细内容。

473

2025.11.17

java判断map相关教程
java判断map相关教程

本专题整合了java判断map相关教程,阅读专题下面的文章了解更多详细内容。

243

2025.11.27

undefined是什么
undefined是什么

undefined是代表一个值或变量不存在或未定义的状态。它可以作为默认值来判断一个变量是否已经被赋值,也可以用于设置默认参数值。尽管在不同的编程语言中,undefined可能具有不同的含义和用法,但理解undefined的概念可以帮助我们更好地理解和编写程序。本专题为大家提供undefined相关的各种文章、以及下载和课程。

11485

2023.07.31

网页undefined是什么意思
网页undefined是什么意思

网页undefined是指页面出现了未知错误的意思,提示undefined一般是在开发网站的时候定义不正确或是转换不正确,或是找不到定义才会提示undefined未定义这个错误。想了解更多的相关内容,可以阅读本专题下面的文章。

5447

2024.08.14

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容,阅读下面的文章了解更多详细内容。后续继续更新。

2516

2025.12.25

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

60

2026.09.23

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn