ES6-数组扁平化操作方法-flat()和flatMap()

529 阅读2分钟

这是我参与11月更文挑战的第1天,活动详情查看:2021最后一次更文挑战

前言

学习要有总结, 总结输出就可以常看常记常温故知新. 本文开始学习记录学习历程中的点点滴滴, 知识学后记以有处可寻. 本文学习使用数组常用操作方法 flat() 和 flatMap()

JavaScript 数组的方法 flat() 和 flatMap()

在面试中经常遇到的问题: 如何将一个数组扁平化操作. 记得最开始时候吭吭哧哧也就会回答个遍历再加上递归, 那么 ES6 给了我们更简单便捷的方法来扁平化(展开)数组 flat() /flatMap()

flat() 方法

flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

就是当数组的元素还是一个数组时, 即数组嵌套: 可通过 Array.prototype.flat()将嵌套的数组“拉平”来使其变成一维数组。

flat() 方法返回一个新数组,对原数据没有影响, 不会改变原数组。

小例子: 原数组的成员里面有一个数组,flat()方法将子数组的成员取出来,添加在原来的位置。

[1, 2, [3, 4], 5].flat()
// [1, 2, 3, 4, 5]

flat() 方法扁平化的层数

数组嵌套有时候有很多层次的嵌套: 就是多层的, 但是 flat()默认只会“拉平”展开一层, 如果想要“拉平”多层的嵌套数组,可以通过将flat()方法的参数写成一个整数,表示想要拉平的层数,默认值为 1

如下, flat()的参数为2,表示要“拉平”两层的嵌套数组。

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

那么如果不知道有多少层嵌套呢? 如果不管有多少层嵌套,都要转成一维数组,可以用 Infinity 关键字作为参数: 表示展开好多层~:

注意: 如果数组的一个元素为空, 那么使用 flat() 将会忽略这个元素(虽然它也占数组的长度)

[3, [5, [7, [9]]]].flat(Infinity)
// [3, 5, 7, 9]

[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]

flatMap() 方法

同理看名字就能理解了: flatMap() 方法对原数组的每个成员执行一个函数(相当于执行Array.prototype.map()),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组,也不改变原数组

加油! 在掘金养成总结更文的好习惯

Buy Less by Know More!

学习, 记录, 积累 是一个漫长的过程!也是一个慢慢成长的过程, 在掘金养成更文更是总结的好习惯, 加油!

参考文档: