JavaScript 多维数组变一维

关键词：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)返回的新数组是扁平的数组，整个问题得以解决，这也是递归的常见解法和思路，当碰到这类问题时先把问题简化，一点点地推进，在合适的位置往往就能解决问题，希望本文有所帮助。