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

本文主要是介绍多维数组操作,不要再用遍历循环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了!来试试数组展平的小妙招!

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

这篇关于多维数组操作,不要再用遍历循环foreach了!来试试数组展平的小妙招!array.flat()用法与array.flatMap() 用法及二者差异详解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1019442

相关文章

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

好题——hdu2522(小数问题:求1/n的第一个循环节)

好喜欢这题,第一次做小数问题,一开始真心没思路,然后参考了网上的一些资料。 知识点***********************************无限不循环小数即无理数,不能写作两整数之比*****************************(一开始没想到,小学没学好) 此题1/n肯定是一个有限循环小数,了解这些后就能做此题了。 按照除法的机制,用一个函数表示出来就可以了,代码如下

hdu2241(二分+合并数组)

题意:判断是否存在a+b+c = x,a,b,c分别属于集合A,B,C 如果用暴力会超时,所以这里用到了数组合并,将b,c数组合并成d,d数组存的是b,c数组元素的和,然后对d数组进行二分就可以了 代码如下(附注释): #include<iostream>#include<algorithm>#include<cstring>#include<stack>#include<que

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

hdu 1166 敌兵布阵(树状数组 or 线段树)

题意是求一个线段的和,在线段上可以进行加减的修改。 树状数组的模板题。 代码: #include <stdio.h>#include <string.h>const int maxn = 50000 + 1;int c[maxn];int n;int lowbit(int x){return x & -x;}void add(int x, int num){while

6.1.数据结构-c/c++堆详解下篇(堆排序,TopK问题)

上篇:6.1.数据结构-c/c++模拟实现堆上篇(向下,上调整算法,建堆,增删数据)-CSDN博客 本章重点 1.使用堆来完成堆排序 2.使用堆解决TopK问题 目录 一.堆排序 1.1 思路 1.2 代码 1.3 简单测试 二.TopK问题 2.1 思路(求最小): 2.2 C语言代码(手写堆) 2.3 C++代码(使用优先级队列 priority_queue)

K8S(Kubernetes)开源的容器编排平台安装步骤详解

K8S(Kubernetes)是一个开源的容器编排平台,用于自动化部署、扩展和管理容器化应用程序。以下是K8S容器编排平台的安装步骤、使用方式及特点的概述: 安装步骤: 安装Docker:K8S需要基于Docker来运行容器化应用程序。首先要在所有节点上安装Docker引擎。 安装Kubernetes Master:在集群中选择一台主机作为Master节点,安装K8S的控制平面组件,如AP

bytes.split的用法和注意事项

当然,我很乐意详细介绍 bytes.Split 的用法和注意事项。这个函数是 Go 标准库中 bytes 包的一个重要组成部分,用于分割字节切片。 基本用法 bytes.Split 的函数签名如下: func Split(s, sep []byte) [][]byte s 是要分割的字节切片sep 是用作分隔符的字节切片返回值是一个二维字节切片,包含分割后的结果 基本使用示例: pa

poj3750约瑟夫环,循环队列

Description 有N个小孩围成一圈,给他们从1开始依次编号,现指定从第W个开始报数,报到第S个时,该小孩出列,然后从下一个小孩开始报数,仍是报到S个出列,如此重复下去,直到所有的小孩都出列(总人数不足S个时将循环报数),求小孩出列的顺序。 Input 第一行输入小孩的人数N(N<=64) 接下来每行输入一个小孩的名字(人名不超过15个字符) 最后一行输入W,S (W < N),用

嵌入式Openharmony系统构建与启动详解

大家好,今天主要给大家分享一下,如何构建Openharmony子系统以及系统的启动过程分解。 第一:OpenHarmony系统构建      首先熟悉一下,构建系统是一种自动化处理工具的集合,通过将源代码文件进行一系列处理,最终生成和用户可以使用的目标文件。这里的目标文件包括静态链接库文件、动态链接库文件、可执行文件、脚本文件、配置文件等。      我们在编写hellowor