JavaScript中数组的flatMap方法妙用

通常在项目中数组操作使用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少嵌套了一层