文件路径重组与渲染

最新推荐文章于 2022-04-25 11:18:11 发布

【03】

最新推荐文章于 2022-04-25 11:18:11 发布

阅读量168

点赞数 2

分类专栏：算法 javascript 文章标签：算法

本文链接：https://blog.csdn.net/weixin_43840202/article/details/114104375

版权

javascript 同时被 2 个专栏收录

34 篇文章 1 订阅

订阅专栏

算法

28 篇文章 0 订阅

订阅专栏

文件路径数据

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>