如何高效地将嵌套对象数组扁平化为单一对象数组

发布时间 - 2026-01-09 00:00:00    点击率:

本文介绍一种使用 `map` 和 `for...in` 循环遍历嵌套结构的方式,将每个对象的 `items` 数组中键值对(如 `{ productone: "crust", quantity: 2.2 }`)提取为外层对象的属性,实现嵌套数组到扁平对象数组的高效转换。

在实际开发中,我们常遇到类似这样的数据结构:一个订单数组,每个订单包含若干商品项(items),而每项又以动态字段名(如 productOne、productTwo)标识商品名称,quantity 字段表示数量。目标是将这些商品信息“提升”至订单层级,以商品名为键、数量为值,从而生成更易消费的扁平化结构。

以下是一个简洁、可读性强且兼顾性能的解决方案:

function flattenItems(arr) {
  return arr.map(order => {
    // 浅拷贝原对象,避免修改原始数据
    const flattened = { ...order };

    // 遍历 items 数组
    for (const item of order.items) {
      let productName = null;
      let quantity = null;

      // 动态识别非 quantity 字段作为产品名
      for (const key in item) {
        if (key === 'quantity') {
          quantity = item[key];
        } else {
          productName = item[key];
        }
      }

      // 将 product name → quantity 映射到顶层对象
      if (productName !== null && quantity !== null) {
        flattened[productName] = quantity;
      }
    }

    // 移除原始 items 字段
    delete flattened.items;

    return flattened;
  });
}

使用示例

const firstArray = [
  {
    amount: 343,
    code: "RCU8YI0NKS",
    items: [
      { productOne: "crust", quantity: 2.2 },
      { productTwo: "dust", quantity: 34 }
    ],
    user_id: "wewewefwOHG22323kj"
  },
  {
    amount: 343,
    code: "RCU8YI0NKS",
    items: [
      { productTwo: "dust", quantity: 32 },
      { productThree: "must", quantity: 34 }
    ],
    user_id: "m2LgLRD9MEVNAX56JTpRYDkOOjd2"
  }
];

console.log(flattenItems(firstArray));
// 输出即为目标格式 secondArray

⚠️ 注意事项

  • 该方案假设每个 item 对象恰好包含一个非 quantity 的键(如 productOne),其值为字符串型产品名;若存在多个非 quantity 字段,仅取最后一个匹配项(可通过提前 break 或改用 Object.keys().find() 增强健壮性)。
  • 若需支持重复商品名合并(如同一订单中多次出现 "dust"),应改为累加逻辑:flattened[productName] = (flattened[productName] || 0) + quantity;
  • 时间复杂度为 O(n × m)(n 为订单数,m 为平均 items 长度),已是此类结构下的最优解——无法绕过遍历,但无需额外空间构建中间映射表,内存友好。

总结来说,该方法以清晰的语义、可控的副作用和良好的可维护性,完成了从嵌套到扁平的关键数据形态转换,适用于订单聚合、报表生成、API 数据适配等多种场景。


# 键值对  # Object  # for  # break  # 字符串  # 循环  # 数据结构  # map  # 对象  # 遍历  # 是一个  # 多个  # 适用于  # 已是  # 此类  # 可通过  # 即为  # 最优 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: JavaScript如何实现错误处理_try...catch如何捕获异常?  Laravel如何实现邮件验证激活账户_Laravel内置MustVerifyEmail接口配置【步骤】  Laravel怎么实现微信登录_Laravel Socialite第三方登录集成  详解Huffman编码算法之Java实现  如何用腾讯建站主机快速创建免费网站?  如何在阿里云部署织梦网站?  Claude怎样写结构化提示词_Claude结构化提示词写法【教程】  jQuery validate插件功能与用法详解  深圳网站制作培训,深圳哪些招聘网站比较好?  免费网站制作appp,免费制作app哪个平台好?  如何在建站之星绑定自定义域名?  北京网站制作的公司有哪些,北京白云观官方网站?  做企业网站制作流程,企业网站制作基本流程有哪些?  Laravel模型关联查询教程_Laravel Eloquent一对多关联写法  Edge浏览器怎么启用睡眠标签页_节省电脑内存占用优化技巧  在线教育网站制作平台,山西立德教育官网?  如何在云指建站中生成FTP站点?  如何快速查询域名建站关键信息?  英语简历制作免费网站推荐,如何将简历翻译成英文?  Laravel如何自定义分页视图?(Pagination示例)  使用C语言编写圣诞表白程序  简单实现Android文件上传  如何在 Pandas 中基于一列条件计算另一列的分组均值  如何在香港免费服务器上快速搭建网站?  详解CentOS6.5 安装 MySQL5.1.71的方法  iOS中将个别页面强制横屏其他页面竖屏  js代码实现下拉菜单【推荐】  Javascript中的事件循环是如何工作的_如何利用Javascript事件循环优化异步代码?  Laravel如何使用模型观察者?(Observer代码示例)  独立制作一个网站多少钱,建立网站需要花多少钱?  C++时间戳转换成日期时间的步骤和示例代码  JS弹性运动实现方法分析  Windows Hello人脸识别突然无法使用  laravel怎么用DB facade执行原生SQL查询_laravel DB facade原生SQL执行方法  JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)  如何在万网主机上快速搭建网站?  Laravel如何使用Service Container和依赖注入?(代码示例)  Win11怎么查看显卡温度 Win11任务管理器查看GPU温度【技巧】  如何在IIS管理器中快速创建并配置网站?  Win11怎么关闭透明效果_Windows11辅助功能视觉效果设置  如何在腾讯云服务器上快速搭建个人网站?  *服务器网站为何频现安全漏洞?  Laravel如何记录自定义日志?(Log频道配置)  Midjourney怎么调整光影效果_Midjourney光影调整方法【指南】  Laravel如何实现多级无限分类_Laravel递归模型关联与树状数据输出【方法】  Laravel如何理解并使用服务容器(Service Container)_Laravel依赖注入与容器绑定说明  百度输入法ai组件怎么删除 百度输入法ai组件移除工具  免费的流程图制作网站有哪些,2025年教师初级职称申报网上流程?  大连 网站制作,大连天途有线官网?  Laravel如何配置和使用队列处理异步任务_Laravel队列驱动与任务分发实例