【vue】将扁平化数组结构数据处理为tree对象数组并对tree对象进行排序

关注

原创最新推荐文章于 2026-10-30 13:36:49 发布 1.8k 阅读 AI 写同款· GEO 优化 ›

前端工程师能力地图：从JavaScript基础到性能优化的笔试全解析 JavaScript作为现代Web开发的基石，其核心概念如作用域、闭包、原型链和异步编程，构成了前端工程师理解语言运行机制的关键。这些原理不仅决定了代码的执行结果，更深刻影响着应用的性能与可维护性。深入掌握这些基础，能帮助开发者编写出更高效、健壮的代码，从而应对复杂业务场景的挑战。在前端工程实践中，性能优化是衡量工程师能力的重要维度，它涉及网络请求、渲染流程、代码分割等多个层面。本文基于前端面试中的高频考点，系统梳理了从语言基础、浏览器原理到框架应用、算法思维及系统设计的完整能力体系，并结合虚拟DOM、事件阅读详情

/**
 * 将扁平化数据结构处理为tree结构
 * @param { 扁平化数据结构 } obj 
 */
export function formatTree(obj){
　　let copyedObj = JSON.parse(JSON.stringify(obj));  //深拷贝源数据
　　return copyedObj.filter(parent =>{
　　　　let findChildren = copyedObj.filter(child => {
　　　　　　return parent.id === child.parentId;
　　　　})
　　　　findChildren.length > 0 ? parent.children = findChildren : parent.children = []
　　　　return parent.parentId == undefined   
　　})
}

此处为根据tree结构对象中的location值的大小进行排序

/**
 * 树结构list排序
 * @param { tree结构list } list 
 */
export function sortList(list){
    list.sort((obj1, obj2) => {
        obj1.location = obj1.location || 255;
        obj2.location = obj2.location || 255;
        let val1 = Number(obj1.location);
        let val2 = Number(obj2.location);
        if (val1 < val2) {
            return -1;
        } else if (val1 > val2) {
            return 1;
        } else {
            return 0;
        }
    }).forEach(v => {
        if(v.children){
            sortList(v.children);
        }
    });
}

收录于