flat() 和 flatMap() 有什么区别?

开发 前端
在 JavaScript 中,数组就像数据结构中的超级英雄。但是,当你进入嵌套数组的领域时,事情可能会变得有点混乱,就像一团乱麻。

在 JavaScript 中,数组就像数据结构中的超级英雄。

但是,当你进入嵌套数组的领域时,事情可能会变得有点混乱,就像一团乱麻。

幸运的是,ES2019 带来了两个超级方便的数组方法:flat() 和 flatMap()。

这些方法不仅使数组处理变得轻而易举,而且还简化了处理那些讨厌的嵌套数组的过程。

让我们深入了解这些方法的细节、它们的区别,以及它们如何在现实世界的编码场景中成为你值得信赖的伙伴,同时,像仙尘一样加入代码示例来帮助你掌握这些技能。

什么是 flat() 方法?

想象一下:你有一盒快递包裹,里面装满了各种各样的小盒子。每个小盒子可能都装有更小的盒子,而这些小盒子里可能装有好东西。 

现在,想象一下,你想找到所有的好东西,但又不想费力地打开每个盒子。

这时 flat() 方法就派上用场了,它就像一台神奇的压平机,可以把所有东西都压平,这样你就能一目了然地看到所有的宝贝。

用法

var newArray = arr.flat([depth]);

arr:需要展平的“盒子”(数组)。

depth(可选):要展平的层数,例如决定要打开多少个盒子层,默认值为 1。

示例 1:展平一层

让我们展开它:

let nestedArray = [1, [2, 3], [4, [5, 6]]];
let flattenedArray = nestedArray.flat();


console.log(flattenedArray); // Output: [1, 2, 3, 4, [5, 6]]

在这里,flat() 就像轻轻推一下,打开最外层的盒子,让你可以看到 2 和 3,以及 4,而它的小盒子 [5, 6] 仍然关闭。

示例 2:展平多层

如果你喜欢冒险,想要展平整个堆栈,请查看以下内容:

let nestedArray = [1, [2, [3, [4, 5]]]];
let flattenedArray = nestedArray.flat(2);


console.log(flattenedArray); // Output: [1, 2, 3, [4, 5]]

使用 flat(2),您就像一个开箱高手,打开两层箱子,只留下最里面的 [4, 5] 未受影响。

什么是 flatMap() 方法?

flatMap() 方法就像您的数组操作工具包中有一根魔杖。它的工作原理是首先对数组中的每个元素施展魔法,然后将施魔法的结果展平到新数组中。

可以将其视为 map() 和 flat()(深度为 1)的强大组合,只需一个快速动作即可完成。

用法

var newArray = arr.flatMap(function callback(currentValue[, index[, array]]) {
    // Weave your magic here and return elements of the new array
}[, thisArg]);

回调:可信赖的魔法书,定义如何为每个数组元素施法。它接受三个参数:

  • currentValue:当前受您施法的元素。
  • index(可选):元素的索引(如果您需要的话)。
  • array(可选):调用 flatMap 的原始数组。
  • thisArg(可选):施放回调魔法时的神奇 this 值。

示例 1:基本魔法

让我们施放一个简单的魔法:

let arr = [1, 2, 3, 4];
let mappedAndFlattened = arr.flatMap(x => [x, x * 2]);


console.log(mappedAndFlattened); // Output: [1, 2, 2, 4, 3, 6, 4, 8]

在这个魔法中,flatMap() 首先将每个元素 x 转换为一个包含 x 和 x * 2 的数组。

然后,flatMap() 挥动魔杖将这些数组展平为一个,省去了手动转换 map() 和 flat() 的麻烦。

示例 2:展平嵌套数组

如果您面对的是嵌套数组,flatMap() 就是您成功的灵丹妙药:

let nestedArray = [[1], [2, 3], [4]];
let flattenedArray = nestedArray.flatMap(x => x);


console.log(flattenedArray); // Output: [1, 2, 3, 4]

在这里,flatMap() 返回每个子数组并将其展平为一个新数组,就像炼金术大师将贱金属变成黄金一样。

flat() 与 flatMap()

用例场景

 flat():当你在寻求展平嵌套数组而不改变元素时,flat() 是你的最佳选择。它可以将多层数组展平到你想要的深度,像藏宝图一样显示所有元素。

flatMap():如果你的任务不仅是展平数组,而且还要先转换元素,例如在展平之前将每个元素映射到不同的值,那么 flatMap() 就是您值得信赖的伙伴。它结合了 map() 和 flat() 的功能,在一个英勇的行为中完成转换和展平。

性能比较

flatMap() 更高效:使用 flatMap() 通常比先转换 map() 然后 flat() 更有效,因为 flatMap() 遍历数组一次,而不是两次。

这意味着在处理大量数据时,flatMap() 可能会表现更好,从而减少不必要的遍历开销。

限制

flatMap() 的局限性:尽管 flatMap() 很强大,但它只能展平一层嵌套。如果你的数组是一个深层嵌套的迷宫,并且你需要完全解开它,那么,你仍然需要使用具有适当深度的 flat()。例如,flat(2) 可以展平两层嵌套,而 flatMap() 只能管理一层。

结论

在 JavaScript 世界中,掌握 flat() 和 flatMap() 的数组方法不仅可以将你的代码制作成时尚、优雅的杰作,还可以增强你像真正的编码向导一样处理复杂数据结构的能力。 

希望今天的神奇分享能帮助您掌握这两种方法,并在你的项目中自信地运用它们。

责任编辑:华轩 来源: web前端开发
相关推荐

2022-09-07 18:32:57

并发编程线程

2022-06-06 14:53:02

LoRaLoRaWAN

2020-03-09 20:56:19

LoRaLoRaWAN无线技术

2020-11-09 14:07:53

PyQtQt编程

2022-09-08 18:38:26

LinuxWindowsmacOS

2022-08-02 08:23:37

SessionCookies

2021-12-17 14:40:02

while(1)for(;;)语言

2021-05-16 14:26:08

RPAIPACIO

2024-03-05 18:59:59

前端开发localhost

2022-02-27 15:33:22

安全CASBSASE

2024-05-27 00:40:00

2022-08-22 07:06:32

MyBatisSQL占位符

2023-12-15 09:21:17

ObjectJavaString

2022-08-31 08:33:54

Bash操作系统Linux

2022-01-16 07:46:53

SpringDataASSM

2021-09-06 10:45:18

XDRMDR

2022-08-03 07:04:56

GETHTTPPOST

2020-06-28 15:11:07

LoRaWAN网络专用网络

2023-01-19 17:51:19

apt removeapt purge

2020-09-08 11:00:00

IaaSPaaSSaaS
点赞
收藏

51CTO技术栈公众号