讲师中心 微信公众号

工具推荐

视频效率加速
立刻MV
立刻MV

低成本歌曲 MV、视频生成

剧云
剧云

中文短剧剧本制作平台

Seko
Seko

AI短剧一键生成成片

Laper
Laper

剧本策划到成片协作

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

大墨姑娘_1693

大墨姑娘_1693

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

|

894人浏览过

|

来源于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())

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

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大模型工具。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

豆包大模型

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

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

UpDream
UpDream Hot

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

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

花生AI
花生AI Hot

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

WorkBuddy

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

相关专题

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

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

838

2025.12.04

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

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

710

2025.09.05

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

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

343

2025.11.16

golang map原理
golang map原理

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

553

2025.11.17

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

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

323

2025.11.27

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

40

2026.11.06

Postman请求头Headers怎么设置
Postman请求头Headers怎么设置

围绕Postman HTTP请求头配置展开,讲解Headers选项的具体使用方式,包括Key和Value参数填写、请求头信息添加、常见Header字段设置及请求头修改方法,帮助用户解决接口调试过程中遇到的请求头配置问题。

20

2026.11.06

Postman接口请求发送教程
Postman接口请求发送教程

详细介绍Postman接口请求的创建与发送方法,涵盖GET和POST请求、URL配置、请求参数、Headers请求头、Body请求体设置以及响应结果查看,帮助用户掌握Postman接口请求的完整操作流程。

20

2026.11.06

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

40

2026.11.05

热门下载

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

精品课程

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

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