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

删除嵌套数据

const arr = [
    {
        "id": "Erlebniskategorien",
        "title": "Erlebniskategorien",
        "uri": "/on/demandware.store/Sites-JSShop-Site/default/SearchJS-Show",
        "children": [
            {
                "id": "fliegen-fallen",
                "title": "Fallen & Springen",
                "uri": "/fliegen-fallen/fallen-springen,default,sc.html",
                "children": [
                    {
                        "id": "fallen-springen",
                        "title": "Fallen & Springen",
                        "uri": "/fliegen-fallen/fallen-springen,default,sc.html",
                        "children": []
                    }
                ]
            },
            {
                "id": "Weit-Weg",
                "title": "Reisen & Kurzurlaub",
                "uri": "/reisen/Weit-Weg,default,sc.html",
                "children": [
                    {
                        "id": "staedtereisen",
                        "title": "Städtereisen",
                        "uri": "/reisen/staedtereisen,default,sc.html",
                        "children": []
                    }
                ]
            },
            {
                "id": "motorpower",
                "title": "Motorpower",
                "uri": "/geschenke-maenner/motorpower,default,sc.html",
                "children": [
                    {
                        "id": "rennwagen",
                        "title": "Rennwagen",
                        "uri": "/motorpower/rennwagen,default,sc.html",
                        "children": []
                    }
                ]
            },
            {
                "id": "10",
                "title": "Erlebnisse mit Stars",
                "uri": "/erlebnisse-mit-stars/l/10",
                "children": [
                    {
                        "id": "glossar",
                        "title": "Glossar",
                        "uri": "/erlebnisstandorte/glossar,default,pg.html",
                        "children": []
                    }
                ]
            }
        ]
    }
]
const removeId = "glossar";
const res = arr.flatMap(function fn(item) {
  return item.id !== removeId ? ({...item, children: item.children.flatMap(fn)}) : [];
});

console.log(res);

flatMap是什么？

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

参数：
callback:

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

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

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

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

如何使用flatMap方法？

:::info
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方法结合实际场景的使用：

	/**
	 * 	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",
		}
	]	

需要的数据格式如下：

[
  {
    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"}]

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

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

版权声明：本文为CSDN博主「China_YF」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_37873510/article/details/125101910