Как в JavaScript ES5 динамически создавать объекты с новыми именами?

Question

Как в JavaScript ES5 динамически создавать объекты с новыми именами?

Рейтинг: 0Ответов: 1Опубликовано: 25.08.2023

Вопрос про JavaScript ES5 без контекста фронтенда. Пишу скрипт на внутреннем фреймворке ПО для моделирования процессов и оргструктур. У меня есть графическая модель организационной структуры предприятия, узлы - подразделения или должности, листья - должности. Модель состоит из квадратиков-отделов и квадратиков-должностей и связей между ними (использую слово "квадратик", чтобы не использовать слово "объект" и не путать с объектами ООП). Количество узлов и листьев заранее не известно, оргструктуры разные бывают. Мне нужно обойти эту модель от корня до всех листьев и создать дерево, копию графического отображения. Решил делать на объектах, заодно и с ООП поразбираюсь.

Пока делаю так.

function Node(currOcc){
        this.parent = null;
        this.occ = null;
        this.objSymbNum = null;
        this.def = null;
        this.itemName = null;
        this.itemGUID = null;
        this.head = null;
        this.childSubOrgUnitsOccs = []; //массив "ссылок" на квадратики-подразделения на модели структуры  
        this.childPositionsOccs = [];   //массив "ссылок" на квадратики-должности на модели структуры
        this.childSubOrgUnitsObj = []; //массив для собранных дочерних ООП объектов-отделов
        this.childPositionsObj = []; //свойство для собранных дочерних ООП объектов-должностей
        
    }


    Node.prototype.addSubPositionObj = function(child){ //метод для добавления дочерних узлов должностей
        this.childPositionsObj.push(child);
    }

    Node.prototype.addChildSubOrgUnitsObj = function(child){ //метод для добавления дочерних узлов отделов
        this.childSubOrgUnitsObj.push(child);
    }

//currOcc - параметр, содержащий ссылку на квадратик на модели
function createTreeElement(currOcc){
    var tmpNode = new Node(currOcc);
    tmpNode.occ = currOcc;
    tmpNode.def = tmpNode.occ.ObjDef();
    tmpNode.itemName = tmpNode.def.Name(gl);
    tmpNode.itemGUID = tmpNode.def.GUID();
    tmpNode.objSymbNum = tmpNode.occ.SymbolNum();
    var tmpArr = fillNodeOrgStructData(tmpNode.occ); //fillNodeOrgStructData - функция для сбора окружения квадратиков
    tmpNode.head = tmpArr[0];
    if (tmpArr[1].length != 0) {
        tmpNode.childSubOrgUnitsOccs = tmpArr[1];
    } else {
        tmpNode.childSubOrgUnitsOccs = null;
    }
    if (tmpArr[2].length != 0){
        tmpNode.childPositionsOccs = tmpArr[2];
    } else {
        tmpNode.childPositionsOccs = null;
    }
    return tmpNode;
}

Дальше, через

var rootNode = createTreeElement(<внутренняя ссылка на корневой объект>),

заполняю его свойства, в частности и свойства-массивы

childSubOrgUnitsOccs

и

childPositionsOccs

Теперь мне нужно взять каждую ссылку на объект модели из этих массивов и создать под него объект, заполнить значения свойств, если есть дочерние объекты пройти дальше и т.д.

И вот тут я начинаю тупить.

Если корневому объекту я имя даю сам через

var rootNode = createTreeElement(<внутренняя ссылка на корневой объект>)

То как мне динамически давать имена всем дочерним объектам для их создания? Что-то типа "object1, object2, object3" или вообще давать имя объекта по значению одного из его свойств. Я просто не понимаю этот момент. Он видимо настолько элементарный, что я даже ничего толкового нагуглить не смог. Прошу вашего совета.

Вот пример структуры. Простенький. Значки с медалью - должности, значки с силуэтами людей - отделы. Красным дорисовал пару квадратиков под должностью для иллюстрации того, что должность тоже может быть узлом.

javascript ооп

Источник: Stack Overflow на русском

Answer 1

▲ 0

Поглядите структуру. Вроде должно под вашу все подойти

// Этот класс хранит всю инфу об объекте
function OfficeItem(obj){
    this.itemName = obj.name ?? '';
    this.itemGUID = '111';//generateNewGUID();
    this.type = obj.type ?? 'pos';
    this.chief = obj.type === 'dep' ? obj.chief : null;
}

// Объект узла дерева
function TreeNode(obj, children) {
    this.value = new OfficeItem(obj)
    this.children = children ?? [];
}

//Метод чтобы вывести все узлы красивенько
TreeNode.prototype.print = function(indent = 0) {
    // Создаем отступ на основе текущего уровня глубины
    var padding = ' '.repeat(indent * 4); // 4 пробела на каждый уровень глубины
    // Выводим значение текущего узла
    let str = `${padding}${this.value.itemName} (${this.value.type})`;
    if (this.value.type === 'dep'){
      str += `. Chief: ${this.value.chief.itemName}`;
    }
    console.log(str);
    // Если у узла есть дети, рекурсивно вызываем print для каждого из них, увеличивая отступ
    for (var i = 0; i < this.children.length; i++) {
        this.children[i].print(indent + 1);
    }
};

// Функция, которая создает новый департамент, чтобы лишнее не вводить
function addDepartment(name, chiefPosName, children) {
  return new TreeNode({
    name: name,
    type: 'dep',
    chief: new OfficeItem({
      name: chiefPosName,
      type: 'pos',
    })
  }, children)
}

// Аналогично для позиции
function addPosition(name){
  return new TreeNode({
    name: name,
    type: 'pos',
  })
}

//само дерево
var tree = addDepartment('Office', 'Chief of office',[
            addPosition('Deputy Chief of Office 1'),
            addPosition('Deputy Chief of Office 2'),
            addDepartment('Department 1', 'Head of department 1', [
              addPosition('Position 1 in department 1'),
              addPosition('Position 2 in department 1'),
              addDepartment('Group 1', 'Head of group 1', [
                addPosition('Position 1 in group 1'),
                addPosition('Position 2 in group 1'),
              ])
            ]),
            addDepartment('Department 2', 'Head of department 2', [
              addPosition('Position 1 in department 2'),
              addPosition('Position 2 in department 2'),
            ])
]);

// вывод
tree.print()

Как в JavaScript ES5 динамически создавать объекты с новыми именами?

Ответы