JavaScript 数组 flatMap() 方法

摘要: 本教程将讲解 JavaScript 数组 flatMap() 方法，该方法使用映射函数映射数组中的每个元素，并将结果展平为一个新的数组。

JavaScript 数组 flatMap() 方法简介

flat() 方法创建一个新的 数组，其中包含子数组的元素，并将其连接在一起。

map() 方法创建一个新的数组，其元素是映射函数的结果。

flatMap() 方法是 map() 方法和深度为 1 的 flat() 方法的组合。

flatMap() 方法首先使用映射函数映射数组中的每个元素，然后将结果展平为一个新的数组。

以下显示了 flatMap() 方法的语法

let newArray = arrayObject.flatMap(callback,thisArg);Code language: JavaScript (javascript)

flatMap() 方法接受两个参数

1) 回调映射函数

callback 是映射函数，其语法与 map() 方法中的语法相同

function callback(currentValue [[,index], array]);Code language: JavaScript (javascript)

2) thisArg 参数

可选的 thisArg 参数是一个值，用作执行 callback 时 this 的值。

请注意，flatMap() 方法不会修改原始数组。

JavaScript 数组 flatMap() 方法示例

让我们看一些使用 flatMap() 方法的示例。

1) 从句子中创建单词示例

假设你有以下数组

let sentences = ["JavaScript Array flatMap()", " ", "is", " ", "Awesome"];Code language: JavaScript (javascript)

以下 map() 函数分割句子的单词

let words = sentences.map(s => s.split(' '));
console.log(words);Code language: JavaScript (javascript)

输出

[
    [ 'JavaScript', 'Array', 'flatMap()' ],
    [ ' ' ],
    [ 'is' ],
    [ ' ' ],
    [ 'Awesome' ]
]Code language: JavaScript (javascript)

结果是一个嵌套数组，其中包含单词。为了展平结果，你可以在 map() 方法的结果上使用 flat() 方法。但是，使用 flatMap() 方法会更简洁。

flatMap() 通过将数组中的每个句子通过映射函数运行并展平映射结果来创建展平的数组

let sentences = [
    "JavaScript Array flatMap()", 
    " ", 
    "is", 
    " ", 
    "Awesome"
];

let words = sentences.flatMap(s => s.split(' '));
console.log(words);Code language: JavaScript (javascript)

输出

[ 'JavaScript', 'Array', 'flatMap()', '', '', 'is', '', '', 'Awesome' ]Code language: JSON / JSON with Comments (json)

2) 在映射期间添加和删除元素的示例

flatMap() 方法允许你在映射期间添加或删除元素。请考虑以下示例

假设你有以下购物车

let cart = [{
        name: 'Smartphone',
        qty: 2,
        price: 500,
        freeOfCharge: false
    },
    {
        name: 'Tablet',
        qty: 1,
        price: 800,
        freeOfCharge: false
    }
];
Code language: JavaScript (javascript)

如果顾客购买智能手机，你想送他们一个免费的屏幕保护膜。

当顾客将智能手机添加到购物车时，你可以使用 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);Code language: JavaScript (javascript)

购物车将如下所示

[
    { 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 }
]Code language: JavaScript (javascript)

以下使用 reduce() 方法从购物车中的商品计算总金额。它忽略了免费商品，例如屏幕保护膜

const total = newCart.reduce((sum, item) => {
    if (!item.freeOfCharge)
        sum += item.price * item.qty;
    return sum;
}, 0);

console.log({total});Code language: JavaScript (javascript)

输出

{ total: 1800 }Code language: JavaScript (javascript)

摘要

• 使用 flatMap() 方法通过将集合中的每个元素通过映射函数运行并展平映射结果来创建一个展平的元素数组。