vue/react🚀 Маленький помощник компонента "Linkage"/"Menu"🔧, функция "массив" в "дерево"🌲

JavaScript

Новый бэкенд делает меню, 👦Backend говорит:

  1. меню на этот разУровень не фиксирован.
  2. напрямую в базуданные таблицы(массив) отправлен вам.
  3. меню потребностиСортировать.

На самом деле, я редко пишу об обработке данных, но я согласился, что почти смог бы этого добиться.После того, как я закончил писать, я подумал, что это очень полезно, поэтому я поделюсь этим.

Примечание: "Eleme/iview и другие библиотеки компонентов"Каскадный селектор"/"Меню навигации" и другие компоненты могут использовать следующие функции для упрощения операций.

Исходный код этой статьи:GitHub.com/easy86/ah пусть люди 2 его…

Цель

// 🚚 输入数组
const array = [{
        id: 1,
        name: '蔬菜',
        order: 1
    },
    {
        id: 2,
        name: '土豆',
        pid: 1,
        order: 2
    }, {
        id: 3,
        name: '豆角',
        pid: 1,
        order: 1
    }, {
        id: 4,
        name: '水果',
        order: 2
    }
];

// 🚀 转换开始
arrayToTree(array);

// 📺输出:
// 
// [
//     {
//         "id": 1,
//         "name": "蔬菜",
//         "order": 1,
//         "children": [
//             {
//                 "id": 3,
//                 "name": "豆角",
//                 "pid": 1,
//                 "order": 1
//             },
//             {
//                 "id": 2,
//                 "name": "土豆",
//                 "pid": 1,
//                 "order": 2
//             }
//         ]
//     },
//     {
//         "id": 4,
//         "name": "水果",
//         "order": 2
//     }
// ]

идеи

Логика очень проста, объясню пошагово:

  1. Сохраните «корневой узел» и остальные «дочерние узлы» в 2 переменные (контейнеры).
  2. Начиная с корня (родителя), проверьте каждый дочерний узел в контейнере «дочерний узел», найдите дочерний узел, соответствующий родительскому узлу, и сохраните его в дочернем поле, соответствующем родительскому узлу, в «контейнере дочернего узла». .
  3. Отсортируйте «узлы» в дочернем поле (здесь временно используется сортировка).
  4. Выполняйте «шаги 2 и 3» рекурсивно, пока «контейнер дочернего узла» не станет пустым.
  5. Повторите «шаги 2/3/4» для других «корневых узлов».

код

/**
 * 数组转树
 * @param {Array} 输入
 * @param {Object.String} keyMap.KEY_ID 表示唯一性键值(id)
 * @param {Object.String} keyMap.KEY_PID 对应的父id
 * @param {Object.String} keyMap.KEY_ORDER 排序依据的键值
 * @returns {Object} 树结构
 */
function arrayToTree(list, keyMap = {
    KEY_ID: 'id',
    KEY_PID: 'pid',
    KEY_ORDER: 'order',
}) {
    const {
        KEY_ID,
        KEY_PID,
        KEY_ORDER
    } = keyMap;
    const roots = [];
    // 当前非根节点
    let childrenNode = [];

    // 分组根和非根节点
    list.forEach((item) => {
        if (undefined === item[KEY_PID]) {
            roots.push(item);
        } else {
            childrenNode.push(item);
        }
    });

    // 遍历根节点
    for (const root of roots) {
        findChild(root);
    }

    // 递归单个根节点
    function findChild(root) {
        if (0 >= childrenNode.length) return;
        let newChildNode = [];
        childrenNode.forEach((child) => {
            if (root[KEY_ID] === child[KEY_PID]) {
                if (undefined === root.children) root.children = [];
                root.children.push(child);
                findChild(child /**new root */ );
            } else {
                newChildNode.push(child);
            }
        });

        // 排序
        if (undefined !== KEY_ORDER && root.children && 1 < root.children.length) {
            root.children = root.children.sort((prev, current) => prev[KEY_ORDER] - current[KEY_ORDER]);
        }
        childrenNode = newChildNode;
    }
    return roots;
}

npm & github

Код этой статьи я сохранил на github и npm, и его можно установить и использовать через npm.

npm i -S arr2tree

GitHub.com/easy86/ah пусть люди 2 его…

Рекомендуется базовое руководство по Typescript

Наконец толкнул, чтобы написать свои собственные »Базовый учебник по машинописному тексту" и 😊😊 2 на основе разработки ТСмаленькие инструменты, Я надеюсь тебе понравится.

Первый урок, опыт машинописи

Урок 2, Основные типы и вводные расширенные типы

Урок 3, что такое дженерики?

Урок 4. Интерпретация расширенных типов

Урок 5. Что такое пространство имен?

✋ Библиотека жестов для мобильных устройств/ПК, поддержка: касание/нажатие/панорамирование/пролистывание/вращение/сжатие GitHub.com/any86/anyi-he…

🍭 Превратите компонент vue в команду, подобную этой. $xxx GitHub.com/easy86/v UE-от…

Группа WeChat

Спасибо за чтение, если у вас есть какие-либо вопросы, вы можете добавить меня в WeChat, я приглашу васГруппа WeChat(Из-за ограничения Tencent на 100 участников в группах WeChat после того, как более 100 участников должны быть привлечены участниками группы)

Категории