当前位置:网站首页>flatMap() :对每个元素执行映射函数并将结果展平
flatMap() :对每个元素执行映射函数并将结果展平
2022-08-09 02:50:00 【油墨香^_^】
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() 方法通过映射函数运行集合中的每个元素并展平映射的结果,从而创建一个展平的元素数组。
边栏推荐
猜你喜欢
C专家编程 第9章 再论数组 9.3 为什么C语言把数组形参当做指针
不会吧!不会吧!居然还有人不知道重绘以及回流
C专家编程 第9章 再论数组 9.6 C语言的多维数组
grafana的panel点击title,没有反应,没有出现edit选项
如何实现canal数据同步
Building PO layered architecture of automated testing framework from 0
Jenkins configuration nail notification
7月更新速递 | 产品实验室N+1,EasyV For Unreal上线!
一款免费的强大办公工具。
数字 06 verilog_关于异步FIFO
随机推荐
数字 05 verilog&vivado2018.2零散笔记
SwiftUI * SwiftUI 4.0 全新的导航系统
JavsScript系列-Promise的错误捕获
通过安装VNC服务器x11vnc(或vnc4server)和配置x11vnc.service实现远程通过VNC-Viewer访问VNC服务器。
普通人如何增加收入
Zabbix 5.0 监控教程(四)
redis集群详解
1261. 在受污染的二叉树中查找元素
【信号去噪】基于Sage-Husa自适应卡尔曼滤波器实现海浪磁场噪声抑制及海浪磁场噪声的产生附matlab代码
【洛谷】P2613 【模板】有理数取余
MySQL相关知识 和 数据的存储相关知识
20220524搜索和排序:搜索二维矩阵II
Postman接口测试【官网】最新版本 安装及使用入门教程
What are the most popular automated testing tools in 2022?The most complete and most detailed of the entire network is here
C专家编程 第8章 为什么程序员无法分清万圣节和圣诞节 8.10 轻松一下---国际C语言混乱代码大赛
金融行业软件测试面试题(含答案)| 入门指南
Processing Point Clouds
自动化测试框架总结
LeetCode_43_字符串相乘
LintCode 146. 大小写转换 II