如何解决扁平数据结构转Tree

在工作中我们经常需要把数据进行扁平数据结构转Tree处理. 而它的解决方法其实有很多种,今天我主要来介绍其中的两种方法, 1.利用递归函数来解决首先我们先来创建一组数组

var arr = [
  { id: '29', pid: '', name: '总裁办' },
  { id: '2c', pid: '', name: '财务部' },
  { id: '2d', pid: '2c', name: '财务核算部' },
  { id: '2f', pid: '2c', name: '薪资管理部' },
  { id: 'd2', pid: '', name: '技术部' },
  { id: 'd3', pid: 'd2', name: 'Java研发部' },
  { id: 'd4', pid: 'd3', name: 'spring研发部' },
]

/* 定义封装函数   */
function toDo(arr, pid = '') {
  /* 得到处理之后的树形数据 */
  var newArr = []
  /* 1-循环数组 */
  arr.forEach((item) => {
    if (item.pid === pid) {
      /* 3-收集不是第一层的   收集子集 */
      var child = toDo(arr, item.id)
      if (child.length) {
        item.children = child
      }
      // console.log(obj, 8)
      /* 2-筛选第一层 */
      newArr.push(item)
    }
  })
  return newArr
}
/* 调用函数 */
console.dir(toDo(arr))

我们通过id和pid来进行筛选如果pid为空的化那么它们就作为数组的第一级并且把他们放入到newArr中 然后再在剩下来的数组中进行比较如果它们的pid相同那么他们就是同一个第一级的子集并且子集的pid值等于相应的第一级的id,然后再放入到newArr中,在以此类推.

最后的结果

var arr = [
  { id: '29', pid: '', name: '总裁办' },
  { id: '2c', pid: '', name: '财务部',children:[
      { id: '2d', pid: '2c', name: '财务核算部' },
      { id: '2f', pid: '2c', name: '薪资管理部' },
      ] 
  },
  { id: 'd2', pid: '', name: '技术部',children:[
     { id: 'd3', pid: 'd2', name: 'Java研发部' }, 
  ] },
]

第二种方法 array-to-tree第三方包实现属性数据处理 首先先安装包 $ npm install array-to-tree --save

用法

var arrayToTree = require('array-to-tree');
 
var dataOne = [
  {
    id: 1,
    name: 'Portfolio',
    parent_id: undefined
  },
  {
    id: 2,
    name: 'Web Development',
    parent_id: 1
  },
  {
    id: 3,
    name: 'Recent Works',
    parent_id: 2
  },
  {
    id: 4,
    name: 'About Me',
    parent_id: undefined
  }
];
 
arrayToTree(dataOne);
 
/*
 * Output:
 *
 * Portfolio
 *   Web Development
 *     Recent Works
 * About Me
 */
 
var dataTwo = [
  {
    _id: 'ec654ec1-7f8f-11e3-ae96-b385f4bc450c',
    name: 'Portfolio',
    parent: null
  },
  {
    _id: 'ec666030-7f8f-11e3-ae96-0123456789ab',
    name: 'Web Development',
    parent: 'ec654ec1-7f8f-11e3-ae96-b385f4bc450c'
  },
  {
    _id: 'ec66fc70-7f8f-11e3-ae96-000000000000',
    name: 'Recent Works',
    parent: 'ec666030-7f8f-11e3-ae96-0123456789ab'
  },
  {
    _id: '32a4fbed-676d-47f9-a321-cb2f267e2918',
    name: 'About Me',
    parent: null
  }
];
 
arrayToTree(dataTwo, {
  parentProperty: 'parent',
  customID: '_id'
});
 
/*
 * Output:
 *
 * Portfolio
 *   Web Development
 *     Recent Works
 * About Me
 */
```
```