使用flat()和flatMap来打平数组吧

简介: # 引言往往在开发中我们可能会遇到一些不平铺的,结构或是嵌套比较复杂的数组数据,那么我们面对这种数据的时候应该怎么优雅高效的处理他们的,今天让我们来学习一下使用flat()和flatMap来打平数组吧# 使用flat()和flatMap来打平数组吧今天我们来一起学习一下使用flat()和flatMap打平数组在ES2019中,flat()方法用于创建并返回一个新数组,这个新数组包含于他调用flat()的数组相同的元素,只不过其中任何本身也是数组的元素会被打平填充到返回的数组中。例如:```[1,[2,3]].flat() //会变成[1,2,3][1,[2,[3]]].

引言

往往在开发中我们可能会遇到一些不平铺的,结构或是嵌套比较复杂的数组数据,那么我们面对这种数据的时候应该怎么优雅高效的处理他们的,今天让我们来学习一下使用flat()和flatMap来打平数组吧

使用flat()和flatMap来打平数组吧

今天我们来一起学习一下使用flat()和flatMap打平数组

在ES2019中,flat()方法用于创建并返回一个新数组,这个新数组包含于他调用flat()的数组相同的元素,只不过其中任何本身也是数组的元素会被打平填充到返回的数组中。例如:

[1,[2,3]].flat() //会变成[1,2,3]
[1,[2,[3]]].flat() //会变成[1,2,[3]]

在不传参调用的时候,flat()会打平一级嵌套,原始数组中本身也是数组的元素会被打平,但是打平后的元素如果还是在数组中则不会再打平。如果想打平更多层级,需要给flat()传一个数值参数:

let a = [1,[2,[3,[4]]]];
a.flat(1) // [1,2,[3,[4]]]
a.flat(2) // [1,2,3,[4]]
a.flat(3) // [1,2,3,4]
a.flat(4) // [1,2,3,4]

flatMap()方法于map()方法相似,只不过返回的数组会自动被打平,就像传给了flat()一样。换句话说,调用a.flatMap(f)等同于但是效率远高于a.map(f).flat():

let phrases = ["hello world","balabala"];
let words = phrases.flatMap(phrase => phrase.split(" ");
console.log(words) // ["hello",world","balabala"];

可以把flatMap()想象为一个通用版的map(),可以把输入数组的一个元素映射为输出数组中的多个元素,特别地,flatMap()允许把输入元素映射为空数组,这样大屏后并不会有元素出现在数组中:

// 将非负数映射为他的平方根
[-2,-1,1,2].flatMap(x => x < 0 ? [] : Math.sqrt(x))
// 结果: [1,2**0.5]
相关文章
|
JavaScript 前端开发
【导出Excel】Vue实现导出下载Excel文件(blob文件流)--亲测可用
【导出Excel】Vue实现导出下载Excel文件(blob文件流)--亲测可用
【导出Excel】Vue实现导出下载Excel文件(blob文件流)--亲测可用
|
缓存 JavaScript API
Flutter&鸿蒙next 状态管理框架对比分析
在 Flutter 开发中,状态管理至关重要,直接影响应用的性能和可维护性。本文对比分析了常见的状态管理框架,包括 setState()、InheritedWidget、Provider、Riverpod、Bloc 和 GetX,详细介绍了它们的优缺点及适用场景,并提供了 Provider 的示例代码。选择合适的状态管理框架需考虑应用复杂度、团队熟悉程度和性能要求。
1189 0
|
JavaScript 索引
Vue中对象或数组数据更新但视图不刷新问题的解决策略
Vue中对象或数组数据更新但视图不刷新问题的解决策略
1788 0
|
JavaScript 算法
JS递归函数详解
JS递归函数详解
296 0
|
23天前
|
人工智能 JSON API
全网刷屏的 Jev 模型正式开放!一手实战测评 + 保姆级教程
全网爆火的 Jev 模型是什么?有什么用?怎么使用?怎么接入 AI 编程工具?效果真的好么?傻子可懂的 Jev 保姆级实战教程 + 项目实战测评来啦
9366 30
|
9天前
|
存储 人工智能 并行计算
大模型本地部署终端选型方法论:以 Qwen3.8-27B 为例的四档分层完整流程
本文提出一套大模型本地部署终端选型方法论:定约束、定档位、定框架、定参数四步决策法,配合入门、主力、质量、无损四档分层模型。以 Qwen3.8-27B 实测数据为例,逐环节解读显存、带宽、存储、散热、系统、预算等要素,给出面向不同预算的优选方案、决策自查清单与市场观察框架。文末前瞻 AI 笔记本的 CPU+GPU 与统一内存两条路线,论证四步决策法在新品类上的延续性。