原创

文件路径重组与渲染


文件路径数据

var paths = [
    '123.png',
    'aaa/456.png',
    'aaa/444.jpg',
    'aaa/bbb/222.png',
    'aaa/bbb/223.txt',
    'aaa/bbb/224.exe',
    'aaa/bbb/ccc/111.txt',
    'aaa/bbb/ccc/222.png',
    'aaa/bbb/ccc/ddd/eee/222.png',
    'fff/f1.png',
    'fff/f2.png',
    'fff/sss/ggg/h3.png'
]

组合方式1

dfs深度优先搜索组合

function fn1 (arr) {
    let root = []
    let dfs = (node,fl)=>{
        if (node.length === 1){
            fl.push(node[0])
        } else {
            let [newFl, ...rest] = node
            if (!fl[newFl]){
                fl[newFl] = []
            }
            dfs(rest,fl[newFl])
        }
    }
    arr.forEach(v=>dfs(v.split('/'),root))
    return root
}
// console.log(fn1(paths))

组合方式2

强组

function fn2(arr){
    const root = [];
    // 将路径通过/进行分割成数组
    let list = arr.map(item=>item.split('/'))
    for(let i = 0; i<list.length; i++){
        let node = root;
        let item = list[i]
        // 每一段路径
        for(let j = 0; j < item.length; j++){
            // 当前路径节点
            let key = item[j];
            // 如果当前是最后一个
            if(j===item.length-1) {
                node.push(key)
                break;
            }
            if(!node[key]){
                node[key] = [];
            }
            node = node[key];
        }
    }
    return root;
}
// console.log(fn2(paths))

两种组合方式都为以下结果

渲染树

经典的递归渲染

function renderTree(node,tree){
    for (let i in tree) {
        if (Array.isArray(tree[i])){
            let ul2 = document.createElement('ul')
            let ol = document.createElement('ol')
            ol.innerText = i
            ul2.appendChild(ol)
            node.appendChild(renderTree(ul2,tree[i]))
        } else {
            let li = document.createElement('li')
            li.innerText = tree[i]
            node.appendChild(li)
        }
    }
    return node
}
//let tree = renderTree(document.createElement('ul'),fn2(paths))
//document.body.appendChild(tree)

渲染结果加上样式

<style>
    *{
        list-style: none;
        padding: 0;
        margin: 0;
        padding-left: 15px;
    }
    ul{
        border: 1px solid #2d8cf0;
    }
    ol{
        border: 1px solid #cccccc;
        background: #cccccc;
    }
    ul{
        border: 1px solid #f06b2d;
    }
</style>

最终渲染为

算法技巧
  • 作者:零三(联系作者)
  • 最后更新时间:2021-02-25 20:05
  • 版权声明:自由转载-非商用-非衍生-保持署名
  • 转载声明:来源地址 https://web03.cn
  • 评论