树状结构转换成二维和一维数组

在项目中遇到树状结构的目录要变成一维的数组，就是多级的嵌套目录转化为列表，在JavaScript中列表的数据就是以数组的形式来实现的。

假定现在有如下的树状结构的数据：

const tree = [
        {
          id: 1,
          items: [
            {
              id: 2,
              items: []
            }
          ]
        },
        {
          id: 3,
          items: [
            {
              id: 4,
              items: [
                {
                  id: 5,
                  items: []
                }
              ]
            },
            {
              id: 6,
              items: []
            }
          ]
        },
        {
          id: 7,
          items: [
            {
              id: 8,
              items: []
            }
          ]
        }
      ]

三级嵌套的树状结构，id值按照的是广度优先的顺序排列（这不重要）

然后用以下方法转换为二维的数组：

function turnTreeIntoList (array) {
        return array.map(item => [].concat(item, ...item.items)
        )
      }
console.log(turnTreeIntoList(tree))

控制台输出：

    

...延展运算符将树状结构分开， concat()方法将数组合并，这里只是item 和 item.items进行合并，转化成了二维数组。

要转化成一维的数组，对  turnTreeIntoList 函数进行递归调用即可：

function turnTreeIntoList (array) {
        return [].concat(...array.map(item => [].concat(item, ...turnTreeIntoList(item.items)))
        )
      }
      console.log(turnTreeIntoList(tree))

控制台输出：

这样就可以将树状结构的数据转换成一维或者二维的列表式的数据

将其转换为一维数组后要获取某一元素是第几层的嵌套数据及不同的数组数据元素之间的关系，才能将树状数据以多层目录的形式render到前端页面上。为一维数组对象增加parent和 level属性，parent 指示其父级元素，level指示是什么层级

let navigation = [
          {
            id: 1,
            subitems: [
              {
                id: 2,
                subitems: [],
                parent: 1
              }
            ],
            parent: undefined
          },
          {
            id: 3,
            subitems:[
              {
                id: 4,
                subitems: [
                  {
                    id: 5,
                    subitems: [],
                    parent: 4
                  }
                ],
                parent: 3
              }
            ],
            parent: undefined
          },
          {
            id: 6,
            subitems: [
              {
                id: 7,
                subitems: [],
                parent: 6
              }
            ],
            parent: undefined
          }
        ]
        navigation = flatten(navigation)
        function find (item, level = 0) {
          if (!item.parent) {
            return level
          } else {
            return find(navigation.filter(parentItem => parentItem.id === item.parent)[0], ++level)
          }
        }
        navigation.forEach(item => {
          item.level = find(item)
        })
        console.log(navigation)

控制台输出：