js 树级数组扁平化和扁平化数组整理成树级

1.扁平化数组整理为树级,主要实现方法,过滤出没有父级标识(parentId)的作为列表的第一层,有父级标识的项放在其父级的children下面,也跟数组是引用类型的有很大关系

父级标识为falsy或者 父级为某个特定值(topValue)时,该项就在树级的顶级

最后一层会加上 isLeaf: true 的标识

function list2Tree(list, key = "id", parentKey = "parentId", topId="0") {
 return list.filter((item, index, arr) => {
    if (!item[parentKey] || item[parentKey] === topId) {
      return true
    } else {
      const parent = arr.find(data => data[key] === item[parentKey])
      item.isLeaf = !arr.some(data => data[parentKey] === item[key]) // 最后一级
      if (parent) {
        parent.children = parent.children || []
        parent.children.push(item)
      }
    }
  })
}

 

2. 树级数组扁平化,主要技术点:reduce方法累计已遍历到的项、递归遍历下级数组

function tree2List(tree) {
  return tree.reduce((preResult, item, index, arr) => {
    const { children, ...data } = item;
    return preResult.concat(
      data,
      children && children.length ? tree2List(children) : []
    );
  }, []);
}

 

posted @ 2023-06-08 18:37  blackbentel  阅读(337)  评论(0编辑  收藏  举报