【JavaScript中数组的flatMap方法的详细介绍】

在我们平时对数组进行操作的时候，通常map、forEach和filter方法比较常用。而flatMap方法用得相对少一些。当你掌握了flatMap方法的使用之后，我相信你一定会喜欢上它的！

下面我们会通过以下三个问题展开对flatMap方法的讲解：

 1. flatMap是什么？
 2. 如何使用flatMap方法？
 3. flatMap方法结合实际场景的使用。
 
flatMap是什么？

 flatMap是数组的一个新方法，它会遍历原数组的每一个元素， 并且会为每个元素都执行一次传入的回调函数，最终把所有元素执行回调函数返回的结果压缩成一个新数组，flatMap会返回一个新的数组，不会改变原数组的元素。

参数：  
        callback:   

                遍历数组元素的时候，会为每一个元素都执行一次回调函数，可以传入三个参数：

                currentValue：当前正在数组中处理的元素。

                index：可选的。数组中正在处理的当前元素的索引。

                array：可选的。调用flatMap方法的数组。

如何使用flatMap方法？

flatMap能用于在遍历数组期间增加、删除和修改数组元素（也就是修改 items 的数量），当我们需要增加元素时，就在回调函数中返回一个包含多个元素的数组，如果想要删除某一个元素时，就在回调函数中返回一个空数组（注意是空数组，返回空字符串、null或者undefined都不会改变数组items 的数量）,如果想要修改元素，则在回调函数中返回一个修改过后的元素即可。

增加元素：

	// 增加元素
	const msgArr = ["it's Sunny in", "California"];

	const newArr = msgArr.flatMap(i => i.split(' '))
	console.log(newArr); //   ["it's", "Sunny", "in", "California"]

删除元素：

    // 删除元素
	const arr = [1, 2, 3, 4]
	
	const newArr = arr.flatMap(x => x % 2 === 0 ? [x]: [])
	
	console.log(newArr); // [2, 4]

修改元素：

    // 修改元素
	const arr = [1, 2, 3, 4]
	
	const newArr = arr.flatMap(x => [x * 2])
	
	console.log(newArr); // [2, 4, 6, 8]

flatMap方法结合实际场景的使用：

下面我们来看一个实际的例子：例如我们现在有一个选择公司的Select下拉组件，但是后端接口返回的公司列表里面的每一项的字段和我们Select下拉组件需要的字段格式不一样，而且我们还有一个特殊的要求，就是已授权的公司我们才允许在Select下拉组件中选择。这时候我们就想办法遍历公司列表，然后先把未授权的公司过滤掉，然后再把每一项转换成Select下拉组件所需要的数据格式。

这是我们最后展示的公司下拉组件：

接口返回的公司列表数据结构如下：

	/**
	 * 后端接口返回的公司列表数据：
	 * 	Id: 公司的唯一ID
	 *  Name: 公司名称
	 * 	Authorized: 是否已经授权： 1:已授权，2：未授权
	 * 
	 */
	
	const studioList = [
		{
			Authorized: "2",
			CompanyType: "1",
			Id: "3729",
			Name: "阿我打完的",
			ServiceProviderId: "6",
			TenantId: "1",
		},
		{
			Authorized: "1",
			CompanyType: "1",
			Id: "3134",
			Name: "纳税统计-启用时间202101无期初",
			ServiceProviderId: "6",
			TenantId: "1",
		},
		{
			Authorized: "1",
			CompanyType: "1",
			Id: "427",
			Name: "美丽人生工作室",
			ServiceProviderId: "6",
			TenantId: "1",
		},
		{
			Authorized: "1",
			CompanyType: "1",
			Id: "410",
			Name: "凭证测试专用2",
			ServiceProviderId: "6",
			TenantId: "1",
		}
	]	

 选择公司的Select下拉组件需要的数据格式如下：

    [
		{
			text: '公司名称',
			value: '公司ID'
		}
	]

接下来我们就需要把Authorized等于2的过滤掉，然后再转换成Select下拉组件需要的格式，

我们先使用filter配合map来实现：

const filterList = studioList.filter(r => r.Authorized === '1').map(i => ({text: i.Name, value: i.Id}))
	
// 最终也是可以得到我们想要的数据的：[{text: "纳税统计-启用时间202101无期初",value: "3134"},{text: "美丽人生工作室",value: "427"},{text: "凭证测试专用2",value: "410"}]
console.log(filterList);
	

但是使用filter配合map来实现看起来不是那么简洁易读，下面我们使用flatMap方法来替代：

const filterList = studioList.flatMap(r => r.Authorized === '1' ? [{text: r.Name, value: r.Id}] : [])
	

最终也是得到一样的结果的，但是flatMap用起来更简洁易读一些。

以上就是flatMap的简单介绍和使用啦，如果有写得不好的地方还望路过的大佬指出改正，每一次都是用心在做事，如果觉得这篇文章对你有帮助麻烦点个赞支持一下，谢谢！