ECMAScript 2018（ES9）中的 "FlatMap" 函数的使用方法详解

概述

ECMAScript 2018（ES9）在语言层面上新增了一个flatMap函数，该函数可以极大地方便开发者进行数据的处理。在ES9之前，我们需要通过其他的方法来实现类似的功能，但是这些方法要么是过于麻烦，要么是过于低效。而使用flatMap函数，我们可以在提高开发效率的同时，保持代码可读性和可维护性。

flatMap函数的定义

flatMap()函数是Array原型对象的方法，该方法在原数组上执行一次map，然后对返回值使用Array.prototype.concat方法，最终将所有的元素压缩成一个新数组。flatMap()方法可以接收两个参数：

flatmap(callback[, thisArg])

其中，callback （必须）是一个函数，用来处理每个元素，并将其转换成一个新数组。thisArg（可选）则是callback 函数执行时 this 的值。

flatMap函数的使用

实例分析

下面我将介绍两个实例来讲解如何应用flatMap函数。

例一：

假设有以下数据：

const arr = ["apple", "banana", "cherry"];

我们想要将数据中的字符串按字母分割成数组，最终得到以下数据结构。

[
    "a",
    "p",
    "p",
    "l",
    "e",
    "b",
    "a",
    "n",
    "a",
    "n",
    "a",
    "c",
    "h",
    "e",
    "r",
    "r",
    "y"
];

我们可以使用flatMap函数的方式，如下所示：

const result = arr.flatMap(ele => [...ele]);

这样我们就可以得到一个单独的分割后的数组。

例二：

假设有以下数据：

const arr = [
    { name: "Joe", age: 24, scores: [1, 2, 3] },
    { name: "Mike", age: 20, scores: [4, 5, 2] },
    { name: "Alice", age: 26, scores: [1, 5, 4] }
];

我们想要将数据按分数升序排列，最终得到以下数据结构。

[
    { name: "Joe", age: 24, scores: [1, 2, 3] },
    { name: "Mike", age: 20, scores: [2, 4, 5] },
    { name: "Alice", age: 26, scores: [1, 4, 5] }
];

我们可以使用flatMap函数的方式，如下所示：

const result = arr.flatMap(ele => ele.scores.sort().map(score => ({ ...ele, scores: score })));

这样我们就可以得到一个按分数升序排列的新数组。

总结

ES9中的flatMap函数为数据处理提供了更加高效和简明的方法，使得我们能够快速实现简单到复杂的数据转换功能。学习和掌握ES9中的flatMap函数，有助于我们提高前端数据处理的速度和质量，从而提高工作效率。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a236d5add4f0e0ffa49af7