JavaScript =＞省市区 将一个没有层级的扁平对象,转换为树形结构({value, children})结构的对象

前端开发肯定要用到级联省市区级联选择器的

如果有这样一个具有层级结构的数据，实现这个功能非常容易，因为这个结构和组件的结构是一致的，递归遍历就可以了。

但是，由于后端通常采用的是关系型数据库，所以返回的数据通常会是这个样子：

entries: [
        {
          'province': '浙江', 'city': '杭州', 'name': '西湖'
        }, {
          'province': '四川', 'city': '成都', 'name': '锦里'
        }, {
          'province': '四川', 'city': '成都', 'name': '方所'
        }, {
          'province': '四川', 'city': '阿坝', 'name': '九寨沟'
        }],
      level: ['province', 'city', 'name']

前端这边想要将数据转换一下其实也不难，因为要合并重复项，可以参考数据去重的方法来做，于是此工程师写了这样一个版本：

/**
 * 将一个没有层级的扁平对象,转换为树形结构({value, children})结构的对象
 * @param {array} tableData - 一个由对象构成的数组,里面的对象都是扁平的
 * @param {array} route - 一个由字符串构成的数组,字符串为前一数组中对象的key,最终
 * 输出的对象层级顺序为keys中字符串key的顺序
 * @return {array} 保存具有树形结构的对象
 */

var transObject = function(tableData, keys) {
  let hashTable = {}, res = []
  for( let i = 0; i < tableData.length; i++ ) {
    if(!hashTable[tableData[i][keys[0]]]) {
      let len = res.push({
        value: tableData[i][keys[0]],
        children: []
      })
      // 在这里要保存key对应的数组序号,不然还要涉及到查找
      hashTable[tableData[i][keys[0]]] = { $$pos: len - 1 }
    }
    if(!hashTable[tableData[i][keys[0]]][tableData[i][keys[1]]]) {
      let len = res[hashTable[tableData[i][keys[0]]].$$pos].children.push({
        value: tableData[i][keys[1]],
        children: []
      })
      hashTable[tableData[i][keys[0]]][tableData[i][keys[1]]] = { $$pos: len - 1 }
    }
    res[hashTable[tableData[i][keys[0]]].$$pos].children[hashTable[tableData[i][keys[0]]][tableData[i][keys[1]]].$$pos].children.push({
      value: tableData[i][keys[2]]
    })
  }
  return res
}

var data = [{
  "province": "浙江",
  "city": "杭州",
  "name": "西湖"
}, {
  "province": "四川",
  "city": "成都",
  "name": "锦里"
}, {
  "province": "四川",
  "city": "成都",
  "name": "方所"
}, {
  "province": "四川",
  "city": "阿坝",
  "name": "九寨沟"
}]

var keys = ['province', 'city', 'name']

console.log(transObject(data, keys))

还好 keys 的长度只有
3，这种东西长了根本没办法写，很明显可以看出来这里面有重复的部分，可以通过循环搞定，但是此工程师想了很久都没有思路，就搁置了。直到后来请教了一位做数据的同事，同事说："你听过
trie 树吗？"于是此工程师像发现新大陆一般学习了 trie 树，之后优化出了第二个版本：

 solution(tableData, keys) {
      const hashTable = {}
      const res = []
      for (let i = 0; i < tableData.length; i++) {
        let arr = res
        let cur = hashTable
        for (let j = 0; j < keys.length; j++) {
          const key = keys[j]
          const filed = tableData[i][key]
          if (!cur[filed]) {
            const pusher = {
              value: filed
            }
            let tmp
            if (j !== (keys.length - 1)) {
              tmp = []
              pusher.children = tmp
            }
            cur[filed] = { $$pos: arr.push(pusher) - 1 }
            cur = cur[filed]
            arr = tmp
          } else {
            cur = cur[filed]
            arr = arr[cur.$$pos].children
          }
        }
      }
      return res
    }

这样，解决方案就和 keys 的长短无关了。

遇到这类技术问题，如果工程师不了解数据结构，没有听说过 trie树，就好比遭遇了《三体》中的降维打击一般无从下手。数据结构对程序的重要性可见一斑。

如果后端给这种部门的结构我们也是能够处理的

partMent: {
        h3: {
          parent: 'h2',
          name: '副总经理(市场)'
        },
        h1: {
          parent: 'h0',
          name: '公司机构'
        },
        h7: {
          parent: 'h6',
          name: '副总经理(总务)'
        },
        h4: {
          parent: 'h3',
          name: '销售经理'
        },
        h2: {
          parent: 'h1',
          name: '总经理'
        },
        h8: {
          parent: 'h0',
          name: '财务总监'
        },
        h6: {
          parent: 'h4',
          name: '仓管总监'
        },
        h5: {
          parent: 'h4',
          name: '销售代表'
        },
        h0: {
          parent: '',
          name: 'root'
        }
      }}

partTree(data) {
      let key, res
      for (key in data) {
        const parent = data[key].parent
        if (parent === '') {
          res = data[key]
        } else {
          data[parent][key] = data[key]
        }
      }
      return console.log(res)
    }