flatMap的5种前端应用场景

flatMap的5种前端应用场景

一、flatMap是什么？

前端中的map和flatMap函数都是数组方法，用于对流形式的传入数据进行处理并返回一个新的数组。它们之间的主要区别体现在如何处理回调函数的返回值上。

map函数接受一个回调函数作为参数，该回调函数会对数组中的每个元素执行某个操作，并将操作后的结果存储在新的数组中。

而flatMap函数则不同。它首先对数组中的每个元素执行一个回调函数（这与map函数相同），但是它会将回调函数返回的所有数组“展平”或“扁平化”为一个新的数组。

当需要将具有多个级别的数据结构转换为单层的数据结构时，
比如将[[a,b,c],[d,e,f],[x,y,z]]转换为[a,b,c,d,e,f,x,y,z]，应该选择使用flatMap。
而如果只是进行单层的数据转换，比如将[a,b,c,d,e,f,x,y,z]转换为大写[A,B,C,D,E,F,X,Y,Z]，那么使用map即可。

二、原生flatMap的简单使用示例以及自定义简单实现flatMap的示例

1.原生flatMap的简单使用示例

代码如下（示例）：

// 二维数组  
const arrayOfArrays = [[1, 2], [3, 4], [5, 6]];  
  
// 使用 flatMap 来展平这个二维数组  
const flattenedArray = arrayOfArrays.flatMap(subArray => subArray);  
  
console.log(flattenedArray); // 输出: [1, 2, 3, 4, 5, 6]

在这个例子中，arrayOfArrays是一个包含三个数组的嵌套数组。flatMap方法接受一个回调函数，该回调函数对每个子数组进行操作，并返回该子数组的所有元素。因为flatMap会自动展平返回的数组，所以flattenedArray最终是一个包含所有数字的一维数组。

2.自定义简单实现flatMap的示例

代码如下（示例）：

function flatMap(array, callback) {  
  // 使用 reduce 来累积结果  
  return array.reduce((accumulated, item) => {  
    // 对数组中的每个元素调用 callback 函数  
    const mappedItem = callback(item, itemIndex, array);  
      
    // 如果 callback 返回的是数组，将其与累积的结果合并  
    // 如果不是数组，则直接添加  
    return accumulated.concat(Array.isArray(mappedItem) ? mappedItem : [mappedItem]);  
  }, []); // 初始累积值是一个空数组  
}  
  
// 使用示例：  
const arrayOfArrays = [[1, 2], [3, 4], [5, 6]];  
  
const flattenedArray = flatMap(arrayOfArrays, subArray => subArray);  
console.log(flattenedArray); // 输出: [1, 2, 3, 4, 5, 6]

flatMap 函数接受一个数组和一个回调函数作为参数。它遍历数组中的每个元素，对每个元素调用回调函数，并将回调函数的返回值（可能是一个数组）与累积的结果合并。最终，返回累积的结果，它是一个所有内部数组元素都被展平的数组。

三、flatMap的5种应用场景

1.嵌套数组展平

代码如下（示例）：

const nestedArray = [[1, 2], [3, 4], [5, 6]];  
const flattenedArray = nestedArray.flatMap(subArray => subArray);  
console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]

需要将嵌套数组展平生成一个新的数组，这个方法非常有用。

2.过滤和映射

代码如下（示例）：

const arrayWithNulls = [[1, 2], null, [3, 4], [], [5, 6]];  
const filteredAndFlattened = arrayWithNulls.flatMap(subArray => subArray ? subArray : []);  
console.log(filteredAndFlattened); // [1, 2, 3, 4, 5, 6]

flatMap与过滤逻辑结合使用，用于删除空数组或不符合条件的元素。

3. 处理异步操作的结果

代码如下（示例）：

// 假设 fetchData 是一个返回 Promise<Array<number>> 的函数  
const fetchData = async () => {  
  // 模拟异步操作  
  return new Promise(resolve => setTimeout(() => 		resolve([Math.random(), Math.random()]), 1000));  
};  
  
// 获取多个数据并展平结果  
const promises = [fetchData(), fetchData(), fetchData()];  
Promise.all(promises).then(results => {  
  const flattenedData = results.flatMap(array => array);  
  console.log(flattenedData); 
  // 输出所有获取到的数字，随机数，每次结果不一样  [0.2327136954113327, 0.7081417636520959, 0.29688462748025635, 0.9017799047634749, 0.8390585761943758, 0.9136022152202605]
});

在前端开发中，经常需要处理异步操作（如 AJAX 请求）的结果。当这些操作返回的是嵌套数组或者非纯元素（函数或者对象等），并且你想要进一步处理这些数组时，flatMap 可以帮助合并结果。

4.数组中的数组元素转换

代码如下（示例）：

const numbers = [[1, 2], [3, 4], [5, 6]];  
const doubled = numbers.flatMap(array => array.map(num => num * 2));  
console.log(doubled); // [2, 4, 6, 8, 10, 12]

需要将数组中的每个元素（这些元素本身也是数组）转换成另一种形式，并且结果应该是一个单一的数组时，可以使用 flatMap。这个例子中是将每个元素翻倍处理，同理，可以转化为你所需要的结果形式。

5.字符串分割与合并

代码如下（示例）：

const stringArray = ['hello', 'world'];  
const flattenedChars = stringArray.flatMap(str => str.split(''));  
console.log(flattenedChars); // ['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']

使用 flatMap 来处理字符串数组，将每个字符串分割成字符数组，然后合并这些字符数组，比使用常规方法来得简单高效。

---

总结

总的来说，map和flatMap的主要区别在于如何处理回调函数的返回值：map将返回值直接作为新数组的元素，而flatMap则会将返回值中的数组元素“展平”到新数组中。由于它能够同时处理映射和展平操作，它在处理嵌套数据结构时非常有用，可以简化代码并提高效率。