JavaScript flatMap 方法
最后修改于 2025 年 4 月 4 日
在本文中，我们将展示如何使用 JavaScript 中的 flatMap 方法来映射和展平数组。
数组 flatMap 操作
flatMap 方法是 map 和 flat 操作的组合。它首先使用映射函数映射每个元素，然后将结果展平成一个新的数组。这与先映射后进行深度为 1 的展平操作相同。
flatMap 的主要优势在于它在一个方法调用中执行这两个操作，使代码更简洁。当处理包含嵌套数组的数组，或者需要同时转换和展平数据时，它特别有用。
flatMap 方法不会修改原始数组。相反，它会返回一个包含已映射和展平结果的新数组。回调函数可以返回单个值或值数组。
基本 flatMap 示例
以下示例演示了 flatMap 方法的基本用法。
const numbers = [1, 2, 3]; const doubledAndFlattened = numbers.flatMap(num => [num * 2]); console.log(numbers); // Original array unchanged console.log(doubledAndFlattened); // New mapped and flattened array
我们创建一个数组，并使用 flatMap 将每个元素加倍。回调函数在数组中返回每个加倍后的数字，然后 flatMap 将其展平。原始数组保持不变。
$ node main.js [ 1, 2, 3 ] [ 2, 4, 6 ]
展平嵌套数组
flatMap 可以用于在转换数组的同时展平它们。
const phrases = ["hello world", "good morning"];
const words = phrases.flatMap(phrase => phrase.split(' '));
console.log(words);
我们将每个短语拆分成单词，这将创建单词数组。然后 flatMap 将这些数组展平成一个单词数组。这演示了 flatMap 如何一步处理和展平数据。
$ node main.js [ 'hello', 'world', 'good', 'morning' ]
使用 flatMap 过滤和映射
通过为要排除的元素返回空数组，flatMap 可用于过滤和映射元素。
const numbers = [1, 2, 3, 4, 5];
const evenSquares = numbers.flatMap(num =>
num % 2 === 0 ? [num * num] : []
);
console.log(evenSquares);
我们过滤掉奇数并对偶数进行平方。通过为奇数返回空数组，它们将从结果中排除。这显示了 flatMap 如何结合过滤和映射操作。
$ node main.js [ 4, 16 ]
处理嵌套数组
flatMap 尤其适用于处理数组的数组。
const books = [
{ title: "Book 1", tags: ["fantasy", "adventure"] },
{ title: "Book 2", tags: ["science", "fiction"] }
];
const allTags = books.flatMap(book => book.tags);
console.log(allTags);
我们从一个书对象数组中提取所有标签。每本书的标签都在一个数组中，flatMap 将它们组合成一个单一的数组。这比使用 map 后跟 flat 更简洁。
$ node main.js [ 'fantasy', 'adventure', 'science', 'fiction' ]
使用 flatMap 扩展元素
flatMap 可用于将每个元素扩展为多个元素。
const numbers = [1, 2, 3]; const expanded = numbers.flatMap(num => [num - 1, num, num + 1]); console.log(expanded);
我们创建一个新数组，其中包含每个原始数字及其前驱和后继。回调函数为每个输入返回一个包含三个值的数组，flatMap 将其展平成最终结果。
$ node main.js [ 0, 1, 2, 1, 2, 3, 2, 3, 4 ]
来源
在本文中，我们演示了如何使用 flatMap() 方法来转换和展平 JavaScript 中的数组。
作者
列出 所有 JS 数组函数。