当前位置： 首页 > article >正文

【前端面试】list转树、拍平, 指标,

article 2024/12/23 4:43:26

这个题目涉及的是将一组具有父子关系的扁平数据转换为树形结构，通常称为“树形结构的构建”问题。类似的题目包括：

1. 组织架构转换

给定一个公司的员工列表，每个员工有 id 和 managerId，其中 managerId 表示该员工的上级。任务是将这个员工列表转换为一个树形的组织架构。

示例：

const employees = [
    { id: 1, name: 'CEO', managerId: null },
    { id: 2, name: 'CTO', managerId: 1 },
    { id: 3, name: 'Engineer 1', managerId: 2 },
    { id: 4, name: 'Engineer 2', managerId: 2 },
    { id: 5, name: 'CFO', managerId: 1 },
    { id: 6, name: 'Accountant', managerId: 5 }
];

目标： 将这些数据转换为组织架构树。

const ROOT_MANAGER_ID = null;

function buildOrgChart(employees) {
    const map = new Map();
    let roots = [];

    employees.forEach((employee) => {
        map.set(employee.id, { ...employee, subordinates: [] });
    });

    employees.forEach((employee) => {
        const currentEmployee = map.get(employee.id);
        const managerId = employee.managerId;

        if (managerId === ROOT_MANAGER_ID) {
            roots.push(currentEmployee); // 如果没有经理，就认为是根节点
        } else {
            const manager = map.get(managerId);
            if (manager) {
                manager.subordinates.push(currentEmployee); // 将下属添加到经理的子节点数组
            } else {
                console.error(`Invalid managerId ${managerId} for employee with id ${employee.id}`);
            }
        }
    });

    return roots;
}

const orgChart = buildOrgChart(employees);
console.log(JSON.stringify(orgChart, null, 2));

2. 文件夹和文件结构

给定一个文件夹和文件列表，每个文件或文件夹有 id、name 和 parentId，表示文件夹和文件之间的层级关系，任务是构建文件夹和文件的层级树。

示例：

const items = [
    { id: 1, name: 'root', parentId: null },
    { id: 2, name: 'Folder 1', parentId: 1 },
    { id: 3, name: 'File 1', parentId: 2 },
    { id: 4, name: 'File 2', parentId: 2 },
    { id: 5, name: 'Folder 2', parentId: 1 },
    { id: 6, name: 'File 3', parentId: 5 }
];

目标： 将文件夹和文件转换为树形结构。

const ROOT_PARENT_ID = null;

function buildFileStructure(items) {
    const map = new Map();
    let roots = [];

    items.forEach((item) => {
        map.set(item.id, { ...item, children: [] });
    });

    items.forEach((item) => {
        const currentItem = map.get(item.id);
        const parentId = item.parentId;

        if (parentId === ROOT_PARENT_ID) {
            roots.push(currentItem); // 如果没有父文件夹，则认为是根文件夹
        } else {
            const parent = map.get(parentId);
            if (parent) {
                parent.children.push(currentItem); // 将当前文件或文件夹添加到父节点的 children 数组
            } else {
                console.error(`Invalid parentId ${parentId} for item with id ${item.id}`);
            }
        }
    });

    return roots;
}

const fileStructure = buildFileStructure(items);
console.log(JSON.stringify(fileStructure, null, 2));

3. 评论/回复树

给定一组评论数据，其中每个评论包含 id、parentId 和 content，任务是将这些评论转换为树形结构，其中 parentId 为 null 或 0 表示根评论。

示例：

const comments = [
    { id: 1, parentId: null, content: 'First comment' },
    { id: 2, parentId: 1, content: 'Reply to first comment' },
    { id: 3, parentId: 1, content: 'Another reply to first comment' },
    { id: 4, parentId: 2, content: 'Reply to reply' }
];

目标： 将评论转换为树形结构。

const ROOT_PARENT_ID = null;

function buildCommentTree(comments) {
    const map = new Map();
    let roots = [];

    comments.forEach((comment) => {
        map.set(comment.id, { ...comment, replies: [] });
    });

    comments.forEach((comment) => {
        const currentComment = map.get(comment.id);
        const parentId = comment.parentId;

        if (parentId === ROOT_PARENT_ID) {
            roots.push(currentComment); // 如果没有父评论，则认为是根评论
        } else {
            const parent = map.get(parentId);
            if (parent) {
                parent.replies.push(currentComment); // 将当前评论添加到其父评论的 replies 数组
            } else {
                console.error(`Invalid parentId ${parentId} for comment with id ${comment.id}`);
            }
        }
    });

    return roots;
}

const commentTree = buildCommentTree(comments);
console.log(JSON.stringify(commentTree, null, 2));

4. 分类树

给定商品分类列表，其中每个分类有 id、parentId 和 name，任务是将这些分类转换为树形结构。

示例：

const categories = [
    { id: 1, name: 'Electronics', parentId: null },
    { id: 2, name: 'Computers', parentId: 1 },
    { id: 3, name: 'Laptops', parentId: 2 },
    { id: 4, name: 'Smartphones', parentId: 1 }
];

目标： 将分类列表转换为树形结构。

const ROOT_PARENT_ID = null;

function buildCategoryTree(categories) {
    const map = new Map();
    let roots = [];

    categories.forEach((category) => {
        map.set(category.id, { ...category, subcategories: [] });
    });

    categories.forEach((category) => {
        const currentCategory = map.get(category.id);
        const parentId = category.parentId;

        if (parentId === ROOT_PARENT_ID) {
            roots.push(currentCategory); // 根分类
        } else {
            const parent = map.get(parentId);
            if (parent) {
                parent.subcategories.push(currentCategory); // 添加子分类
            } else {
                console.error(`Invalid parentId ${parentId} for category with id ${category.id}`);
            }
        }
    });

    return roots;
}

const categoryTree = buildCategoryTree(categories);
console.log(JSON.stringify(categoryTree, null, 2));

这些题目都涉及构建树形结构，核心的思想是遍历节点，将每个节点的父子关系映射到树形结构上，通常会用到哈希表（如 Map）来缓存节点，以避免多次查找。

评定指标

性能方面

  • 加载性能：通过工具测量 FCP（首次内容绘制）和 LCP（最大内容绘制）指标，理想的 FCP 应在1.8秒内，LCP 应在2.5秒内。TTFB（首字节时间）也很关键，其理想时间应在800毫秒内，该指标反映了服务器响应速度及网络传输等综合情况.
  • 交互性能：FID（首次输入延迟）测量用户首次交互到浏览器响应的时间，应在100毫秒内响应用户输入。TBT（总阻塞时间）反映长任务对主线程的阻塞情况，移动设备上应低于300毫秒，桌面 Web 上应低于100毫秒.
  • 渲染性能：动画或滚动需在10毫秒内生成每一帧，以保证视觉平滑。可查看页面在滚动、切换等交互时的动画效果是否流畅.
  • 资源优化：查看页面的 HTTP 请求数量和资源大小，合理减少请求数量、压缩资源文件，如压缩 CSS、JavaScript 和图片等，可加快页面加载速度.

稳定性方面

  • 页面布局稳定性：CLS（累积布局偏移）用于衡量页面布局在加载过程中的变化情况，其值应控制在0.1以内，以确保用户浏览时页面元素不会出现意外的大幅移动.
  • 兼容性：检查页面在不同浏览器、不同设备及不同屏幕分辨率下的显示和交互是否正常，确保网站的兼容性，提高用户体验的一致性。
  • 错误处理：查看控制台是否有 JavaScript 错误、资源加载失败等问题，若有则会影响页面的正常功能和稳定性，需及时修复。
  • 性能的一致性：在不同的网络环境下，如宽带、4G、5G 等，页面的性能表现应相对稳定，不会出现因网络波动而导致页面长时间无法加载或频繁出错的情况 。

http://www.kler.cn/a/447439.html

相关文章：

  • ROS1入门教程3：自定义消息
  • LeetCode题练习与总结：预测赢家--486
  • 前端关于pptxgen.js个人使用介绍
  • android studio更改应用图片，和应用名字。
  • lpips使用笔记
  • Azure虚拟机非托管磁盘大小调整
  • 堆排序【东北大学oj数据结构9-4】C++
  • ELK系列-（六）Redis也能作为消息队列？（下）
  • 用Python设置Excel工作表的页眉和页脚
  • Python解决安装包报错4.0.0-unsupported
  • 使用支持向量机（SVM）实现二分类
  • 数据倾斜的原因以及解决方法
  • SQL注入（SQL lnjection Base）21
  • 数据结构_平衡二叉树
  • 前端面试题整理-前端异步编程
  • 【Token】校验、会话技术、登录请求、拦截器【期末实训】实战项目学生和班级管理系统\Day15-后端Web实战(登录认证)\讲义
  • ip_forward函数
  • gesp(二级)（7）洛谷：B3865：[GESP202309 二级] 小杨的 X 字矩阵
  • STM32-笔记7-继电器定时开闭
  • 雅思真题短语梳理（八）
  • 常用的JVM启动参数有哪些?
  • 电子发票汇总改名，批量处理电子发票问题
  • ChatGPT接口测试用例生成的流程
  • windows安装Elasticsearch及增删改查操作
  • 基于SpringBoot+Mysql实现的在线音乐系统平台功能实现一
  • postman测试导入文件