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

英文 | 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类型

学习更多技能

请点击下方公众号