Как сжать алгоритм обхода дерева?

Question

[Антон]

Сделал обход дерева, выглядит ужасно. Кажется, проглядывается рекурсия, но не знаю как преобразовать в рекурсивный метод.

<TreeSelect
                dropdownStyle={{ maxHeight: "300px", overflowY: "auto" }}
                onChange={(value, label, extra) => {
                  let arrOfValues = [];
                  for (let i = 0; i <= value.length; i++) {
                    if (!isNaN(value[i])) {
                      arrOfValues.push(value[i]);
                    } else
                      for (const geo of treeProjData) {
                        if (value[i] === geo.value)
                          for (const sub of geo.children) {
                            for (const reg of sub.children) {
                              for (const loc of reg.children) {
                                for (const proj of loc.children) {
                                  arrOfValues.push(proj.id);
                                }
                              }
                            }
                          }
                        else {
                          for (const sub of geo.children) {
                            if (value[i] === sub.value) {
                              for (const reg of sub.children) {
                                for (const loc of reg.children) {
                                  for (const proj of loc.children) {
                                    arrOfValues.push(proj.id);
                                  }
                                }
                              }
                            } else {
                              for (const reg of sub.children) {
                                if (value[i] === reg.value) {
                                  for (const loc of reg.children) {
                                    for (const proj of loc.children) {
                                      arrOfValues.push(proj.id);
                                    }
                                  }
                                } else {
                                  for (const loc of reg.children) {
                                    if (value[i] === loc.value)
                                      for (const proj of loc.children) {
                                        arrOfValues.push(proj.id);
                                      }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                  }
                  handleChangeProjectId(arrOfValues);
                }}
                {...tProjects}
              />

Вот часть структуры этого дерева.

Есть какие-либо идеи, решения? Помогите, пожалуйста

Answer 1

[Adamos]

Не проще один раз обойти дерево и составить таблицу
{
proj.id : [ loc.value, reg.value, sub.value, geo.value ],
...
}
Или наоборот,
{
value : [ ... arrOfValues ... ],
...
}
И быстро искать по ней, а не скакать по дереву на каждое onChange?

Comments

[Антон]

Спасибо за ответ
А ты думаешь, что по дереву идти это намного медленней?

[Adamos]

anton_mra, если данные меняются редко, то кэш результатов по ним будет намного эффективнее перебора каждый раз, когда они понадобились. Насколько это совпадает с вашим сценарием - смотрите сами.

Answer 2

[NaN]

1) Переделать for на forEach
2) Вынести, то, что повторяется в отдельную функцию, например, это (повторяется один и тот же по сути код 4 раза)

for (const sub of geo.children) {
    for (const reg of sub.children) {
        for (const loc of reg.children) {
            for (const proj of loc.children) {
                arrOfValues.push(proj.id);
            }
        }
    }
}

Соответсвенно передавать нужные параметры