概述
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"];
我们想要将数据中的字符串按字母分割成数组，最终得到以下数据结构。
-- -------------------- ---- -------
-
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
---
--我们可以使用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