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

js数据库多级分类按树形结构打印

可以使用 JavaScript 来按层级打印 categories 数组。首先,需要将这个数组转换成一个树形结构,然后再进行递归或者迭代来打印每个层级的内容。

以下是一个示例代码,用来实现这个功能:

const categories = [{ id: 2, name: "手机", parent: 1 },{ id: 6, name: "电脑", parent: 1 },{ id: 3, name: "苹果", parent: 2 },{ id: 4, name: "小米", parent: 2 },{ id: 5, name: "华为", parent: 2 },{ id: 7, name: "笔记本", parent: 6 },{ id: 8, name: "台式机", parent: 6 },{ id: 11, name: "衬衫", parent: 10 },{ id: 12, name: "裤子", parent: 10 },{ id: 1, name: "电子产品", parent: 0 },{ id: 9, name: "服装", parent: 0 },{ id: 13, name: "女装", parent: 9 },{ id: 10, name: "男装", parent: 9 },{ id: 14, name: "裙子", parent: 13 },{ id: 15, name: "上衣", parent: 13 },{ id: 16, name: "萝莉", parent: 13 },{ id: 17, name: "御姐", parent: 13 },
];// 将数组转换为树形结构
function buildTree(categories, parent = 0) {let node = {};categories.filter(item => item.parent === parent).forEach(item => {node[item.id] = {id: item.id,name: item.name,children: buildTree(categories, item.id)};});return node;
}// 递归打印树形结构
function printTree(tree, level = 0) {Object.values(tree).forEach(node => {console.log("  ".repeat(level) + node.name);if (node.children) {printTree(node.children, level + 1);}});
}// 构建树
const tree = buildTree(categories);// 打印树形结构
printTree(tree);

这段代码首先定义了 buildTree 函数,它会根据 categories 数组构建一个树形结构。然后定义了 printTree 函数来递归打印这个树形结构,每一层使用两个空格缩进来表示层级关系。

你可以将这段代码复制粘贴到你的 JavaScript 环境中执行,就可以看到按层级打印出的结果了。

http://www.lryc.cn/news/392490.html

相关文章:

  • centos下编译安装redis最新稳定版
  • 如何让自动化测试更加灵活简洁?
  • linux 下载依赖慢和访问github代码慢
  • 奥比中光astra_pro相机使用记录
  • 【MindSpore学习打卡】应用实践-计算机视觉-深入解析 Vision Transformer(ViT):从原理到实践
  • Debezium系列之:支持在一个数据库connector采集中过滤某些表的删除事件
  • SQL Server端口配置指南:最佳实践与技巧
  • FastGPT 报错:undefined 该令牌无权使用模型:gpt-3.5-turbo (request id: xxx)
  • springboot系列八: springboot静态资源访问,Rest风格请求处理, 接收参数相关注解
  • # 职场生活之道:善于团结
  • go sync包(五) WaitGroup
  • 基于深度学习的相机内参标定
  • 适合金融行业的国产传输软件应该是怎样的?
  • 昇思25天学习打卡营第9天|MindSpore使用静态图加速(基于context的开启方式)
  • class类和style内联样式的绑定
  • 3033.力扣每日一题7/5 Java
  • GPT-5:下一代AI如何彻底改变我们的未来
  • 重载一元运算符
  • 10元 DIY 一个柔性灯丝氛围灯
  • 表单自定义组件 - 可选择卡片SelectCard
  • Ubuntu / Debian安装FTP服务
  • 若依 Vue 前端分离 3.8.8 版中生成的前端代码中关于下拉框只有下拉箭头的问题
  • C++把一个类封装成动态链接库
  • 每天一个项目管理概念之项目章程
  • c++11新特性-4-返回类型后置
  • Linux-C语言实现一个进度条小项目
  • vue使用glide.js实现轮播图(可直接复制使用)
  • TK养号工具开发会用上的源代码科普!
  • 信创-办公软件应用工程师认证
  • 数组操作forEach和map