JS中数组和树型数据的相互转化

概要

在前后端分离的开发工作中，我们经常从后端的WebAPI中获取到1维数据，前端需要将这些数据转换为树型结构。例如多级菜单数据，我们需要通过id和pid等栏位，将1维数组数据转换成一个树型结构，然后再进行页面渲染。

本文主要介绍两个JS方法，方便我们将数组转换成树，或将树形结构转换成1维数组。

代码及实现

测试数据：

const data = [
    {
        id:1,
        text:"A",
        pid:0
    },
    {
        id:2,
        text:"B",
        pid:0
    },
    {
        id:3,
        text:"C",
        pid:1
    },
    {
        id:4,
        text:"D",
        pid:2
    },
    {
        id:5,
        text:"E",
        pid:2
    },
    {
        id:6,
        text:"F",
        pid:1
    },
    {
        id:7,
        text:"F",
        pid:4
    },
    {
        id:8,
        text:"G",
        pid:3
    },
    {
        id:9,
        text:"H",
        pid:1
    },
];

id是当前节点的标识，pid是当前节点的父节点标识。

数组到树

function convertFromArrayToTree(data) {
    return data.filter(d => {
        const _children = data.filter(c => c.pid == d.id);
        _children.length && (d.children = _children);
        return d.pid == 0;
    });
}

遍历每个数组元素，为每个元素获所有子节点，返回所有根节点。如果当前节点包含子节点，则增加children栏位。

树到数组

function getAllChildren(el) {
    const nodes = [];
    el.children && (el.children.map(c =>
        nodes.push(c, ...getAllChildren(c))
    ));
    return nodes;
}

function convertFromTreeToArray(tree) {
    const parents = tree.filter(n => n.pid == 0);
    const nodes = [];
    parents.forEach(el => {
        nodes.push(el, ...getAllChildren(el))
    });
    return nodes;
}

1. getAllChildren方法用户获取当前节点的所有子节点并返回；
2. convertFromTreeToArray函数遍历所有根节点，获取每个根节点的所有子节点。