数组分组怎么弄...？

Question

有一串数组如下：

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' }]

如何使用JavaScript将其遍历为文件树的格式：
如下

    [{
        title: 'src',
        children: [{
            title: 'app',
            children: [{
                title: 'a.html'
            }, {
                title: 'b.html',
            }, {
                title: 'com',
                children: [{
                    title: 'c.html'
                }
            }]
        }, {
            title: 'acc',
            children: [{
                title: 'c.html'
            }, {
                title: 'd.html',
            }]
        }]
    }]

├── src
│   ├── app
│      ├── index.html
│      ├── a.html
│      ├── com
│         ├── b.html

Answer 1

随手写的，只是针对你给出的 filelist 的格式
详见以下代码

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))

Answer 2

用 map 应该会快些

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, '  '))

Answer 3

写个递归函数，借用空格符换行符以及自定义的符号来做