首页 > 其他分享 >js实现树形结构

js实现树形结构

时间:2023-12-01 18:23:42浏览次数:45  
标签:name cityList js item 树形 parentId id treeArr 结构

let cityList = [
{id: 1, parentId: 0, name:'江苏省'},
{id: 2, parentId: 0, name:'广东省'},
{id: 3, parentId: 0, name:'安徽省'},
{id: 4, parentId: 1, name:'苏州市'},
{id: 5, parentId: 1, name:'无锡市'},
{id: 6, parentId: 1, name:'南京市'},
{id: 7, parentId: 2, name:'广州市'},
{id: 8, parentId: 2, name:'深圳市'},
{id: 9, parentId: 3, name:'合肥市'},
{id: 10, parentId: 4, name:'工业园区'},
{id: 11, parentId: 4, name:'吴中区'},
{id: 12, parentId: 4, name:'姑苏区'},
{id: 13, parentId: 9, name:'肥东区'},
{id: 14, parentId: 9, name:'肥西区'},
{id: 15, parentId: 6, name:'江宁区'},
{id: 16, parentId: 6, name:'玄武区'}
];
let treeArr = [];
cityList.forEach(item => {
if(item.parentId === 0){
treeArr.push(item);
}
// 每一项都添加一个children
item.children = cityList.filter(child => child.parentId === item.id);
});
console.log(treeArr);

标签:name,cityList,js,item,树形,parentId,id,treeArr,结构
From: https://www.cnblogs.com/wstmljf/p/17870666.html

相关文章

  • 如何快速实现XML与JSON转换
    XML与JSON之间的转换常常用于以下场景:1.数据交换:当需要在不同的系统、平台或服务之间进行数据交换时,常常会使用XML或JSON进行数据的序列化和反序列化。比如,一个Web服务可能需要返回数据给一个移动应用,这时,数据就可以通过XML或JSON格式进行传输。2.数据存储:XML和JSON都常用于数据......
  • 关于Vue3中调试APP触发异常:exception:white screen cause create instanceContext fai
    bug:reportJSException>>>>exceptionfunction:createInstanceContext,exception:whitescreencausecreateinstanceContextfailed,checkjsstack->atuseStore(app-service.js:2309:15)问题在于:使用了pinia,并且在所有js文件或ts文件中调用超前,导致的加载错误 解决方......
  • JS赋值、浅拷贝、深拷贝的区别
    在说明它们的区别之前,首先需要了解JS的数据类型和它们的存放位置。  数据类型基本数据类型:String、Number、Boolean、Undefined、Null、Symbol(es6)、BigInt(es6)引用数据类型:Object  存放位置基本数据类型是存放在栈中的数据段,直接存储的就是值本体。引用数据类型是存......
  • 一文带你掌握C语言的循环结构
    C语言循环结构详解在C语言中,循环结构是一种重要的控制结构,它允许我们重复执行一段代码,以达到特定的目的。循环结构可以帮助我们简化重复性的任务,提高代码的效率。本篇文章将深入探讨C语言中的循环结构,包括while循环、for循环、do-while循环以及循环中的控制语句。1.while......
  • js 现在时间到当天24时结束
    获取到时间差为毫秒,可以转为时分秒,自行处理,getTimestamp(){letnowB=newDate().getTime()letform=newDate()lety=form.getFullYear();letm=form.getMonth()+1;letd=form.getDate();letnowE=newDate(y,m,d,"23","59","59"......
  • 软考架构师(1)——计算机组成与体系结构
    一:计算机系统概述1:计算机发展历程2:结构(1)冯诺依曼机:由运算器,控制器,存储器,输入,输出五部分组成,以运算器为中心(2)计算机层次结构:应用程序-高级语言-汇编语言-操作系统-指令集架构层-微代码层-硬件逻辑层3:分类单指令单数据流:冯诺依曼体系结构单指令多数据流:向量处理器多指令单......
  • js vue中pdf与img互转
    需要npminstallvue-pdf和npminstallpdfjs-dist,新建js文件pdtToImg.js:importpdffrom"vue-pdf";importJsPDFfrom'pdfjs-dist';constPDFJS=require('pdfjs-dist/build/pdf.js');//import会报错window.pdfjsWorker=require('......
  • js 浏览器储存数据设置过期时间
    vue项目---新建文件sessionTime.js文件/**@descstorage相关*///typeTStorageItem={//value:any//expire:string|number//time:Date//};//type='localStorage'|'sessionStorage'/***@desc设置storage*@paramkey键*@pa......
  • 关于解决vue报错"Problems loading reference 'https://schemastore.azurewebsites.ne
    打开setting时会看到有一条三角形的警告信息 看问题描述:无法从该网站加载解决方法:打开设置,找到扩展下的json项 设置之后可以在settings.json文件中看到新增加一项 "json.schemaDownload.enable":false可以直接在界面上设置: "json.schemaDownload.enable":false......
  • JS逆向——某道翻译
    文章中所有内容仅供学习交流,不可用于任何商业用途和非法用途,如有侵权,请联系作者立即删除!目标网站:aHR0cHM6Ly9mYW55aS55b3VkYW8uY29tL2luZGV4Lmh0bWwjLw==一、定位接口使用Chrome浏览器,打开Network进行抓包输入要翻译的字符串:HelloWorld!页面没有重新加载,初步判断是Ajax......