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

107 篇文章 2 订阅
31 篇文章 0 订阅

在上节,我们学习如何使用 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', '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 }

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值