文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-11-29 19:02

关注

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

幸运的是,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]);

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

示例 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前端开发内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯