JS 多层的数组(树形结构)标记每层层级

项目中用到区域是数形结构数组,需标记每层层级。从网上没有找到合适的解法,于是自己试出一个认为不错的办法。其实很简单,只在遍历数组的入参里增加一个层级参数,后面每深入一层则层级增加一级。如下代码:

function arrayFlagLevel(array, level) {
    if (!array || !array.length) return;
    array.forEach(item => {
       item.level = level;
       if (item.children && item.children.length) {
           arrayFlagLevel(item.children, level + 1);
       }
    })
};

arrayFlagLevel(data, 0);
只需记住,给个标记层级的入参,每次深入遍历子集层级入参增加一级,就这么简单。
/** 更新 - - 增加一个demo start **/
let array = [{name:'广东',code:'001',children: [{name: '广州',code: '001001', children: [{name: '白云区',code: '001001002', children: [{name: '建设路店',code: '001001002002'}]}]}]},{name: '广西',code: '002',children: [{name: '北海',code: '002002'}]},{name: '福建',code: '003'}]

把数组array传入函数arrayFlagLevel(array, 0)后打印截图如下:
截图1:
在这里插入图片描述
截图2:
在这里插入图片描述

不清楚某些网友干啥同级里level增加,我自己用的都不会,只会每下一级增加1

/** 更新 - - 增加一个demo end **/
  • 16
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
JavaScript中,将一个数组转换为多层树形结构可以通过递归和遍历来实现。以下是一个基本的实现思路: 1. 定义一个函数,接收一个数组作为参数,返回一个多层树形结构的对象。 2. 创建一个空对象,用于存储树的结构。 3. 遍历数组,对于每个元素,判断其是否有父节点。如果有父节点,则将当前元素添加到父节点的children属性中,同时将当前元素作为子节点的父节点。 4. 如果没有父节点,则将当前元素作为根节点添加到树的结构中。 5. 通过递归调用函数,将子节点作为参数传递给函数,继续构建子节点的子节点,直到没有子节点为止。 6. 返回构建好的多层树形结构对象。 下面是一个简单的示例代码: ``` function arrayToTree(arr) { let tree = {}; // 存储树的结构 // 递归构建树的函数 function buildTree(nodes, parentId) { let result = []; for (let i = 0; i < nodes.length; i++) { if (nodes[i].parentId === parentId) { // 判断当前节点的父ID是否匹配 let node = Object.assign({}, nodes[i]); // 复制当前节点 node.children = buildTree(nodes, node.id); // 构建当前节点的子节点 result.push(node); } } return result; } tree = buildTree(arr, null); // 构建多层树形结构 return tree; } // 测试 let arr = [ { id: 1, parentId: null, name: 'A' }, { id: 2, parentId: 1, name: 'B' }, { id: 3, parentId: 1, name: 'C' }, { id: 4, parentId: 2, name: 'D' }, { id: 5, parentId: 2, name: 'E' } ]; console.log(arrayToTree(arr)); ``` 以上代码会将数组`arr`转换为以下多层树形结构对象: ``` { id: 1, parentId: null, name: 'A', children: [ { id: 2, parentId: 1, name: 'B', children: [ { id: 4, parentId: 2, name: 'D', children: [] }, { id: 5, parentId: 2, name: 'E', children: [] } ] }, { id: 3, parentId: 1, name: 'C', children: [] } ] } ``` 注意:以上示例代码仅演示了基本的思路和过程,实际情况下可能需要根据具体的业务需求进行适当的修改和调整。
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值