唯品秀前端博客

通常在项目中数组操作使用map、filter、forEach等方法比较多,实际上如果你了解flatMap,在实际项目中将能大大减少使用前面三种api方法,尤其是当需要组合使用前者时,使用flatMap一步到位,让代码更加简洁阅读性更强

认识flatMap

flatMap是数组的一个新方法,它会遍历原数组的每一个元素, 并且会为每个元素都执行一次传入的回调函数,最终把所有元素执行回调函数返回的结果压缩成一个新数组,flatMap会返回一个新的数组,不会改变原数组的元素。用人话说:就是遍历数组每一项,遍历过程中可以对当前项增删查改修饰然后返回,注意返回的是当前项数组类型,得到一个新的数组,不改变原数组

回调参数

遍历数组元素的时候,会为每一个元素都执行一次回调函数,可以传入三个参数:

  1. currentValue:当前正在数组中处理的元素。
  2. index:可选的。数组中正在处理的当前元素的索引。
  3. array:可选的。调用flatMap方法的数组。

flatMap能用于在遍历数组期间增加、删除和修改数组元素(也就是修改 items 的数量),当我们需要增加元素时,就在回调函数中返回一个包含多个元素的数组,如果想要删除某一个元素时,就在回调函数中返回一个空数组(注意是空数组,返回空字符串、null或者undefined都不会改变数组items 的数量),如果想要修改元素,则在回调函数中返回一个修改过后的元素即可。

使用

删除数组元素

1
2
3
const arr = [1, 2, 3, 4]
const newArr = arr.flatMap(x => x % 2 === 0 ? [x]: [])
console.log(newArr); // [2, 4]

修改元素

1
2
3
const arr = [1, 2, 3, 4]
const newArr = arr.flatMap(x => [x * 2])
console.log(newArr); // [2, 4, 6, 8]

示例一、flatMap替换map、filter、forEach操作

现在假设有一组原始数据,我们需要指定条件过滤出数据并且将过滤后的数据内容进行修改,例如:

原始数据

1
2
3
4
5
let arr = [
  { id: 1, value:'测试1' },
  { id: 2, value:'测试2' },
  { id: 3, value:'测试3' },
]

期望结果

将id大于1的数据过滤出来,并且把原本的key为“value”字段改变成“newValue”

1
2
3
4
[
  {id: 20, newValue: '测试2'}
  {id: 30, newValue: '测试3'}
]

1、传统思维方式

1
const newArr = arr.filter(i=>i.id>1).map(c=>({id:c.id*10,newValue:c.value}));

2、使用reduce方法

当然,想达到这个效果方法很多,这里再补充关于reduce方式

1
2
3
const newArr = arr.reduce((curr,item)=>{
  return item.id>1?[...curr,{id:item.id*10,newValue:item.value}]:[...curr]
},[])

3、使用flatMap方法

1
const newArr = arr.flatMap((item)=>item.id>1?[{id:item.id*10, newValue:item.value}]:[]);

通过上面案例可以看出,虽然使用flatMap看起来代码更长了,实际提高了代码的可阅读性,更容易理解,而不需要像传统方式样绕两遍

示例二、交叉循环

1
2
3
4
5
6
7
8
var a = [1,2,3]
var b = [3,4]
a.map(a => (b.map(o => [a,o])))
// [ [[1,3],[1,4]], [[2,3],[2,4]], [[3,3],[3,4]] ]

a.flatMap(a => (b.map(o => [a,o])))
// [ [1,3],[1,4],[2,3],[2,4],[3,3],[3,4] ]
// 区别就是flatMap少嵌套了一层
本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(0) 打赏
标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"【ES10新特性】JavaScript中数组的flatMap方法妙用"

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏