ES10 新增 Array 的 flatMap() 方法详解及示例-JavaScript中文网-JavaScript教程资源分享门户

在 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 的文件。

// javascriptcn.com 代码示例
const files = [
   'app/home/index.html',
   'app/dashboard/index.html',
   'app/dashboard/menu.html',
   'app/profile/index.html'
];

const names = files
  .flatMap(file => file.split('/').slice(-1))
  .filter(name => name.includes('dashboard'));

console.log(names); // Output: ['index.html', 'menu.html']

对数组进行平坦化处理

在使用 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