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

作者:代码拾荒时间:2026-10-31 14:12:07浏览:104

本文介绍了在JavaScript中将一维数组转换为多维树形结构的实现方法。通过利用对象映射表(idMap)记录节点,并遍历数组根据parentId关联父子关系,最终构建出包含children字段的完整树结构。文章提供了核心代码逻辑、测试数据示例及调用方式,帮助开发者快速掌握该技巧。

介绍将一维数组转换为树结构数组的具体方法。

实现方案

/**
 * 将一维数组转换为树结构
 * @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

示例数组结构data

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

函数调用方式

let tree = arrayToTree(data);

输出结果展示

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

至此,关于JS一维数组转多维数组树的方法介绍完毕。如需了解更多相关JS一维转多维数组的内容,建议查阅本站过往文章或继续阅读后续内容,感谢大家的支持!

作者最新文章