js中列表与树形结构之间的转换及常见操作

首先准备一个树状结构

const tree = [
        {
          id: 1,
          name: "手机",
          level: 1, // 层级
          isLeaf: false, //是否为叶子节点
          children: [
            {
              id: 11,
              name: "智能手机",
              level: 2,
              children: [
                {
                  id: 111,
                  name: "小米",
                  level: 3,
                  isLeaf: true,
                },
                {
                  id: 112,
                  name: "华为",
                  level: 3,
                  isLeaf: true,
                },
                {
                  id: 111,
                  name: "苹果",
                  level: 3,
                  isLeaf: true,
                },
              ], // 层级
              isLeaf: false,
            },
            {
              id: 12,
              name: "功能手机",
              level: 2, // 层级
              isLeaf: true, //是否为叶子节点
            },
          ], // 子节点
        },
        {
          id: 2,
          name: "家电",
          level: 1,
          children: [
            {
              id: 21,
              name: "冰箱",
              level: 2,
              isLeaf: true,
            },
            {
              id: 22,
              name: "空调",
              level: 2,
              isLeaf: true,
            },
            {
              id: 23,
              name: "电视机",
              level: 2,
              isLeaf: true,
            },
          ],
          isLeaf: false,
        },
        {
          id: 3,
          name: "服装",
          level: 1,
          isLeaf: true,
        },
      ];

 

1 、树状对象转化为列表

function treeToList(tree, result = [], parent = null) {
            tree.forEach(node => {
                node.parent = parent
                result.push(node)
                if (node.children && node.children.length > 0) {
                    treeToList(node.children, result, node.id)
                    delete node.children
                }
            })
            return result
        }
        // console.log(treeToList(tree))

2、列表转树状结构

// 列表转树状结构
      function listToTree(list) {
        // 把原数组转换为 hashMap
        let map = list.reduce((prev, item) => {
          return (prev[item.id] = item), prev;
        }, {});
        // console.log(map)
        list.forEach((item) => {
          if (item.parent) {
            map[item.parent].children
              ? map[item.parent].children.push(item)
              : (map[item.parent].children = [item]);
          }
        });
        return list.filter((v) => {
          return !v.parent;
        });
      }
      // console.log(listToTree(treeToList(tree)))

 3、若无层级添加层级

function addLevel(tree, level = 0) {
  const levelTree = tree.map((item) => {
    item.level = level
    if (item.children&&item.children.length>0) {
      treeToArr(item.children,level+1)
    }
  })
    return levelTree
}

4、查询树状数据节点

function findTree(tree, callback) {
        let result = null;
        tree.some((node) => {
          if (callback(node)) {
            result = node;
            return result;
          }
          if (node.children && node.children.length > 0) {
            result = findTree(node.children, callback);
            return result;
          }
        });
        return result;
      }

      // console.log(findTree(tree, (node) => {
      //     return node.id == 12
      // }))

5、对树状结构进行筛选， 筛选结果 仍然返回树状结构

function treeFilter(tree, cb) {
        //  原树进行拷贝
        return tree.map((node) => ({
            ...node,
          }))
          .filter((node) => {
            return (
              cb(node) ||
              (node.children && treeFilter(node.children, cb).length > 0)
            );
          });
      }
      //console.log(treeFilter(tree, (node) => node.name === "空调"));