在 ES10 中新增了数组的 flatMap() 方法，它能够将一个数组映射到另一个数组，然后将结果展平为一个新数组。如果您是前端开发者，那么 flatMap() 方法对您来说是一个非常便捷的工具，可以快速地处理数组中的数据。本文将详细介绍 flatMap() 方法，同时给出相关实例。让我们一起来看一下这个新特性的具体使用方法。
flatMap() 方法的语法
flatMap() 方法与 map() 方法相似，都是用来操作数组的。其使用形式如下：
arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])
其中，arr 表示需要操作的数组，callback 表示一个回调函数，其中的 currentValue 表示当前遍历到的数组元素，index 表示当前元素的索引值，array 表示当前操作的数组。回调函数返回一个新数组，最终将所有回调函数返回的数组展平后返回。
thisArg 可选参数表示在回调函数中使用的 this 值。
flatMap() 方法的示例
现在，让我们来看几个实际的例子，来更好地理解 flatMap() 方法的用法。
将字符串转换为数组
假设我们有一组字符串的数组，我们想把每个字符串拆分成单词，并把它们转换成新的数组。使用 flatMap() 方法，我们可以将其变为一个语句。
const phrases = ['Hello, my name is John.', 'I like basketball.'];
const words = phrases.flatMap(phrase => phrase.split(' '));
console.log(words); // Output: ["Hello,", "my", "name", "is", "John.", "I", "like", "basketball."]在数组中找到包含关键字的所有字符串
假设我们有一个包含文件路径的数组，并且我们想从该数组中提取所有包含关键字 dashboard 的文件名。我们可以使用 flatMap() 方法将每个路径拆分为目录和文件名，并且在返回的数组中只留下文件名。之后，我们可以使用 filter() 方法从该数组中提取所有包含关键字 dashboard 的文件。
-- -------------------- ---- ------- ----- ----- - - ---------------------- --------------------------- -------------------------- ------------------------ -- ----- ----- - ----- ------------- -- -------------------------- ------------ -- ---------------------------- ------------------- -- ------- -------------- ------------
对数组进行平坦化处理
在使用 flatMap() 方法时，我们可以在回调函数中返回一个数组，该数组将被扁平化为单个数组。如果数组中包含嵌套数组，则可以使用一个简单的 flat() 方法扁平化数组。
const arr = [[1, 2], [3, 4], [5, 6]]; const flatArr = arr.flatMap(subArr => subArr).flat(); console.log(flatArr); // Output: [1, 2, 3, 4, 5, 6]
总结
ES10 新增的 flatMap() 方法是一个非常有用的特性，能够让我们更加高效地处理数组数据。在实际编码中，我们可以结合具体应用场景，使用 flatMap() 方法进行操作。在回调函数中返回数组时，可以使用 flat() 方法让其扁平化。希望这篇文章可以帮助您更好地理解 flatMap() 方法的使用，从而优化您的前端代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6545dba27d4982a6ebf82426