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

目暮deep-breaths lv.1

发布时间：2022-11-23 20:52:07 355

相关标签： # javascript# java# java

【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 教程】第六章数组17—flatMap() ：对每个元素执行映射函数并将结果展平_映射函数_02

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

文章来源： https://blog.51cto.com/u_15809510/5874040

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。

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

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

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