Dos métodos para aplanar la estructura de árbol en JavaScript

Introducción

En el desarrollo front-end, a menudo nos encontramos con datos estructurados en árbol, que pueden provenir de API back-end u otras fuentes de datos. Para procesar dichos datos de manera más conveniente, necesitamos convertirlos en una estructura plana para visualización u otras operaciones. En este blog, presentaremos dos métodos para aplanar la estructura de árbol en JavaScript: procesamiento recursivo y procesamiento no recursivo.

---

ejemplo de datos

Primero, damos datos de muestra, que representan datos de una estructura de árbol, cada nodo tiene atributos de identificación, identificación de padre y nombre.

const data = [
    { id: 1, parentId: 0, name: 'A' },
    { id: 2, parentId: 0, name: 'B' },
    { id: 3, parentId: 1, name: 'A-1' },
    { id: 4, parentId: 1, name: 'A-2' },
    { id: 5, parentId: 2, name: 'B-1' },
    { id: 6, parentId: 3, name: 'A-1-1' },
    { id: 7, parentId: 3, name: 'A-1-2' },
    { id: 8, parentId: 6, name: 'A-1-1-1' },
    { id: 9, parentId: 2, name: 'B-2' }
];

Método 1: procesamiento recursivo

El procesamiento recursivo es una forma común de procesar estructuras de árbol. Su idea básica es comenzar desde el nodo raíz, atravesar cada nodo del árbol capa por capa y agregar nodos secundarios a los atributos de los nodos principales correspondientes children.

function formatDataTree (data){
    let parents = data.filter(p => p.parentId == 0),
        children = data.filter(c => c.parentId != 0);

    dataToTree(parents, children);
    return parents;

    function dataToTree (parents, children) {
        parents.map(p => {
            children.map((c, i) => {
                if (c.parentId == p.id) {
                    let _c = JSON.parse(JSON.stringify(children));
                    _c.splice(i, 1);
                    dataToTree([c], _c);
                    // if(p.children)
                    //     p.children.push(c);
                    // else
                    //     p.children = [c];
                    typeof p.children !== 'undefined' ? p.children.push(c) : p.children = [c];
                }
            });
        });
    }
}

análisis de código

• Primero, definimos formatDataTreela función, que toma como parámetro una matriz de datos estructurados en árbol.
• Usamos filterel método para filtrar el nodo raíz y el nodo no raíz respectivamente, y obtener parentsmatrices children.
• Luego, llamamos dataToTreea la función para procesamiento recursivo. En dataToTreela función, usamos mapel método para atravesar cada nodo principal y usamos mapel método para atravesar cada nodo secundario, encontrar su nodo principal y construir la estructura de árbol. Durante la recursividad, utilizamos JSON.parse(JSON.stringify(children))para copiar childrenla matriz para evitar modificar los datos originales.
• Si se encuentra el nodo padre, childreneliminamos el nodo hijo de la matriz y agregamos el nodo hijo a la childrenpropiedad del nodo padre.

Método 2: procesamiento no recursivo

El procesamiento no recursivo es un método para procesar estructuras de árbol utilizando estructuras de datos como pilas o colas. Evita la sobrecarga de rendimiento de las llamadas recursivas y, en general, se ejecuta más rápido.

function formatDataTree (data){
    let _data= JSON.parse(JSON.stringify(data));
    return _data.filter(p => {
        const _arr= _data.filter(c => c.parentId === p.id);
        _arr.length && (p.children= _arr);
        return p.parentId === 0;
    });
}

análisis de código

• Definimos formatDataTreela función, que toma como parámetro una matriz de datos estructurados en árbol.
• En primer lugar, utilizamos para JSON.parse(JSON.stringify(data))hacer una copia de los datos _datapara evitar modificar los datos originales.
• Luego, usamos filterel método para _datafiltrar. Para cada nodo principal, filterencontramos todos sus nodos secundarios mediante el método _arry asignamos los nodos secundarios a childrenla propiedad del nodo principal.
• Finalmente, devolvemos el nodo raíz, que parentIdes 0.

resultado de la operación

Independientemente de si se utiliza procesamiento recursivo o no recursivo, el resultado de la operación será una matriz de estructura de árbol, en la que cada nodo contiene childrenatributos para almacenar sus nodos secundarios. Para los datos de ejemplo dados, ambos enfoques darán el mismo resultado.

Resumir

Este blog presenta dos métodos para aplanar la estructura de árbol en JavaScript: procesamiento recursivo y procesamiento no recursivo. El procesamiento recursivo es un método comúnmente utilizado, pero puede haber problemas de rendimiento cuando los datos son grandes. El procesamiento no recursivo utiliza estructuras de datos como pilas o colas para evitar la sobrecarga de rendimiento de las llamadas recursivas y suele ser más rápido. Según las necesidades reales y la escala de datos, puede elegir un método apropiado para procesar datos estructurados en árbol para una mejor aplicación en el desarrollo front-end.