【前端】【面试】【树】JavaScript 树形结构与列表结构的灵活转换:`listToTree` 与 `treeToList` 函数详解

JavaScript 树形结构与列表结构的灵活转换:listToTreetreeToList 函数详解

在前端开发的数据处理工作中,树形结构和列表结构是两种常见的数据形式。树形结构能够清晰展示数据间的层级关系,适合用于菜单、组织架构等场景;而列表结构则更加简洁,方便存储和传输数据。为了满足不同场景下的数据处理需求,我们常常需要在这两种结构之间进行转换。本文将深入介绍两个实用的 JavaScript 函数 listToTreetreeToList,它们能够帮助我们实现树形结构与列表结构的灵活转换,同时支持自定义关键属性名。

1. listToTree 函数:列表转树形结构

1.1 功能概述

listToTree 函数的核心功能是将一个扁平的列表数据转换为树形结构。该列表中的每个元素都包含一个唯一标识和一个父节点标识,通过这两个标识可以确定元素之间的层级关系。并且,该函数支持用户自定义这些标识的属性名,增强了函数的通用性。

1.2 函数定义与实现

javascript 复制代码
// 假设 getConfig 函数用于合并默认配置和用户传入的配置
function getConfig(config) {
    const defaultConfig = {
        id: 'id',
        children: 'children',
        pid: 'pid'
    };
    return { ...defaultConfig, ...config };
}

// tree from list
export const listToTree = <T = any>(list: any[], config: Partial<TreeHelperConfig> = {}): T[] => {
    const conf = getConfig(config) as TreeHelperConfig;
    const nodeMap = new Map();
    const result: T[] = [];
    // 动态获取配置中的属性名
    const idKey = conf.id;
    const childrenKey = conf.children;
    const pidKey = conf.pid;

    for (const node of list) {
        // 动态设置 children 属性
        node[childrenKey] = node[childrenKey] || [];
        nodeMap.set(node[idKey], node);
    }
    for (const node of list) {
        const parent = nodeMap.get(node[pidKey]);
        // 根据动态属性名操作节点
        (parent ? parent[childrenKey] : result).push(node);
    }
    return result;
};

// 定义 TreeHelperConfig 类型
type TreeHelperConfig = {
    id: string;
    children: string;
    pid: string;
};

// 这里 Partial 表示配置中的属性都是可选的
type Partial<T> = {
    [P in keyof T]?: T[P];
};

1.3 使用方法

  • 参数说明
    • list:必需,待转换的扁平列表数据。列表中的每个元素应包含唯一标识和父节点标识。
    • config:可选,配置对象,用于自定义关键属性名。包含以下属性:
      • id:节点的唯一标识属性名,默认为 id
      • children:存储子节点的属性名,默认为 children
      • pid:父节点标识属性名,默认为 pid

1.4 示例

假设我们有如下自定义属性名的扁平列表数据:

javascript 复制代码
const flatList = [
    { uniqueId: 1, name: '总公司', parentId: null },
    { uniqueId: 2, name: '研发部', parentId: 1 },
    { uniqueId: 3, name: '前端组', parentId: 2 },
    { uniqueId: 4, name: '张三', parentId: 3 },
    { uniqueId: 5, name: '李四', parentId: 3 },
    { uniqueId: 6, name: '后端组', parentId: 2 },
    { uniqueId: 7, name: '王五', parentId: 6 },
    { uniqueId: 8, name: '市场部', parentId: 1 },
    { uniqueId: 9, name: '推广组', parentId: 8 },
    { uniqueId: 10, name: '赵六', parentId: 9 }
];

// 转换为树形结构,指定自定义的属性名
const tree = listToTree(flatList, { id: 'uniqueId', children: 'subNodes', pid: 'parentId' });
console.log(tree);

在上述示例中,我们通过传入自定义的属性名 uniqueIdsubNodesparentId,成功将扁平列表转换为树形结构。

2. treeToList 函数:树形结构转列表

2.1 功能概述

treeToList 函数的作用是将树形结构数据转换为扁平的列表结构。它会遍历树形结构中的每个节点,并将其添加到一个列表中,同样支持用户自定义存储子节点的属性名。

2.2 函数定义与实现

javascript 复制代码
export const treeToList = <T = any>(tree: any, config: Partial<TreeHelperConfig> = {}): T => {
    const conf = getConfig(config);
    // 动态获取配置中的 children 属性名
    const childrenKey = conf.children;
    const result: any = [...tree];
    for (let i = 0; i < result.length; i++) {
        if (!result[i][childrenKey]) continue;
        // 根据动态属性名展开子节点
        result.splice(i + 1, 0, ...result[i][childrenKey]);
    }
    return result;
};

2.3 使用方法

  • 参数说明
    • tree:必需,待转换的树形结构数据。
    • config:可选,配置对象,用于自定义存储子节点的属性名。包含以下属性:
      • children:存储子节点的属性名,默认为 children

2.4 示例

使用前面转换得到的树形结构数据,将其转换回扁平列表:

javascript 复制代码
// 再将树形结构转换回列表
const backToList = treeToList(tree, { children: 'subNodes' });
console.log(backToList);

在这个示例中,我们传入自定义的 children 属性名 subNodes,成功将树形结构转换回扁平列表。

总结

通过 listToTreetreeToList 这两个函数,我们可以方便地在树形结构和列表结构之间进行转换,并且能够根据实际需求自定义关键属性名。这大大提高了代码的灵活性和通用性,使得我们能够更好地应对不同场景下的数据处理需求。在实际开发中,你可以根据具体的数据结构和业务需求,灵活运用这两个函数,实现高效的数据转换和处理。

相关推荐
zhangjipinggom4 分钟前
怎么安装python3.5-以及怎么在这个环境下安装包
开发语言·python
橘子味的冰淇淋~4 分钟前
【解决】Vue + Vite + TS 配置路径别名成功仍爆红
前端·javascript·vue.js
格子先生Lab7 分钟前
Java反射机制深度解析与应用案例
java·开发语言·python·反射
利刃之灵10 分钟前
03-HTML常见元素
前端·html
kidding72316 分钟前
gitee新的仓库,Vscode创建新的分支详细步骤
前端·gitee·在仓库创建新的分支
听风吹等浪起19 分钟前
基于html实现的课题随机点名
前端·html
leluckys25 分钟前
flutter 专题 六十三 Flutter入门与实战作者:xiangzhihong8Fluter 应用调试
前端·javascript·flutter
kidding72339 分钟前
微信小程序怎么分包步骤(包括怎么主包跳转到分包)
前端·微信小程序·前端开发·分包·wx.navigateto·subpackages
海洋与大气科学39 分钟前
【matlab】地图上的小图
开发语言·数据库·matlab
微学AI1 小时前
详细介绍:MCP(大模型上下文协议)的架构与组件,以及MCP的开发实践
前端·人工智能·深度学习·架构·llm·mcp