JS一维数组转多维数组树的方法

 更新时间:2024年06月21日 08:29:07   作者:阿虎儿  
这篇文章主要介绍了JS一维数组转多维数组树的方法,文章通过代码示例给大家讲解的非常详细, 对大家的学习或工作有一定的帮助,需要的朋友可以参考下

一维数组转树结构数组方法

1. 方法

/**
 * 将一维数组转换为树结构
 * @param {Array} data - 输入的一维数组
 * @return {Array} 树结构数组
 */
function arrayToTree(data) {
    // 创建一个id映射,用来快速查找元素
    const idMap = {};
    // 遍历数组,初始化每个元素的children字段,并将其存入idMap
    data.forEach(item => {
        idMap[item.id] = { ...item, children: [] };
    });

    // 初始化一个数组,用来存储根节点
    const tree = [];

    // 再次遍历数组,根据parentId建立树结构
    data.forEach(item => {
        const { id, parentId } = item;
        if (parentId == '' || parentId == null || parentId == undefined) {
            // 如果parentId为null或undefined,表示是根节点
            tree.push(idMap[id]);
        } else {
            // 否则,将当前元素添加到其父元素的children字段中
            if (idMap[parentId]) {
                idMap[parentId].children.push(idMap[id]);
            }
        }
    });

    return tree;
}

使用注意

  • 根元素parentId的判定条件
  • 元素的唯一字段是id和父级字段是parentId

2.数组结构data

let data = [
    { id: '1', parentId: '' },
    { id: '1_1', parentId: '1' },
    { id: '2', parentId: '' }
];

3.调用

let tree = arrayToTree(data);

打印结果

[
    {
        "id": "1",
        "parentId": "",
        "children": [
            {
                "id": "1_1",
                "parentId": "1",
                "children": []
            }
        ]
    },
    {
        "id": "2",
        "parentId": "",
        "children": []
    }
]

到此这篇关于JS一维数组转多维数组树的方法的文章就介绍到这了,更多相关JS一维转多维数组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS记录用户登录次数实现代码

    JS记录用户登录次数实现代码

    当登录次数达到三次,就自动调用函数,隐藏弹出框。下面是具体的实现,感兴趣的朋友可以参考下
    2014-01-01
  • js鼠标滑过弹出层的定位IE6bug解决办法

    js鼠标滑过弹出层的定位IE6bug解决办法

    大家在写div+css的时候经常会用到弹出层,由于IE6的bug,所以当使用多个标签重复写弹出层的时候会遇到后面的层压在了弹出层的上面;用Jquery给弹出层的z轴依次增加高度可解决.代码很简单,效果很显著,需要了解的朋友可以参考下
    2012-12-12
  • 微信小程序数据统计和错误统计的实现方法

    微信小程序数据统计和错误统计的实现方法

    这篇文章主要介绍了微信小程序数据统计和错误统计的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • JS正则替换去空格的方法

    JS正则替换去空格的方法

    这篇文章主要介绍了JS正则替换去空格的方法,结合实例形式对比分析了针对全角与半角空格的删除技巧,涉及replace正则替换的使用方法,需要的朋友可以参考下
    2017-03-03
  • Cropper.js进阶之实现圆形头像裁剪功能示例

    Cropper.js进阶之实现圆形头像裁剪功能示例

    这篇文章主要为大家介绍了Cropper.js进阶之实现圆形头像裁剪功能示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 浅谈FastClick 填坑及源码解析

    浅谈FastClick 填坑及源码解析

    这篇文章主要介绍了浅谈FastClick 填坑及源码解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • JS自调用匿名函数具体实现

    JS自调用匿名函数具体实现

    定义一个函数用做临时的命名空间,在这个命名空间内定义的变量都不会污染到全局命名空间,需要的朋友可以参考下
    2014-02-02
  • 微信小程序之滑动页面隐藏和显示组件功能的实现代码

    微信小程序之滑动页面隐藏和显示组件功能的实现代码

    这篇文章主要介绍了微信小程序之滑动页面隐藏和显示组件功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • 使用原生JS快速写出一个五子棋小游戏

    使用原生JS快速写出一个五子棋小游戏

    五子棋游戏是一款大家耳熟能详的益智类游戏,下面这篇文章主要给大家介绍了关于如何使用原生JS快速写出一个五子棋小游戏的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码

    Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码

    跟踪一些最基本的客户端访问信息,这里将一些公用的代码总结下来,需要的朋友可以参考下
    2016-06-06

最新评论