日期：2017年10月25日

js 文件树的数据格式化方法

使用tree对数据格式有要求。我们需要自动递归循环读取所有的层级关系并输出我们想要的格式。

方法一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var filelist = [
  { name: 'a.html', path: 'src/app' },
  { name: 'b.html', path: 'src/app' },
  { name: 'c.html', path: 'src/app/com' },
  { name: 'd.html', path: 'src/acc' },
  { name: 'e.html', path: 'src/acc' }
]
 
function structuring(arr) {
  var rtn = []
  arr.forEach((el, i) => {
    var keys = el.path.split('/')
    keys.push(el.name)
    var tmp = rtn;
    keys.forEach((key, i) => {
      if (!findTitle(tmp, key).length) {
        if (key.indexOf('.html') > -1) {
          tmp.push({ title: key })
        } else {
          tmp.push({ title: key, children: [] })
          tmp = findTitle(tmp, key)[0].children
        }
      } else {
        tmp = findTitle(tmp, key)[0].children
      }
    });
  })
  return rtn
}
 
function findTitle(arr, title) {
  var tmp = arr.filter((v, i) => {
    return v.title === title
  })
  return tmp
}
 
console.log(structuring(filelist))

输出结果如下：

未命名1508895042

方法二：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
class FileTree {
  constructor (filelist) {
    this.tree = new Map()
    if (filelist) {
      this.build(filelist)
    }
  }
 
  build (filelist) {
    filelist.forEach(file => {
      const path = file.path.split('/')
      let dir = path.reduce((node, p) => {
        if (!p) { return node }
        if (!node.has(p)) {
          node.set(p, new Map())
        }
        return node.get(p)
      }, this.tree)
      dir.set(file.name, new Map())
    })
  }
 
  values () {
    return this._genTree(this.tree)
  }
 
  _genTree (node) {
    return Array.from(node.entries())
      .map(([k, v]) => {
        const result = {title: k}
        if (v.size > 0) { result.children = this._genTree(v) }
        return result
      })
  }
}
var filelist = [{ name: 'a.html', path: 'src/app' }, { name: 'b.html', path: 'src/app' }, { name: 'c.html', path: 'src/app/com' }, { name: 'd.html', path: 'src/acc' }, { name: 'e.html', path: 'src/acc' }]
 
const fileTree = new FileTree(filelist)
console.log(JSON.stringify(fileTree.values(), null, '  '))

输出结果如下：

123123