js无限层级，递归遍历

来源数据结构

const productInfoList = [{productId: 2,productName: '2',parentId: 1
},{productId: 1,productName: '1',parentId: ''
},{productId: 3,productName: '3',parentId: 2
},{productId: 4,productName: '4',parentId: ''
}]
// ...无限层级，父子乱序

目标期望数据结构

const target = [{label: '1',id: 1,children: [{label: '2',id: 2,children: [{label: '3',id: 3,children: []}]}]
},{label: '4',id: 4,children: []
}]

业务逻辑

const infinite = (id, target = this.product.menu, source = productInfoList) => {for (const i in source) {if (source[i].parentId === id) {target.push({label: source[i].productName,id: source[i].productId,children: []})infinite(source[i].productId, target[target.length - 1].children)}}
}
infinite('') // 已知根节点id为 ''

// 无限层级，乱序数组，未知根节点

const source = [{productId: 2,name: '2',parentId: 1
}, {productId: 1,name: '1',parentId: 99
}, {productId: 4,name: '4',parentId: ''
}, {productId: 6,name: '6',parentId: 1
}, {productId: 3,name: '3',parentId: 1
}, {productId: 7,name: '7',parentId: 2
}, {productId: 8,name: '8',parentId: 66
}, {productId: 5,name: '5',parentId: 4
}]const infiniteLevel = {init(source, formate) {this.target = [] // 用于临时存储结果this.source = source // 用户来源集合this.formateSub = formate || function() {} // 用户自定义格式化内容for (const index in this.source) {this.infinite(this.source[index], index) // 开始无限递归遍历，index参数用于判断是init执行的infinite还是自己递归执行的}return this.setResult() // 返回最终结果},formate(item) { // 用于格式化每一项，根据项目实际需求设置const sub = this.formateSub(item)return Object.assign({label: item.name,id: item.id,pid: item.pid,level: item.level || 0,children: item.children || []}, sub)},infinite(item, index) {const result = this.formate(item)if (index === undefined) result.level ++ // index用于判断level，如果有index就证明是第一次开始计算层级，如果是undefined就是递归来的叠加层级。let isParent = nullconst children = []this.source.forEach(s => {const formateS = this.formate(s)if (formateS.id === result.pid) isParent = s // 判断每一项的父级是否存在，由于来源中的id可能不存在，要先进行格式化。if (formateS.pid === result.pid) children.push(formateS) // 找到所有的同级})if (isParent) { // 如果父级存在继续递归向上寻找祖父级直至根级isParent.children = children // 将刚刚获取到的所有子集放入该父级节点下isParent.level = result.level // 新增level属性，用于判断该父级存在几级子节点，用于最后找到包含层级最多的父级，也就是根级。this.infinite(isParent)} else {this.target.push(result)}},setResult() {const result = []this.target.sort((a, b) => {return b.level - a.level}).forEach(e => {if (!result.some(r => r.id === e.id) && !isNaN(e.level)){result.push(e)}})return result}
}console.log(infiniteLevel.init(source, (item) => {return {id: item.productId,pid: item.parentId}
}))

js无限层级，递归遍历相关推荐

Java中的无限层级递归树前后端操作解决方案
引言: 抖音真是一个神奇的软件,前两天脑海中浮现了一首歌,知道歌曲的调调,今天打算写博客之前刷了一下抖音,抖音的推荐算法居然给我推送了这首歌,这首歌叫做<一开始说陪你到老的人现在他还好吗> ...
php 递归递实现无限层级
项目场景 php递归递实现无限层级: 项目场景:示例:网站栏目,商品分类 @Override//递归查找子级栏目实现无限层级public function getTree($data, $pId){ ...
JS自上而下递归遍历计算树结构节点数值和
//自上而下进行数量累计计算function updateTreeDataAdd(treeData,fieldName){for(var i=0;i<treeData.length;i++){/ ...
js 递归遍历查找对象数组的某一个属性
方法一: /*** @description: 递归遍历查找数组对象的某个值* @param {string} code* @param {array} arr* @returns {object}* ...
php无限极递归概念,php无限极分类递归与普通
1. 递归 public function getInfo(){ $data=$this->select(); $arr=$this->noLimit($data,$f_id=0,$lev ...
easyUI-树形菜单(ComboTree) 无限层级树实现方式（1.0版本）
对于easyUI实现一个树,是一件很简单的事情,实现形式很多.这里作者将实现,通过数据库获取数据,再将数据通过递归形式装成无限层级json数据,到达无限成级的树结构.需要用到的json插件建附件,希望 ...
二叉树非递归遍历的经典求解
#include <stdio.h> #include <stdlib.h> typedef int datatype; typedef struct node {dataty ...
小程序无限层级路由方案
作者:大转转FE-吴鹏和小程序原生页面存在层级限制,超过一定层数就会无法打开新页面.一开始这个限制为不超过5层,目前是不超过10层. 这个限制对于体量较大的小程序来说,挺难受的.特别是只能打开5层那 ...
php怎么用递归函数遍历多维数组,php递归遍历多维数组的方法
php递归遍历多维数组的方法本文实例讲述了php递归遍历多维数组的方法.分享给大家供大家参考.具体如下: function get_array_elems($arrResult, $where=&q ...

js无限层级，递归遍历

js无限层级，递归遍历相关推荐

最新文章

热门文章

js无限层级， 递归遍历

js无限层级， 递归遍历相关推荐

最新文章

热门文章

js无限层级，递归遍历

js无限层级，递归遍历相关推荐