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

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

1. 组织架构转换

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

示例：

js 复制代码

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

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

js 复制代码

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，表示文件夹和文件之间的层级关系，任务是构建文件夹和文件的层级树。

示例：

js 复制代码

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

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

js 复制代码

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 表示根评论。

示例：

js 复制代码

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

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

js 复制代码

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，任务是将这些分类转换为树形结构。

示例：

js 复制代码

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

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

js 复制代码

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 等，页面的性能表现应相对稳定，不会出现因网络波动而导致页面长时间无法加载或频繁出错的情况。