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

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

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)
	// 这样只能返回第二层的目录数组
}

如图：

第二版

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

如图：

第三版：

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

如图：

最终版

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

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