谢谢你请我吃鸡腿*^_^*
支付宝扫一扫打赏
微信扫一扫打赏
通常在项目中数组操作使用map、filter、forEach等方法比较多，实际上如果你了解flatMap，在实际项目中将能大大减少使用前面三种api方法，尤其是当需要组合使用前者时，使用flatMap一步到位，让代码更加简洁阅读性更强
flatMap是数组的一个新方法，它会遍历原数组的每一个元素， 并且会为每个元素都执行一次传入的回调函数，最终把所有元素执行回调函数返回的结果压缩成一个新数组，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] |
现在假设有一组原始数据，我们需要指定条件过滤出数据并且将过滤后的数据内容进行修改，例如：
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 | const newArr = arr.filter(i=>i.id>1).map(c=>({id:c.id*10,newValue:c.value})); |
当然，想达到这个效果方法很多，这里再补充关于reduce方式
1 2 3 | const newArr = arr.reduce((curr,item)=>{ return item.id>1?[...curr,{id:item.id*10,newValue:item.value}]:[...curr] },[]) |
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少嵌套了一层 |
上一篇：Vue3 中新特性—toRaw与markRaw之间区别
下一篇：mac电脑安装MongoDB数据库并设置全局环境变量
支付宝扫一扫打赏
微信扫一扫打赏
电话支持
173xxxx7240在线交流
微信添加
共 0 条评论关于"【ES10新特性】JavaScript中数组的flatMap方法妙用"
最新评论