为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第15天 解决问题(4)

【九月打卡】第15天 解决问题(4)

2022.09.19 23:52 29浏览

课程名称2周刷完100道前端优质面试真题
课程章节:第9章 前端面试技能拼图7 :分析和解决问题的思路 - 可以独立解决问题
主讲老师双越
课程内容
今天学习的内容包括:
9-5 -把一个数组转换为树(11:26)
9-6 -【连环问】把一个树转换为数组
这一章主要是讲分析解决问题,避免踩坑。

课程收获
这两节主要是树和数组的相互转换。

  • 数组转树

课程提供的方法对应数组本身已按 parentId 排序后的方法。
思路:

  • 用 map 存储 id 和 子树之间的关系。由于已按 parentId 排序,故当前节点一定可在 map 找到父节点。
  • 遍历数组,依次把当前节点存入 map,把当前节点放入父节点 children, 判断当前节点是否为根节点。
      const arr2Tree = (arr) => {
        let root = null;
        const map = new Map();
        arr.forEach((ele) => {
          const { id, name, parentId } = ele;
          const node = {
            id,
            name,
          };
          map.set(id, node);
          const pNode = map.get(parentId);
          if (pNode) {
            pNode.children
              ? pNode.children.push(node)
              : (pNode.children = [node]);
          }
          if (parentId === 0) {
            root = node;
          }
        });
        return root;
      };
      const arr = [
        { id: 1, name: "部门A", parentId: 0 }, // 0 代表顶级节点,无父节点
        { id: 2, name: "部门B", parentId: 1 },
        { id: 3, name: "部门C", parentId: 1 },
        { id: 4, name: "部门D", parentId: 2 },
        { id: 5, name: "部门E", parentId: 2 },
        { id: 6, name: "部门F", parentId: 3 },
      ];
      const tree = arr2Tree(arr);
      console.info(tree);
  • 树转数组

课程提供的思路为以map存储当前节点和父节点的映射。
广度优先遍历树结构,用队列把当前节点和子节点一层层入队。子节点入队时存储与父节点的关系。

      const tree2Arr = (root) => {
        if (!root) return [];
        const map = new Map();
        let arr = [];
        let queue = [root];
        while(queue.length > 0) {
          const node = queue.shift();
          if (!node) {
            break;
          }
          const { id, name, children = [] } = node;
          const pNode = map.get(node);
          const parentId = pNode?.id || 0;
          arr.push({
            id,
            name,
            parentId,
          })
          if (children.length) {
            children.forEach(ele => {
              map.set(ele, node);
            });
            queue = queue.concat(children);
          }
        }
        return arr;
      }
      const arrRes = tree2Arr(JSON.parse(JSON.stringify(tree)));
      console.info(arrRes);

以上结束。

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
学生
手记
粉丝
15
获赞与收藏
378

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

145篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消