0

0

如何从对象数组中高效提取嵌套属性的所有值

聖光之護

聖光之護

发布时间:2026-02-22 08:36:02

|

874人浏览过

|

来源于php中文网

原创

如何从对象数组中高效提取嵌套属性的所有值

本文详解如何使用 JavaScript 的 flatMap() 与 Object.values() 组合,从数组中每个对象的指定嵌套对象(如 tipo)里批量提取全部属性值,并展平为一维数组。

本文详解如何使用 javascript 的 `flatmap()` 与 `object.values()` 组合,从数组中每个对象的指定嵌套对象(如 `tipo`)里批量提取全部属性值,并展平为一维数组。

在实际开发中,我们常遇到结构类似如下数据:一个产品数组,每个产品对象内含一个名为 tipo 的嵌套对象,该对象存储多种规格/类型对应的数值(如不同部位的重量或价格)。目标是忽略键名,仅提取所有 tipo 对象内部的值,并合并为单一扁平数组——例如将三组 tipo 中的 8 + 8 + 2 = 18 个数值,统一输出为 [25, 25, ..., 500, 50, ..., 30, 50]。

直接使用 for...in 遍历数组(如提问者尝试的)会遍历数组索引("0", "1", "2"),而非对象内容,因此输出 "[object Object]";而若用 for...of 或 forEach 却未深入访问 tipo 属性,则仍无法获取其内部值。正确解法需两步协同:

  1. 对每个产品对象,提取其 tipo 对象的所有值 → 使用 Object.values(obj.tipo)
  2. 将每轮提取出的子数组(如 [25,25,...])合并为单个数组 → 使用 flatMap()(等价于 map() + flat())

以下是完整、可运行的解决方案:

故事AI绘图神器
故事AI绘图神器

文本生成图文视频的AI工具,无需配音,无需剪辑,快速成片,角色固定。

下载
const productsArray = [
  {
    id: 1,
    title: "Tacos",
    price: 30,
    score: 40,
    description: "Delicioso taco con barbacoa recien salida del horno sobre dos tortilla de maiz",
    tipo: {
      campechano: 25,
      costilla: 25,
      cspaldilla: 25,
      lomo: 25,
      maciza: 25,
      panza: 25,
      pescuezo: 25,
      surtida: 25,
    }
  },
  {
    id: 2,
    title: "Kilogramos",
    price: 500,
    score: 89,
    description: "Delicioso kilo de barbacoa hecha al horno con leña y sin hueso",
    tipo: {
      campechano: 500,
      costilla: 50,
      cspaldilla: 50,
      lomo: 50,
      maciza: 50,
      panza: 50,
      pescuezo: 50,
      surtida: 50,
    }
  },
  {
    id: 3,
    title: "Consome",
    price: 50,
    score: 25,
    description: "Delicioso Consome de Borrego con arroz y garbanzo",
    tipo: {
      chicho: 30,
      grande: 50,
    }
  }
];

// ✅ 核心一行:flatMap + Object.values
const allTipoValues = productsArray.flatMap(product => Object.values(product.tipo));
console.log(allTipoValues);
// 输出:[25, 25, 25, 25, 25, 25, 25, 25, 500, 50, 50, 50, 50, 50, 50, 50, 30, 50]

关键说明与注意事项

  • 为什么不用 map().flat()?
    flatMap() 是语义更精准的选择:它原生支持“映射后立即展平一层”,避免额外调用 .flat(1),性能略优且代码更简洁。

  • 健壮性增强(推荐生产环境使用)
    若部分对象可能缺失 tipo 属性,应添加安全访问逻辑,防止 TypeError:

    const safeTipoValues = productsArray
      .flatMap(product => product.tipo ? Object.values(product.tipo) : []);
  • 替代方案对比(不推荐但需了解)

    • reduce():可实现但冗长,易出错;
    • for 循环 + push(...Object.values()):可读性差,违背函数式思想;
    • concat() 链式调用:已废弃,性能低下。
      flatMap() + Object.values() 是现代 JavaScript 中最清晰、高效、符合规范的组合。

掌握这一模式,不仅能解决 tipo 提取问题,还可泛化至任意嵌套对象属性(如 user.profile.settings、order.items.prices 等),是处理结构化数据的必备技能。

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
php中foreach用法
php中foreach用法

本专题整合了php中foreach用法的相关介绍,阅读专题下面的文章了解更多详细教程。

182

2025.12.04

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

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

77

2025.09.05

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

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

36

2025.11.16

golang map原理
golang map原理

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

67

2025.11.17

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

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

46

2025.11.27

pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

867

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

276

2026.02.13

Flutter跨平台开发与状态管理实战
Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

157

2026.02.13

TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

27

2026.02.13

热门下载

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

精品课程

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号