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

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

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