js 一维数组转成多维数组(菜单列表生成菜单树)

vue中将一维数组数据转换为树形结构数据 getTreeData(id) { var self = this; data = [{ id: "3", name: "二级目录0", lv: "1", catalogs: [], fid: "0" },{ id: "8", name: "二级目录1", lv: "2", catal... 阅读详情

例子:列表里面有id、p_id进行做关联,可能是嵌套的嵌套.....如何实现?

let arr = [
    {
        id: 1,
        p_id: 0,
        name: '首页'
    },
    {
        id: 2,
        p_id: 0,
        name: '菜单管理'
    },
    {
        id: 3,
        p_id: 0,
        name: '菜单列表'
    },
    {
        id: 4,
        p_id: 1,
        name: '权限管理'
    },
    {
        id: 5,
        p_id: 6,
        name: '管理员列表'
    },
    {
        id: 6,
        p_id: 4,
        name: '角色列表'
    },
];
let treeData = [];


// 过滤一级菜单
let tmpArr = arr.filter(item => {
    if (item.p_id === 0) {
        treeData.push(item);
    } else {
        return item;
    }
});

console.log(treeData);
console.log(tmpArr);


const test = (routes, item, i) => {
    console.log('---test---');
    routes.forEach(routesItem => {
      if (routesItem.id === item.p_id) {
        if ('routes' in routesItem) {
          routesItem.routes.push(item);
        } else {
          routesItem.routes = [];
          routesItem.routes.push(item);
        }
        tmpArr.splice(i, 1); // 将使后面的元素依次前移,数组长度减1
     i--; // 如果不减,将漏掉一个元素
      } else {
        if ('routes' in routesItem && routesItem.routes) {
          test(routesItem.routes, item);
        }
      }
    });
}

while (tmpArr.length) {
    for (let i = 0; i < tmpArr.length; i++) {
        let tmpArrItem = tmpArr[i];
        treeData.forEach(treeDataItem => {
            if (tmpArrItem.p_id === treeDataItem.id) {
                console.log("---二级菜单---");
                if ('routes' in treeDataItem) {
                    treeDataItem.routes.push(tmpArrItem)
                } else {
                    treeDataItem.routes = []
                    treeDataItem.routes.push(tmpArrItem)
                }
                tmpArr.splice(i, 1); // 将使后面的元素依次前移,数组长度减1
             i--; // 如果不减,将漏掉一个元素
            } else {
                if ('routes' in treeDataItem) {
                    test(treeDataItem.routes, tmpArrItem, i);
                }
            }
        });
    }
}
console.log(tmpArr);
console.log(JSON.stringify(treeData));

实现大概思路:

1.我是先把数据进行过滤,看看谁是一级菜单,把不是一级菜单的数据保存起来(如tmpArr)

2.死循环(tmpArr),直到它为空 --- 所以判断到合格的数据就要进行删除tmpArr数组操作

3.循环tmpArr 跟一级菜单对比 id,p_id 是否一致,不一致判断一级菜单是否有嵌套菜单(递归操作) ---- 因为要删除数组所以要使用for循环(你使用别的也可以)

....

js多维数组转一维数组 js基础代码实现 立即下载

相关推荐

WPS接入DeepSeek,实现AI辅助功能

总的来说,借助 WPS 中宏功能与 DeepSeek 大模型的结合,文档处理、内容创作和数据分析等任务都能更加智能化、自动化。这不仅大幅提升了工作效率,也为办公场景带来了全新的智能化办公体验。

运维老生常谈 3805

js一维数组处理成多维数组

let replies = [ { id: 1, content: '1. 真理惟一可靠的标准就是永远自相符合', parent: 0 }, { id: 2, content: '2. 我需要三件东西:爱情友谊和图书', parent: 0 }, { id: 3, content: '2-1 时间是一切财富中最宝贵的财富', parent: 2 }, { i...

weixin_41009649的博客 2224

ros1 Noetic下运行cartographer算法进行2d建图

最近的工作重点放在机器狗的二次开发上,项目的需求是要升级机器狗的slam算法和导航避障算法,slam拟采用激光与视觉融合算法,激光slam就使用最为流行和实用的cartoghper算法。在这过程中遇到好多坑,希望看到这篇博客的人能少走弯路吧。我用的仿真机器人是wpr_simiulation。首先复制一份demo_revo_lds.launch文件和revo_lds.lua文件,修改成下面的样子。my_test.lua文件,base_link就是机器人的坐标系。下载与安装的博客有很多,我推荐。

sun5739的博客 1547

js 一维数组转成多维数组 根据pid 生成菜单树

一维数组转成多维数组 根据pid对应关系 生成菜单树。

~~~~~ 920

告别QXDM:在Android Studio中调试与验证高通NV读写功能的完整流程

本文详细介绍了在Android Studio中调试与验证高通NV分区读写功能的完整流程,替代传统的QXDM工具。通过JNI接口层、HAL服务层和Diag通信层的架构设计,开发者可以在熟悉的IDE环境中高效完成NV操作,包括环境配置、错误处理和性能优化等关键实践。

weixin_27013291的博客 261

STM32--基于STM32F103C8T6的OV7670摄像头显示

使用 STM32F103C8T6 微控制器驱动 OV7670 摄像头模组,并将图像数据显示在屏幕上,是嵌入式系统中常见的图像采集与显示应用。OV7670 是一款 CMOS VGA 图像传感器,具有高灵敏度、低电压等特点,适用于嵌入式应用。而 STM32F103C8T6 是一款常用的 MCU 控制器,具有丰富的管脚资源和较高的工作频率。

duierrorshuobu的博客 2145

根据函数形参的值,把一维数组转为多维数组

根据函数形参的值,把原有数组进行固定拆分,合并到新的数组上。 大家好,这篇文章是我加入优快云将近两年来,第一篇文章,讲述的是一个朋友的小demo,感谢收看。 问题要求如下: ps:最终效果为 [ [ arr1 ] , [ arr2 ] …] 刚开始可能觉得这是一个小demo,略看了一眼,写成了这样 执行效果: -_-|| 然后就被杠了,重新审题,重新写 思路:使用数组的splice方法,进行拆分数组,把所有拆分出来的数组添加到一个新的数组里,并且把剩下小于参数变量值的元素进行判断,成立时也添加到新的

SYXZSs的博客 664

海康威视 2DC 系列球机手机直连实用教程

海康威视2DC系列球机手机直连教程:首先确认设备支持直连功能并下载官方"海康互联"App;通过网线连接球机与路由器,使用SADP软件调整IP至同一网段;在App中添加设备并激活,完成调试即可远程查看监控画面。常见问题包括部分型号需远程解锁、网络连接异常等,可通过检查网络环境、联系客服等方式解决。本教程提供从准备到连接的完整指引,助您轻松实现手机监控管理。

海康威视技术支持 5405

js中,实现一堆的一维数组转成多维数组,如地区

很多时候,跟后端接口开发对接时,因为需求的关系,需要前端地区数据跟后端的数据要一一对应,所以一般来说前端应该是直接拿后端的地区数据,然后再来操作一下地区数据变成我们自己可以用的,有种情况,后台给到我们的是一堆一维数组,而我们需要的是多维数据,这时候就要操作数据了 直接上代码(使用的是vue): 下面的代码改成自己的就可以了,一般修改location_id, pid, childs, location_id为父级ID,pid为子级ID,当pid==location_id时,pid所在的数组就会放在父级下变成子

u010613970的博客 3151

果蔬及菜品识别系统

果蔬及菜品识别系统

我的博客 2117

【视线追踪】视线追踪的性能评估框架 及 基础知识

文章目录一、 前言二、 眼球追踪基础1. 眼动类型研究2. 基本设备3. 校准 calibration4. 眼球视线和头部姿态的关系5. 视线追踪精确度的评估三、 视线估计算法1. 基于2维回归2. 基于3D模型1) 单摄像头2) 多摄像头3. 基于交叉比4. 基于外观5. 基于眼睛形状的方法四、 实现估计的应用1. 电脑2. 电视3. 头戴设备4. 汽车5. 手持设备6. 设备配置五、 视线追踪的性能指标和错误原因1. 不同平台之间差异性很大2. 影响视线追踪可用性的因素六、 视线追踪系统的性能评估框架1

火火的博客 5310

一维数组和多维数组的转换

具体实现 <script> let arr = [ { id: "4", name: "wxj", pid: "2" }, { id: "5", name: "wxj", pid: "2" }, { id: "6", n

qq_42451776的博客 1368

X猫免费小说安卓逆向分析

七猫免费小说安卓逆向分析 难度(♥♥) 文章目录七猫免费小说安卓逆向分析 难度(♥♥)1. 查壳2. 抓包分析3. sign1. Frida-rpc2. Native函数分析快3点了. 睡觉~ 白天再继续写! 1. 查壳 我这边使用的是ApkTool, 拖进去显示未加壳。 2. 抓包分析 POST https://xiaoshuo.wtzw.com/api/v1/login/index HTTP/1.1 net-env: 1 channel: qm-cbcpa056_wm is-white: 0 platf

Qiled的博客 4367

js 一维数组转多维数组,多维数组转一维数组

js 数组 多维转一维 与 一维转多维

qq_42389674的博客 2002

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

js将数组转换成多维数组

js将数组转成路由格式数据

weixin_44089126的博客 586

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

用 js 实现一维数组转化为二维数组

在上述代码中,我们使用 flatMap 方法来遍历原始数组 arr。如果索引为奇数,则返回一个空数组。用 flatMap 方法来简化将数组 [160, 20, 179, 10, -170, -20] 转换为 [[160, 20], [179, 10], [-170, -20]] 的过程。使用 JavaScript 的循环和 slice 方法来将数组 [160, 20, 179, 10, -170, -20] 转化为 [[160, 20], [179, 10], [-170, -20]]。

虎康的博客 2971

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

一维数组变多维数组

1.双层filter过滤 第一层 item 定义为father newArr接收 第一层过滤出最顶层数组 判断 branchArr的长度 存在father.children=branchArr 否则为空 return father.pid === 0 第二层 item 定义为child branchArr接收 里层 判断pid是否存在(没有子集的pid为0) 存在返回 father ID...

sf1989424的博客 689

numpy教程:numpy基本数据类型及多维数组元素存取

http://blog.youkuaiyun.com/pipisorry/article/details/39215089NumPy介绍Numpy(读作num-pie)是Python中的一个矩阵计算包,功能类似于MATLAB的矩阵计算。标准安装的Python中用列表(list)保存一组值,可以用来当作数组使用,不过由于列表的元素可以是任何对象,因此列表中所保存的是对象的指针。这样为了保存一个简单的[1,2,3

皮皮blog 5万+

js 一维数组转换成二维、三维数组

需求:后台接口返回一个一维数组,前端需要转换成一个二维,或者三维数组进行级联展示 举个例子: 根据产品类型可以分为:智能手机、耳机、智能家电... 其中智能手机中又可以分为: Ace系列,Reno系列,Find系列.... 二维数组的展示: 就是除去了系列这一分类,把所有的智能手机都放在一起没有系列之分 后端返回数据: 前端需要的数据结构: request .get('url', { params, }) .th.

棠樾的博客 2226

JS一维数组转化为三维数组有这个方法就够了

一个方法搞定 js一维数组转化三维数组

商务合作欢迎私信我 4万+

js 递归实现,平级结构聚合成树形结构(一维数组转树形多维数组)

js 递归实现,平级结构聚合成树形结构(一维数组转树形多维数组) function formatData() { // data,元数据 var data = { col: 3, dataList: [ { 1: '总公司', level: 1, orgCode: null, id: 'ta1237Wh' }, { 1: '分公司', level: 1, orgCode: '10000001',

weixin_44406888的博客 1378

省市数组 JS处理成多维数组

打个比方,这种从后台来的数组 (400多个) [ { "id":378, "code":"1", "nameCn":"中国", "nameEn":"China", "nameTW":"中國", "type":1, "enable":true, "weatherParam":"110100",

u012174809的专栏 454

递归将一维数组转成多维数组

递归将一维数组转成多维数组

qq_45256497的博客 519

前端,js多维数组包含有children,转为一维数组

多级分类会有一种情况,前端返回的数据结构是树结构,数组里包含有children,但是我在添加的时候,vue里通过组件传值,就避免了再一次请求接口,直接将列表页的数组传入给子组件(好比添加,修改弹窗)。 这时候的下拉框,需要可以选择上级,就可以把得到的多维数组转为一维数组即可。 const data = [ { label: "一级 1", level: 1, children: [ { label: "二级 1-1", .

糜家智の博客 3196

JavaScript数组的扁平化处理(flat( )实现多维到一维)

多维数组可以看成数组中的数组,即数组中存储的类型为数组即是多维数组; 例如,在开发中遇到的嵌套的数据类型,数组里面有数组的那种,这个时候需要处理的话,或者查找某个值,相对就比较麻烦,当然也能实现,通过数组方法、循环、递归等,但比较麻烦,所以有没办办法把多维数组转成以为一维数组呢?还真有,哥们,哥们,看过来哥们。ES6方法,哥们,includes(),哥们,赶紧学起来,哥们。......

ct5211314的博客 434
上一篇: node-egg-4.菜单模块Api以及优化登录Api与登出Api
下一篇: node-egg-5.角色模块Api
An_s
博客等级 码龄10年 665粉丝 363原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

An_s

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值