JavaScript中数组的flatMap方法

认识flatMap

flatMap是数组的一个新方法，它会遍历原数组的每一个元素， 并且会为每个元素都执行一次传入的回调函数，最终把所有元素执行回调函数返回的结果压缩成一个新数组，flatMap会返回一个新的数组，不会改变原数组的元素。

回调参数

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

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

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

使用

删除数组元素

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

修改元素

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

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

原始数据

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

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

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

1、传统思维方式

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

2、使用reduce方法

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

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

3、使用flatMap方法

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

示例二、交叉循环

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少嵌套了一层