JavaScript中的flatMap应用场景

一. 概述

flatMap() 是 JavaScript 中的一个高阶函数，它将一个数组的每个元素映射到一个函数，并将结果压缩成一个新数组。与 map() 不同的是，flatMap() 还可以将结果展开成一个新的数组。它的语法如下：
array.flatMap(function(currentValue, index, arr), thisValue)

其中，function(currentValue, index, arr) 是对数组中的每个元素进行操作的回调函数，参数 currentValue 表示当前处理的元素，index 表示当前元素的下标，arr 表示原始数组。thisValue 可选，表示回调函数中的 this 值。flatMap() 函数的返回值是一个新数组。

flatMap() 方法对数组中的每个元素应用给定的回调函数，然后将结果展开一级，返回一个新数组。它等价于在调用 map() 方法后再调用深度为 1 的 flat() 方法（arr.map(...args).flat()），但比分别调用这两个方法稍微更高效一些。

二. 应用实例

1. 过滤+map

//过滤出大于1的数据，并乘以2
const a = [1,2,3]
const result = a.flatMap((item) => { return item > 1 ? [item * 2] : [] });

2. 扁平化

const data = [
  {
    city: '浙江',
    children: [
      {
        city: '宁波',
        children: [{
          city: '鄞州区',
          children: []
        }, {
          city: '江北区',
          children: []
        }]
      },
      {
        city: '杭州',
        children: [{
          city: '富阳',
          children: []
        }, {
          city: '上城区',
          children: []
        }]
      }
    ]
  },
  {
    city: '上海',
    children: [
      {
        city: '黄浦区',
        children: []
      }
    ]
  }
];

期望得到： [ '浙江,宁波,鄞州区', '浙江,宁波,江北区', '浙江,杭州,富阳', '浙江,杭州,上城区', '上海,黄浦区' ]

flatMap：

function flatTree(nodes, parents = '') {
  return nodes.flatMap(({ city, children }) => {
    const val = parents ? `${parents},${city}` : city;
    return children?.length?flatTree(children, val): val
  })
}

执行： flatTree(data)

3.对象数组映射

flatMap() 函数可以将对象数组映射为新的对象数组，方便数据处理

const users = [
  { name: 'John', skills: ['Java', 'Python'] },
  { name: 'Mary', skills: ['JavaScript', 'PHP'] },
  { name: 'Tom', skills: ['Ruby', 'Go'] }
];
const result = users.flatMap(x => x.skills);
console.log(result); // ["Java", "Python", "JavaScript", "PHP", "Ruby", "Go"]

4. 数组拆分

const arr = [1, 2, 3, 4, 5, 6];
const result = arr.flatMap((x, i) => (i % 2 ? [] : [arr.slice(i, i + 2)]));
console.log(result); // [[1, 2], [3, 4], [5, 6]]

5. 数组去重

const arr = [1, 2, 3, 2, 4, 3, 5, 1];
const result = arr.flatMap((x, i, arr) =>
  arr.indexOf(x) === i ? x : []
);
console.log(result); // [1, 2, 3, 4, 5]

6. 字符串分割

const str = 'Hello,World';
const result = str.split(',').flatMap(x => x.split(''));
console.log(result); // ["H", "e", "l", "l", "o", "W", "o", "r", "l", "d"]