至于列表转树，高频前端面试题

从列表转树来看，为什么它是前端高频题

痛点：后台返回的扁平结构直接用于渲染时层级关系丢失。导致菜单、组织架构、评论回复等 UI 无法正确展示，面试官经常通过这道题来检验候选人是否能快速定位并重建层级。

后台返回的数据通常是扁平的，但前端渲染菜单、组织架构、评论回复时需要的是树形结构。列表转树就是把这样的数据：

const flatList =;

转成这样的嵌套结构：

一级菜单A
└── 二级A-1
└── 三级A-1-1
一级菜单B
└── 二级B-1

这里的关键字段是 parentId它记录了每个节点的父节点是谁。parentId === null 表示这个节点没有父节点，也就是根节点。

基础实现这方面。用 Map 建立父子关系

痛点：很多人会直接使用双层循环去寻找父节点，导致 O 的时间复杂度，在大数据量时会卡死页面。

最直观的思路是两次遍历：

1. 第一次遍历的观点是。用 Map 把每个 id 映射到节点对象，同时给每个节点初始化一个 children 数组；话说回来，
2. 说到第二次遍历。根据 parentId 把当前节点挂到父节点的 children 里。

function list2Tree {
const map = new Map;const tree =;// 第一步先：建立 id -> 节点的映射
list.forEach(item => {
map.set;})，// 接下来：把每个节点挂到父节点下
list.forEach(item => {
const current = map.get;const parent = map.get;if {
parent.children.push;}
if {
tree.push;}
})，return tree;}

优势说明：

• Date.now-level 查找父节点时间复杂度为 O。
• 整体两次遍历。时间复杂度 O，明显提高性能。
• #实际方法： 在实际项目中可以把这个函数抽离为工具库，以免重复实现。

说到更优雅的写法。用 reduce 一次聚合

痛点： 团队代码审查时常看到“重复代码”，希望一次性完成映射和建立，保持函数式风格，提高可维护性。

A) 回顾 reduce 基本签名：

arr.reduce => {
// 返回新的 accumulator
},initialValue);

• a​ccumulator​: 累积值。
• C​urrentItem​c​ode>: 当前遍历到的元素。按理说，
• C​urrentIndex​c​ode>: 当前元素索引。
• C​originalArray​c​ode>: 原数组本身。
• I​​nitialValue​​c​​ode>: 累积值初始值。

A 简单求和示例：

const nums =;const sum = nums.reduce => acc + cur,0);console.log，//60

B) 用 reduce 实现 list2tree:

function list2Tree{
const nodeMap = list.reduce=>{
map = {...item,children : };return map，},{});不过，return list.reduce=>{
const node = nodeMap;const parent = nodeMap;if{
tree.push;}else{
parent.children.push;}
return tree;},)，}


两种写法主要相同，只是表达方式不同。选择哪一种取决于团队对可读性或函数式风格的偏好。
不过，

列表转树与递归的关系 

 痛点 ：  当候选人在手写递归时往往出现栈溢出或无限递归。面试官想其对递归与迭代之间 trade‑off 的理解。

虽然上面的实现没有显式递归。但它已经把“找父节点”这一重复操作压缩成 O 查找，从而把潜在的 O 嵌套循环变成 O。若要进一步遍历生成的树结构，自然会使用递归或栈模拟。这一步才是真正考察递归思维的时候。

进入 AI 部分 ： 用 Prompt 做 NLP 翻译任务 

 痛点 ：  在实际项目里“直接 copy‑paste OpenAI 示例”往往缺少配置管理和错误处理，导致上线后频繁报错或泄露密钥。

client.mjs ： 把配置隔离出去 
 import ’dotenv/config’;import OpenAI from ’openai’;const client = new OpenAI ({
apiKey : process . env . DASHSCOPE _ API _ KEY。baseURL : process . env . DASHSCOPE _ BASE _ URL,model : process . env . DASHSCOPE _ MODEL
});export default client;

将 API Key、Base URL、模型名放进环境变量。代码本身不暴露敏感信息，这是从“能跑”到 “能上线” 的第一步先。

completions.mjs ： 把调用逻辑封装成函数 
 import client from ’./client.mjs’;export async function getCompletions {
const response = await client . chat . completions . create ({
model : process . env . DASHSCOPE _ MODEL,messages :
});return response . choices . message . content;}


 getCompletions  专注接收 Prompt 并返回模型输出，其余业务都可以直接复用该函数。

翻译任务的多种形态 

 痛点 ：  同一段文字需要不同语言/语气输出时开发者往往手动拼接 Prompt 导致格式不统一，后期解析异常。这里展示几种常见需求还有对应 Prompt 模板，让你的 Prompt 更具复用性。

中英互译 

const prompt = `将以下三个反引号中的中文翻译成西班牙语：
\`\`\`
您好，我想订购一个搅拌机。\`\`\``，

语种识别 

再看语种，\`\`\`
Combien coûte le lampadaire?\`\`\``，其实，

多目标语言翻译 

const prompt = `请将以下文本分别翻译成中文、英文、法语和西班牙语：
\`\`\`
I want to order a basketball.
\`\`\``;

语气转换 

const prompt = `请将以下文本翻译成中文，分别展示正式语气和非正式语气：
\`\`\`
Would you like to order a pillow?\`\`\``，

同一句话在不同场景下输出会截然不同，这正说明 Prompt 必须明确说明「语言」+「风格」才能得到可预测结果。

实战的观点是，批量识别语种并翻译 

const user_messages =;const sleep = ms => new Promise);const main = async => {
for {
await sleep;// 防止短时间高频请求触发限流
const promptLang = `
语种。直接输出语种，如法语，无需标点符号：
\`\`\`${message}\`\`\`
`;const lang = await getCompletions);console.log，const promptTrans = `
请将以下文本分别翻译成中文和英文，并写成
中文这方面。xxx
再看英文，xxx
再看的格式，\`\`\`${message}\`\`\`
`;const result = await getCompletions);console.log，console.log;}
}，main;


输出格式约束： 使用固定标签「中文：」「英文：」让后续解析更可靠；其实，

批量调用加延迟： 避免触发模型限流或费用激增。/ li>


大模型接口调用的意义 ： 从 “会用” 到 “能封装” 

 痛点 :  很多团队只会“一键调用”。缺少统一错误处理、日志埋点还有返回格式校验，使得后期维护成本飙升。下面列出工程化要点：



/ li> 用角色设定控制回答风格；/ li> 用示例固定输出结构；/ li> 将自然语言包装为机器可解析的数据；/ li> 把所有细节隐藏在类似 getCompletions  的统一入口里。其实，/ li>