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

相关推荐
ITLiu_JH4 分钟前
scikit-surprise 智能推荐模块使用说明
开发语言·数据分析·智能推荐
yang_love10116 分钟前
Webpack vs Vite:深度对比与实战示例,如何选择最佳构建工具?
前端·webpack·node.js
好_快10 分钟前
Lodash源码阅读-keysIn
前端·javascript·源码阅读
好_快10 分钟前
Lodash源码阅读-nativeKeysIn
前端·javascript·源码阅读
User_芊芊君子12 分钟前
【Java】——数组深度解析(从内存原理到高效应用实践)
java·开发语言
好_快12 分钟前
Lodash源码阅读-baseKeysIn
前端·javascript·源码阅读
Good luck—dys15 分钟前
VUE如何后端控制及动态路由详细讲解
前端·javascript·vue.js
好_快18 分钟前
Lodash源码阅读-baseGetAllKeys
前端·javascript·源码阅读
裁二尺秋风1 小时前
Nginx — Nginx处理Web请求机制解析
前端·nginx
一 乐1 小时前
网红酒店|基于java+vue的网红酒店预定系统(源码+数据库+文档)
java·开发语言·数据库·毕业设计·论文·springboot·网红酒店预定系统