多维对象数组转化为一维数组，简单易懂，拍平数组flatten

谁借莪１个温暖的怀抱￠ 2023-07-17 12:35 22阅读 0赞

首先我们先提出需求，方法总在需求中来，例如现在需要实现图书多级目录的缩进效果，而后端那群大佬给我们的数据长这个样子

var arr = [
    	{ 
    		id:1,
    		title:'我是1目录',
    		subitems: [
    			{ 
    				id: 11,
    				title:'我是1-1目录',
    				subitems:[
    					{ 
    						id:111,
    						title: '我是1-1-1目录',
    						subitems:[]
    					}
    				]
    			},
    			{ 
    				id:12,
    				title: '我是1-2目录',
    				subitems:[]
    			}
    		]
    	},
    	{ 
    		id:2,
    		title: '我是2目录',
    		subitems: [
    			{ 
    				id:21,
    				title: '我是2-1目录',
    				subitems:[]
    			}
    		]
    	}
    ]

这还是模拟，如果是实际数据，看着会头皮发麻!  
那么要怎么拿到各个title呢？有人是直接用forEach循环直接干，然后拼来拼去，这也是一种暴力的做法。  
**但还有一种方法，就是把这个树形结构的数组给拍平成一维数组，这样的好处就是数据结构清晰，先拿到title再说，后面再根据标识来判断是几级目录就OK**

废话不多说，先上代码，**一行就搞定**

function flatten(arr){ 
    	  return [].concat(...arr.map(item => [].concat(item, ...flatten(item.subitems))))
    }

看不懂的话需要先捋一捋两个知识点

1.  扩展运算符 …  
    扩展运算符可以用来拆分数组，去控制台试试**console.log(…\[1,2,3\])**
2.  concat方法，concat方法是用来合并数组的，试试**console.log(\[0\].concat(1,2))**

知道知识点之后就来啃这一行代码了，上面的代码是最终版，有时候一下子反应不过来，那我就循序渐进的来，迭代着来。

**第一版：**

function flatten1(arr){ 
    	// map函数，就是遍历嘛！
    	return arr.map(item => item.subitems)
    	// 这样只能返回第二层的目录数组
    }

如图：  
![在这里插入图片描述][20200321112236594.png]  
**第二版**

// 第一版的连一级目录都没了，所以要拼接进来，怎么拼？
    // 使用concat
    function flatten2(arr){ 
    	return arr.map(item => [].concat(item,...item.subitems))
    	// 这样就可以获取一级目录和二级目录
    }

如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYxODA2OA_size_16_color_FFFFFF_t_70]  
**第三版：**

// 观察第二版的结果可以发现，数组里还是存着2个数组呀，没有变成一维
    // 所以就要把这2个数组利用concat再一次拼接
    function flatten3(arr){ 
    	return [].concat(...arr.map(item => [].concat(item,...item.subitems)))
    	// 这样就是一个一维数组啦
    }

如图：  
![在这里插入图片描述][20200321113257677.png]

**最终版**

// 到第三版为止就可以实现2层的转化，但是上面的数据是有三层的，点解？
    // 这里就要想到用递归方式来，因为item.subitems也是一个数组，所以在本身基础上调用flatten
    function flatten(arr){ 
    	return [].concat(...arr.map(item => [].concat(item,...flatten(item.subitems))))
    	// 到这里就大功告成啦☺
    }

各位老铁，有收获的点个赞呀，祝你头发浓密，资产过亿！

[20200321112236594.png]: /images/20230528/bc0785c11eab41fda5997e36570cfaec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYxODA2OA_size_16_color_FFFFFF_t_70]: /images/20230528/522c27c5f9174865833b43e03ff3ff11.png
[20200321113257677.png]: /images/20230528/91ba78e2d1d9478085337fa2fa44793f.png