Дерево из плоского массива функция на Javascript
JavaScript
1
Сообщения
1
Постеры
40
Просмотры
-
Вот функция на JavaScript, которая строит дерево из плоского массива данных. В JavaScript мы будем использовать объекты и ссылки для создания иерархической структуры.
function getTree(dataset) { const tree = []; // Дерево будет массивом const dataById = new Map(); // Используем Map для хранения узлов // Создаем индексированный Map и инициализируем childs как массивы dataset.forEach(node => { dataById.set(node.id, { ...node, childs: [] }); }); // Строим дерево dataset.forEach(({ id, parent }) => { const node = dataById.get(id); if (!parent) { // Если узел не имеет родителя, он становится корневым tree.push(node); } else { // Иначе добавляем узел как дочерний к его родителю const parentNode = dataById.get(parent); if (parentNode) { parentNode.childs.push(node); } } }); return tree; }
Объяснение кода
Функция возвращает массив tree, содержащий корневые узлы. Каждый узел может иметь дочерние элементы в массиве
Инициализация
tree: Массив для хранения корневых узлов.
dataById: Map, где ключ — id узла, значение — сам узел с добавленным свойством childs (пустой массив).Создание индекса (dataById)
Для каждого узла из dataset создается копия с добавлением пустого массива childs.
Узел сохраняется в dataById по его id.Построение дерева
Для каждого узла проверяется наличие родителя (parent):
- Если родителя нет, узел добавляется в массив tree.
- Если родитель есть, узел добавляется в массив childs родительского узла (если родитель существует).
Пример использования
const dataset = [ { id: 1, parent: null, name: "Root" }, { id: 2, parent: 1, name: "Child 1" }, { id: 3, parent: 1, name: "Child 2" }, { id: 4, parent: 2, name: "Grandchild 1" }, { id: 5, parent: null, name: "Another Root" } ]; const tree = getTree(dataset); console.log(JSON.stringify(tree, null, 2));
вывод:
[ { "id": 1, "parent": null, "name": "Root", "childs": [ { "id": 2, "parent": 1, "name": "Child 1", "childs": [ { "id": 4, "parent": 2, "name": "Grandchild 1", "childs": [] } ] }, { "id": 3, "parent": 1, "name": "Child 2", "childs": [] } ] }, { "id": 5, "parent": null, "name": "Another Root", "childs": [] } ]