多维数组操作,不要再用遍历循环foreach了!来试试数组展平的小妙招!array.flat()用法与array.flatMap() 用法及二者差异详解

目录

一、array.flat()方法

1.1、array.flat()的语法及使用

①语法

②返回值

③用途

二、array.flatMap() 方法

2.1、array.flatMap()的语法及作用

①语法

②返回值

③用途

三、array.flat()与array.flatMap() 的主要区别

3.1、映射与展平

3.2、参数接受差异

3.3、适用场景的差异

3.3.1、处理某种JSON响应数据

3.3.2、处理表格数据

3.3.3、处理用户评论(带有附加信息的数据)

3.3.4、处理文件系统路径

四、总结


一、array.flat()方法

1.1、array.flat()的语法及使用

①语法

        array.flat()方法接受一个可选的参数,该参数指定要展平的深度。如果不提供参数,默认深度为1,意味着它只会展平一层嵌套数组。如果该参数为Infinity,则将数组完全展开(为一维数组)。

②返回值

        返回一个新数组,其中包含原数组及其所有子数组的元素。

③用途

        array.flat()方法用于将一个嵌套数组(数组中的数组)展平成一个一维数组。

        当处理嵌套数组时,array.flat()非常有用,特别是需要将数组简化为单一维度,以便进行迭代或其他操作。

// 基本语法示范
const nestedArray = [1, [2, [3, 4]], 5];
const flatArray = nestedArray.flat(); // 默认深度为1,结果为 [1, 2, [3, 4], 5]
const deeplyFlatArray = nestedArray.flat(2); // 深度为2,结果为 [1, 2, 3, 4, 5]

二、array.flatMap() 方法

2.1、array.flatMap()的语法及作用

①语法

        array.flatMap()方法接受一个映射函数作为参数,该函数定义了如何转换数组中的每个元素。

②返回值

        返回一个新数组,其中包含映射函数返回的每个数组的展平元素。

③用途

        array.flatMap()方法不仅将嵌套数组展平,还允许你指定一个映射函数来转换数组中的每个元素,然后再进行展平。

        array.flatMap()在你需要在展平数组的同时对数组元素进行某种转换时非常有用。例如,当你需要将每个元素复制或转换为另一种形式时。

// 基础用法示范const numbers = [1, 2, 3, 4];
const flatMappedArray = numbers.flatMap(num => [num, num * 2]); // 结果为 [1, 2, 2, 4, 3, 6, 4, 8]

三、array.flat()与array.flatMap() 的主要区别

3.1、映射与展平

        array.flat()仅负责展平数组,不涉及元素的转换;array.flatMap()结合了映射和展平,允许你在展平之前对元素进行转换。

        这里就有点像array.map + array.flat() - 超过1层的展平 = array.flatMap()。这个方法的语义化很明显,但是也可以通过嵌套的使用来实现基于array.flatMap()的映射和高维展平。

// flatMap中嵌套flat来实现复杂的展平const complexArray = [{ strings: ['a', 'b'], numbers: [1, 2] },{ strings: ['c', 'd'], numbers: [3, 4] }
];const result = complexArray.flatMap(obj => {// 首先,使用flatMap映射每个字符串到一个包含字符串和对应数字的数组return obj.strings.flatMap(str => {// 然后,再次使用flatMap映射每个数字到一个包含字符串和数字的数组return obj.numbers.map(num => [str, num]);});
}).flat(Infinity); // 使用Infinity确保所有层级都被展平console.log(result);// 结果为:['a', 1, 'a', 2, 'b', 1, 'b', 2,'c', 3, 'c', 4, 'd', 3, 'd', 4
]const result2 = complexArray.flatMap(obj => {// 对于每个对象,创建一个由字符串和数字组成的子数组的新数组return obj.strings.flatMap(str => {// 对于每个字符串,创建一个由该字符串和每个数字组成的子数组return obj.numbers.map(num => [str, num]);});
});console.log(result2);// 结果为:[['a', 1], ['a', 2], ['b', 1], ['b', 2],['c', 3], ['c', 4], ['d', 3], ['d', 4]
]

3.2、参数接受差异

        array.flat()接受一个可选的深度参数。其中Infinity可以将数组展平到一维。

        array.flatMap()接受一个映射函数作为参数。如果要进行跨纬度展平(比如三维展平成一维),需要使用嵌套或者链式调用。

3.3、适用场景的差异

        当你只需要简单地展平数组时,使用array.flat()。

        当你需要在展平数组的同时对数组元素进行转换时,使用array.flatMap()。

        以下案例能帮你更好的理解rray.flat()与array.flatMap() 的使用场景差异:

3.3.1、处理某种JSON响应数据

        假设你从API获取了一个JSON响应,其中包含了嵌套的数组数据,你需要将这些数据展平以便于进一步处理。

// API响应如下:
const apiResponse = [[{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }], [{ id: 3, name: 'Charlie' }]];// 使用.flat()来展平嵌套数组:
const flatUsers = apiResponse.flat();
console.log(flatUsers); // 输出: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }]// 假设我们需要筛选出ID大于2的用户,并且转换为只包含ID的数组:
const filteredUsersIds = apiResponse.flat().filter(user => user.id > 2).map(user => user.id);
console.log(filteredUsersIds); // 输出: [3]

3.3.2、处理表格数据

        在一个Web应用中,你有一个表格,每行代表一个项目,每个项目有多个属性。现在你需要将这些属性展平,以便在图表中展示。

// 表格数据如下:
const tableData = [{ project: 'A', attributes: ['Size', 'Color'] },{ project: 'B', attributes: ['Weight', 'Material'] }
];// 使用.flat()来展平属性数组:
const flatAttributes = tableData.flatMap(row => row.attributes);
console.log(flatAttributes); // 输出: ['Size', 'Color', 'Weight', 'Material']// 假设我们需要创建一个包含项目和属性的数组:
const projectAttributes = tableData.flatMap(row => row.attributes.map(attr => [row.project, attr]));
console.log(projectAttributes); // 输出: [['A', 'Size'], ['A', 'Color'], ['B', 'Weight'], ['B', 'Material']]

3.3.3、处理用户评论(带有附加信息的数据)

        在一个社交媒体应用中,用户可以对帖子进行评论,每个评论可能包含多个回复。你需要将所有评论和回复展平,以便进行搜索或索引。

// 假设评论数据如下:
const comments = [{ user: 'User1', comment: 'Great post!', replies: ['Reply1', 'Reply2'] },{ user: 'User2', comment: 'Thanks!', replies: ['Reply3'] }
];// 使用.flat()来展平回复数组:
const flatReplies = comments.flatMap(comment => comment.replies);
console.log(flatReplies); // 输出: ['Reply1', 'Reply2', 'Reply3']// 假设我们需要创建一个包含用户和评论/回复的数组:
const commentReplies = comments.flatMap(comment => comment.replies.map(reply => ({ user: comment.user, text: reply }))
);
console.log(commentReplies); // 输出: [{ user: 'User1', text: 'Reply1' }, { user: 'User1', text: 'Reply2' }, { user: 'User2', text: 'Reply3' }]

3.3.4、处理文件系统路径

        在一个文件管理应用中,你需要处理文件系统路径,这些路径可能是嵌套的。

// 假设文件路径如下:
const filePaths = [['Documents', 'Projects'], ['Pictures', ['Holiday', 'Birthday']]];// 使用.flat()来展平路径数组:
const flatPaths = filePaths.flat(2); // 指定深度为2
console.log(flatPaths); // 输出: ['Documents', 'Projects', 'Pictures', 'Holiday', 'Birthday']// 假设我们需要为每个路径添加文件类型:
const fileTypes = [['Documents', '.txt'], ['Pictures', ['Holiday', '.jpg'], ['Birthday', '.png']]];const formattedPaths = fileTypes.flatMap(dir => dir.flatMap(file => file.endsWith('.jpg') ? [`Image: ${file}`] : [])
);
console.log(formattedPaths); // 输出: ['Image: Holiday.jpg']

四、总结

        理论上array.flat()能做的事情,array.flatMap()都可以做,但是array.flat()更简单,占用内存更少,执行更快。

        这个相对冷门一些,w3school上都没有相关教程,看到就是赚到,收藏就是财富!

        丰富的前端内容请看:各种前端问题的技巧和解决方案

        自引链接:多维数组操作,不要再用遍历循环foreach了!来试试数组展平的小妙招!

        博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/19766.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CLIP 源码分析:simple_tokenizer.py

tokenizer的含义 from .clip import *引入头文件时为什么有个. 正文 import gzip import html import os from functools import lru_cacheimport ftfy import regex as re# 上面的都是头文件# 这段代码定义了一个函数 default_bpe(),它使用了装饰器 lru_cache()。…

一维时间序列信号的改进小波降噪方法(MATLAB R2021B)

目前国内外对于小波分析在降噪方面的方法研究中,主要有小波分解与重构法降噪、小波阈值降噪、小波变换模极大值法降噪等三类方法。 (1)小波分解与重构法降噪 早在1988 年,Mallat提出了多分辨率分析的概念,利用小波分析的多分辨率特性进行分…

DAQmx Connect Terminals (VI) 信号路由作用及意义

DAQmx Connect Terminals是一个LabVIEW虚拟仪器(VI),用于配置和连接数据采集系统中的物理终端或虚拟终端。这一功能在配置复杂的数据采集(DAQ)系统时非常重要,因为它允许用户在不改变硬件连接的情况下&…

Python——Selenium快速上手+方法(一站式解决问题)

目录 前言 一、Selenium是什么 二、Python安装Selenium 1、安装Selenium第三方库 2、下载浏览器驱动 3、使用Python来打开浏览器 三、Selenium的初始化 四、Selenium获取网页元素 4.1、获取元素的实用方法 1、模糊匹配获取元素 & 联合多个样式 2、使用拉姆达表达式 3、加上…

Python零基础-下【详细】

接上篇继续: Python零基础-中【详细】-CSDN博客 目录 十七、网络编程 1、初识socket (1)socket理解 (2)图解socket (3)戏说socket (4)网络服务 (5&a…

实战经验分享之移动云快速部署Stable Diffusion SDXL 1.0

本文目录 前言产品优势部署环境准备模型安装测试运行 前言 移动云是中国移动面向政府、企业和公众的新型资源服务。 客户以购买服务的方式,通过网络快速获取虚 拟计算机、存储、网络等基础设施服务;软件开发工具、运行环境、数据库等平台服务&#xff1…

【评价类模型】熵权法

1.客观赋权法: 熵权法是一种客观求权重的方法,所有客观求权重的模型中都要有以下几步: 1.正向化处理: 极小型指标:取值越小越好的指标,例如错误率、缺陷率等。 中间项指标:取值在某个范围内较…

[ubuntu18.04]搭建mptcp测试环境说明

MPTCP介绍 Multipath TCP — Multipath TCP -- documentation 2022 documentation 安装ubuntu18.04,可以使用虚拟机安装 点击安装VMware Tool 桌面会出现如下图标 双击打开VMware Tools,复制如下图所示的文件到Home目录 打开终端,切换到管…

[Linux]重定向

一、struct file内核对象 struct file是在内核中创建,专门用来管理被打开文件的结构体。struct file中包含了打开文件的所有属性,文件的操作方法集以及文件缓冲区(无论读写,我们都需要先将数据加载到文件缓冲区中。)等…

基于JSP的高校二手交易平台

开发语言:Java 数据库:MySQL 技术:JSP技术 工具:浏览器(如360浏览器、谷歌浏览器、QQ浏览器等)、MySQL数据库 系统展示 系统功能界面 用户注册与登录界面 个人中心界面 商品信息界面 摘要 本文研究了高…

为何懂行的人都在选海信Mini LED?

今年的618大促比往年来得要更早一些。纵览各电商平台的电视产品,能发现Mini LED电视的出镜率很高,成了各大品牌的主推产品。 对于什么样的Mini LED更值得买,各品牌都有自己的说辞。因为缺乏科学系统的选购标准,消费者容易在各方说…

【Qt】【模型-视图架构】代理模型示例

文章目录 1. 基本排序/过滤模型Basic Sort/Filter Model Example2. 自定义排序/过滤模型Custom Sort/Filter Model ExampleFilterLineEdit类定义及实现MySortFilterProxyModel类定义及实现 1. 基本排序/过滤模型Basic Sort/Filter Model Example 官方提供的基本排序/过滤模型示…

docker镜像体积优化攻略参考—— 筑梦之路

简单介绍 镜像的本质是镜像层和运行配置文件组成的压缩包,构建镜像是通过运行 Dockerfile 中的 RUN 、COPY 和 ADD 等指令生成镜像层和配置文件的过程。 和镜像体积大小有关的关键点: RUN、COPY 和 ADD 指令会在已有镜像层的基础上创建一个新的镜像层&…

【数据结构】详解二叉树

文章目录 1.树的结构及概念1.1树的概念1.2树的相关结构概念1.3树的表示1.4树在实际中的应用 2.二叉树的结构及概念2.1二叉树的概念2.2特殊的二叉树2.2.1满二叉树2.2.2完全二叉树 2.3 二叉树的性质2.4二叉树的存储结构2.4.1顺序结构2.4.2链表结构 1.树的结构及概念 1.1树的概念…

基于SSM的车辆租赁管理系统(含源码+sql+视频导入教程)

👉文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于SSM的车辆租赁管理系统1拥有两种角色 管理员:用户管理、用户租车、用户换车和车辆入库、添加汽车、添加客户、生成出租单、客户选车、出租单管理、查询出租单、角色权限管…

登录校验及全局异常处理器

登录校验 会话技术 会话:用户打开浏览器,访问web服务器的资源,会话建立,直到有一方断开连接,会话结束.在一次会话中可以包含多次请求和响应会话跟踪:一种维护浏览器状态的方法,服务器需要识别多次请求是否来自于同一浏览器,以便在同一次会话请求间共享数据会话跟踪方案 客户端…

关于MD5

首先还是介绍一下关于md5的基本信息: MD5(Message Digest Algorithm 5)是一种常用的哈希函数,用于产生128位(16字节)的哈希值,通常以32个十六进制数字表示。MD5广泛用于计算文件或文本数据的校…

分享一个 ASP.NET Web Api 上传和读取 Excel的方案

前言 许多业务场景下需要处理和分析大量的数据,而 Excel 是业务人员常用的数据表格工具,因此,将 Excel 表格中内容上传并读取到网站,是一个很常见的功能,目前有许多成熟的开源或者商业的第三方库,比如 NPO…

香港电讯荣获经济通「金融科技大奖」专业认可

香港电讯非常荣幸在《经济通》举办的「2023金融科技大奖」中脱颖而出,获「杰出跨境数码方案」、「杰出网络安全方案(商用)」和「杰出ESG解决方案」三个重要奖项。 香港电讯拥有丰富的经验及庞大的专业技术团队,一直致力为客户提供…

Spring Security3.0版本

前言: 核心: A >> ? >> B ?代表判断层,由Security实现 这是之前的版本浓缩,现在3.0版本添加了更匹配的内容描写,匹配了mvc模式 非mvc模式 核心:client&#x…