Как упростить этот javascript код?

Question

[BKaiyrbekov]

я написал немного говно кода, как упростить этот код а то вроде логика маленькая а код большой....

const content = document.body.querySelector('.editer'),
            htmlTags = content.getElementsByTagName("*"), textNav = 'nav-';

            let navs = [],lastIndexH2 = 0, lastIndexH3 = 0;

            for (let i = 0; i < htmlTags.length; i++) {
              const htmlTagName = htmlTags[i].localName, htmlTag = htmlTags[i];

              if (htmlTagName === 'h2') {
                  htmlTag.setAttribute("id", textNav + i);
                  addItem(navs, htmlTag);
                  lastIndexH2 = i;
              }
              if (htmlTagName === 'h3') {
                htmlTag.setAttribute("id", textNav + i);
                const resH2 = navs.find(item => item.id === textNav +  lastIndexH2);
                if (resH2) {
                  addItem(resH2.children, htmlTag);
                  lastIndexH3 = i
                }
              }
              if (htmlTagName === 'h4') {
                htmlTag.setAttribute("id", textNav + i);
                navs.find(itemH2 => {
                  if (itemH2.id === textNav +  lastIndexH2) {
                    const resH3 = itemH2.children.find(elem => elem.id === textNav + lastIndexH3);
                    resH3 ? addItem(resH3.children, htmlTag) : addItem(itemH2.children, htmlTag)
                  }
                });
              }
            }

            function addItem(obj, htmlTag) {
              obj.push({
                name: htmlTag.innerText,
                id: htmlTag.id,
                children: []
              });
            }

результат

navs = [
              {
                "name": "Lorem is name ",
                "id": "nav-3",
                "children": [
                  {
                    "name": "Lorem is name",
                    "id": "nav-5",
                    "children": [
                      {
                        "name": "Lorem is name",
                        "id": "nav-7",
                        "children": []
                      }
                    ]
                  },
                  {
                    "name": "Lorem is name",
                    "id": "nav-9",
                    "children": []
                  }
                ]
              },
              {
                "name": "Lorem is name",
                "id": "nav-11",
                "children": [
                  {
                    "name": "Lorem is name ",
                    "id": "nav-13",
                    "children": []
                  }
                ]
              }
            ]

Answer 1

[Дмитрий Беляев]

const content = document.body.querySelector('.editer');
const htmlTags = content.getElementsByTagName("*");
const navs = []; // здесь let не нужен

for(let i = 0; i < htmlTags.length; i++) {
  const htmlTag = htmlTags[i];
  const lastNav = navs[navs.length - 1]; // resH2 всегда будет таким (см. комменты ниже)
  const lastChildOfLastNav = lastNav && lastNav.children[lastNav.children.length - 1]; // resH3 всегда будет таким
  switch(htmlTag.localName) {
  case 'h2':
    setID(htmlTag, i);
    addItem(navs, htmlTag);
    break;
  case 'h3':
    setID(htmlTag, i);
    // тот find что у Вас всегда найдет последний элемент если он есть, не зачем гонять лишний цикл
    if(lastNav) {
      addItem(lastNav.children, htmlTag);
    }
    break;
  case 'h4':
    setID(htmlTag, i);
    // опять же был лишний цикл ради последнего элемента, да еще и в него вложен такой же
    if(lastChildOfLastNav) {
      addItem(lastChildOfLastNav.children, htmlTag);
    } else if(lastNav) {
      addItem(lastNav.children, htmlTag);
    }
    break;
  }
}

function addItem(obj, {innerText: name, id}) {
  obj.push({
    name,
    id,
    children: []
  });
}

function setID(htmlTag, i) {
   htmlTag.setAttribute('id', `nav-${i}`);
}

Answer 2

[Ibishka]

const content = document.querySelector('.editer'),
      htmlTags = content.getElementsByTagName("*");

let navs = [],
lastIndexH2 = 0,
lastIndexH3 = 0;

const addItem = (obj, elem) => {
  obj.push({
    name: elem.innerText,
    id: elem.id,
    children: []
  });
}

htmlTags.forEach((e, i) => {
  if (e.localName == 'h2') {
      e.id = `nav-${i}`
      addItem(navs, e);
      lastIndexH2 = i;
  }
  else if (e.localName == 'h3') {
    e.id = `nav-${i}`
    const resH2 = navs.find(item => item.id == `nav-${lastIndexH2}`);
    if (resH2) {
      addItem(resH2.children, e);
      lastIndexH3 = i
    }
  }
  else if (e.localName == 'h4') {
    e.id = `nav-${i}`
    navs.find(itemH2 => {
      if (itemH2.id == `nav-${lastIndexH2}`) {
        const resH3 = itemH2.children.find(elem => elem.id == `nav-${lastIndexH3}`);
        resH3 ? addItem(resH3.children, e) : addItem(itemH2.children, e)
      }
    });
  }
});

Comments

[BKaiyrbekov]

я не стал использовать forEach так как IE11 не поддерживает и ради одного функций не хочется babel устанавливать, а цикл for все браузера поддерживает

[Ibishka]

BKaiyrbekov, На дворе 2020. Уже ES5 не актуален. for для таких вещей уже не сойдет.

[BKaiyrbekov]

Ibishka, )))

[WapSter]

Ibishka, вообще-то актуален, так бы babel не использовали.

[Ibishka]

WapSter, Но это уже считается не современным кодом

[Дмитрий Беляев]

BKaiyrbekov, forEach есть в ie11 на массивах, можно спокойно копировать в прототип DOM коллекций как есть
Ibishka, DOM-api никакого отношения к ECMAScript стандарту не имеет
ну и бабель - это про синтаксис, про полифилы - это core-js, хотя preset env бабеля и умеет автоматом импортить core-js

[BKaiyrbekov]

Дмитрий Беляев, с помощью рекурсии как можно переписать этот код?

[Дмитрий Беляев]

Ibishka, у Вас ошибка:
const addItem = (obj, elem) => {

1. const нельзя использовать до объявления
2. выражения в отличии от function declaration не всплывают

[Дмитрий Беляев]

BKaiyrbekov, зачем здесь рекурсия?

[Ibishka]

Дмитрий Беляев, да вы правы ошибка