当前位置: 首页 > news >正文

[面试] 手写题-数组转树

示例数据:

const arr = [{ id: 1, parentId: null, name: 'Root' },{ id: 2, parentId: 1, name: 'Child 1' },{ id: 3, parentId: 1, name: 'Child 2' },{ id: 4, parentId: 2, name: 'Grandchild 1' },
]

目标生成:

const tree = [{id: 1,name: 'Root',children: [{id: 2,name: 'Child 1',children: [{ id: 4, name: 'Grandchild 1', children: [] }],},{id: 3,name: 'Child 2',children: [],},],},
]

递归

function arrayToTree(arr, pid) {let res = [];arr.forEach((item) => {// parentId 等于null即为根节点if (item.parentId === pid) {// 递归查找当前节点的所有子节点const children = arrayToTree(arr, item.id);item.children = children;res.push(item);}});return res;
}let result = arrayToTree(arr, null)
console.log(result);

时间复杂度较高O(n^2)

Map

时间复杂度O(n)

function arrayToTree(arr) {const map = new Map();// 使用Map,查找父节点时间复杂度为O(1)const res = []; // 返回根节点数组// 第一次遍历:将所有节点存入Map(id作为键,节点对象作为值)for (const item of arr) {map.set(item.id, item);// 注意:这里存储的是原始对象的引用}// 第二次遍历:构建树结构for (const item of arr) {if (item.parentId=== null) { // 根节点res.push(item);} else { // 有父节点,// 查找当前节点的父节点const parent = map.get(item.parentId);if (!parent.children) {parent.children = [];}// 将当前节点添加到父节点的children数组parent.children.push(item);}}return res; 
}

避免修改原始数据的一版本

// 此版本通过创建节点副本避免修改原始数据,
function arrayToTree(arr) {const map = new Map();const res = [];// 第一步:创建所有节点的副本(含children属性)for (const item of arr) {// 使用展开运算符{...item}创建浅拷贝,避免直接修改原始数据map.set(item.id, { ...item, children: [] });}// 第二步:构建树结构for (const item of arr) {// 从Map获取当前节点对应的副本,注意:这里使用副本节点而非原始数据const node = map.get(item.id); if (item.parentId === null) { // 根节点res.push(node);} else {// 获取父节点副本const parent = map.get(item.parentId);// 将当前节点添加到父节点的children数组parent.children.push(node); }}  return res;
}

参考:

大厂JS笔试__数组与树互转

高频面试题:树结果转为数组,数组转为树(详细解答,性能提升之王)

大厂JS笔试__数组与树互转

相关文章:

  • CNN, RNN, LSTM
  • AI智能体|扣子(Coze)搭建【沉浸式历史故事解说视频】工作流
  • 【unity游戏开发——网络】IP和端口相关的类——IPAddress和IPEndPoint
  • Java 中通信接口
  • [Linux] PXE
  • 各种常用的串口助手工具分享
  • Python爬虫-爬取汽车之家全部汽车品牌及车型数据
  • 【系统分析师】高分论文:论软件测试方法和工具的选择
  • 量子算法入门——5.Qiskit库介绍与简单应用(2)
  • React与Vue的主要区别
  • 数据结构复习4
  • AWTK-MVVM的一些使用技巧总结(1)
  • 爪形行列式
  • 建造者模式 - Flutter中的乐高大师,优雅组装复杂UI组件!
  • 前后端分离场景下的用户登录玩法Sa-token框架使用
  • 【系统分析师】2021年真题:论文及解题思路
  • XWPFDocument导出word文件
  • 计算机组成原理与体系结构-实验四 微程序控制器 (Proteus 8.15)
  • day46/60
  • Java垃圾收集机制Test