【JavaScript 教程】第六章 数组17—flatMap() :对每个元素执行映射函数并将结果展平

共 3267字,需浏览 7分钟

 ·

2022-02-22 08:59


英文 | https://www.javascripttutorial.net/
译文 | 杨小爱

在上节,我们学习如何使用 JavaScript Array flat() 方法来展平数组错过的小伙伴可以点击文章《【JavaScript 教程】第六章 数组16—flat() :递归地将数组展平到指定的深度 》进行学习。
那么,在今天的教程中,我们将一起来学习如何使用JavaScript Array flatMap() 方法,该方法使用映射函数映射数组中的每个元素,并将结果展平为新数组。
JavaScript Array flatMap() 方法介绍
flat() 方法创建一个新数组,其中连接了子数组的元素。
map() 方法创建一个新数组,其元素是映射函数的结果。
flatMap() 方法是 map() 方法后跟深度为 1 的 flat() 方法的组合。
flatMap() 方法首先使用映射函数映射数组中的每个元素,然后将结果展平到一个新数组中。
下面显示了 flatMap() 方法的语法:
let newArray = arrayObject.flatMap(callback,thisArg);
flatMap() 方法有两个参数:
1)回调映射函数
回调是映射函数,其语法与 map() 方法中的语法相同:
function callback(currentValue [[,index], array]);
2) thisArg 参数
可选的 thisArg 参数是在执行回调时用作 this 的值。
请注意,flatMap() 方法不会修改原始数组。
JavaScript 数组 flatMap() 示例
让我们举一些使用 flatMap() 方法的例子。
1)从句子示例中创建单词
假设我们有以下数组:
let sentences = ["JavaScript Array flatMap()", " ", "is", " ", "Awesome"];
以下 map() 函数拆分句子的单词:
let words = sentences.map(s => s.split(' '));console.log(words);
输出:
[ [ 'JavaScript', 'Array', 'flatMap()' ], [ ' ' ], [ 'is' ], [ ' ' ], [ 'Awesome' ]]
结果是一个由单词填充的嵌套数组的数组,要展平结果,我们可以在 map() 方法的结果上使用 flat() 方法。 但是,使用 flatMap() 方法会更简洁。
flatMap() 通过映射函数运行数组中的每个句子并将映射结果展平,从而创建一个展平数组:
let sentences = ["JavaScript Array flatMap()", " ", "is", " ", "Awesome"];let words = sentences.flatMap(s => s.split(' '));console.log(words);代码语言:JavaScript (javascript )
输出:
[ 'JavaScript', 'Array', 'flatMap()', '', '', 'is', '', '', 'Awesome' ]
2)在映射示例期间添加和删除元素
flatMap() 方法允许我们在映射期间添加或删除元素,考虑以下示例:
假设我们有以下购物车:
let cart = [{name: 'Smartphone',qty: 2,price: 500,freeOfCharge: false},{name: 'Tablet',qty: 1,price: 800,freeOfCharge: false}];
如果客户购买智能手机,我们想给送他们免费的屏幕保护膜。
当客户将智能手机添加到购物车时,我们可以使用 flatMap() 方法将屏幕保护膜添加到购物车,如下所示:
let newCart = cart.flatMap((item) => {if (item.name === 'Smartphone') {return [item, {name: 'Screen Protector',qty: item.qty,price: 5,freeOfCharge: true }] } else {return [item]; } });console.log(newCart);
购物车将如下所示:
[ { name: 'Smartphone', qty: 2, price: 500, freeOfCharge: false }, { name: 'Screen Protector', qty: 2, price: 5, freeOfCharge: true }, { name: 'Tablet', qty: 1, price: 800, freeOfCharge: false }]
下面使用 reduce() 方法计算购物车中商品的总金额, 它忽略了免费项目,例如屏幕保护膜:
const total = newCart.reduce((sum, item) => {if (!item.freeOfCharge) sum += item.price * item.qty;return sum;}, 0);console.log({total});
输出:
{ total: 1800 }
总结
使用 flatMap() 方法通过映射函数运行集合中的每个元素并展平映射的结果,从而创建一个展平的元素数组。
今天的内容就到这里了。
如果您还想学习更多关于数组的内容,请点击下文链接进行学习。
【JavaScript 教程】第六章 数组15—join() :将所有元素连接成一个字符串
【JavaScript 教程】第六章 数组14—reduce() :将数组的元素减少为一个值
【JavaScript 教程】第六章 数组13— forEach() :遍历数组元素
【JavaScript 教程】第六章 数组12— map() :转换数组元素
【JavaScript 教程】第六章 数组11— filter() :过滤数组中的元素
【JavaScript 教程】第六章 数组10— sort() :对数组中的元素进行排序
【JavaScript 教程】第六章 数组09— some() :检查数组中是否至少有一个元素通过了测试
【JavaScript 教程】第六章 数组08— every() :检查数组中的每个元素是否都通过了测试
【JavaScript 教程】第六章 数组07— index() :在数组中定位一个元素
【JavaScript 教程】第六章 数组06— slice() :复制数组元素
【JavaScript 教程】第六章 数组05— splice():删除、插入和替换
【JavaScript 教程】第六章 数组04— JavaScript 队列
【JavaScript 教程】第六章 数组03— Stack :使用 Array 的push()和pop()方法实现堆栈数据结构
【JavaScript 教程】第六章 数组02— Array Length:如何有效地使用数组的长度属性
【JavaScript 教程】第六章 数组01— 介绍JavaScript中的Array类型

学习更多技能
请点击下方公众号

浏览 29
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报