这是我参与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!
学习, 记录, 积累 是一个漫长的过程!也是一个慢慢成长的过程, 在掘金养成更文更是总结的好习惯, 加油!