关键词：JavaScript 递归 concat 扩展运算符
开发中常常会遇见深度很深的多维数组，比如各种目录，列表信息等，这种数组通常有个一层套一层的特点，我们先看个简单的例子：
有一个数组a，它的第一个元素里嵌套了一个subitems的对象，观察到元素都有相同的结构，现在想要把a改造成三个元素并列的数组，该怎么做？
const a = [
{
id: 1,
name: '第一个',
subitems: {
id: 2,
name: '第二个'
}
},
{
id:3,
name: '第三个'
}
];
//改造成:
[
{
id:1,
name:'第一个',
subitems: {
id: 2,
name: '第二个'
}
},
{
id:2,
name:'第二个'
},
{
id:3,
name: '第三个'
}
];
观察数组的结构，我们想到了先把subitems提取出来然后再往下。
这里可以用到ES6的扩展运算符来把subitems的元素提取出来，观察下结果：
{...a[0].subitems}
//结果是
{
id: 2,
name: '第二个'
}
感觉可以，接着往下，这时尝试把这个结果拼接到原数组里：
a.map(item => [].concat(item, item.subitems ))
观察结果，subitems里的元素被拼接到了包含它的元素后面了，原来的元素没有发生变化。这时我们想着如果再对这个结果前加上扩展运算符，拼接到一个空数组里是不是就可以了？试试。
b = a.map(item => [].concat(item, item.subitems ))
[].concat(...b)
//观察结果
//(4) [{…}, {…}, {…}, undefined]
展开结果一看，已经成功添加到了新的数组里。总结一下，利用了扩展运算符把对象里的子元素抽取出来，然后再用concat添加到空的数组里，重复利用这个办法来解决了这个需求。由于扩展运算符并不能递归地遍历子元素里的内容，所以当数组更深的时候这样是不能将多级子元素里的subitems提取出来的。看下面的数组：
const array = [
{
id: 1,
name: '第一个',
subitems: {
id: 2,
name: '第二个',
subitems: {
id:4,
name: '第四个',
subitems: {
id:5,
name: '第五个'
}
}
}
},
{
id:6,
name: '第六个'
}
];
我们往之前的数组的第一个元素增加了深度，这个时候该怎么做呢？
刚才我们map的时候把每个元素的subitems和元素本身一同放到了一个空数组里的时候，每个元素的subitems里是没有subitems的，但新构造出来的数组与之前多的就是子元素里还嵌套了subitems，这里似乎可以有操作的空间。我们先把之前数组扁平的方法写成function。
function flattern(array) {
return [].concat(array.map(item => [].concat(item, ...item.subitems)))
}
如果不习惯看箭头函数可以把它改写成熟悉的for循环形式。
function flattern(array) {
return [].concat(array.map(item => [].concat(item, ...flattern(item.subitems))))
}
再观察下结果，调整array的形式，问题解决。
我们仅仅是把item.subitems调用了自己所在的flatten，这样就保证了flattern(item.subitems)返回的新数组是扁平的数组，整个问题得以解决，这也是递归的常见解法和思路，当碰到这类问题时先把问题简化，一点点地推进，在合适的位置往往就能解决问题，希望本文有所帮助。
