Как вывести рекурсивно?

Видела много примеров, все сложно описаны, не могу понять что к чему. Объясните по-простому, пожалуйста, как работает код в таком случае?



Я не понимаю как это работает в точности, поэтому не могу сделать как мне нужно. Код с нужным примером.

function createData(l) {
  let item = '';
  for(let key in l) {
    let data = l[key];
    item += typeof data === 'string' ? `<li>${data}` : `<li><ul class="list">${createData(data)}</ul>`;
  }
  return item;
}
  • Вопрос задан
  • 1171 просмотр
Решения вопроса 1
lastuniverse
@lastuniverse
Всегда вокруг да около IT тем
Кристина, выкладываю на Ваш суд мою попытку объяснить суть рекурсии. Код имеет комментарии.
сам код с пояснениями
// итак, пусть будет задан некий абстрактный массив 
// с произвольной глубиной вложенности
// при этом элементами массива могут быть
// строки и вложенные массивы
const arr = [
  "string 1",
  "string 2",
  [
    "string 3.1",
    "string 3.2",
    [
      "string 3.3.1",
      [
        "string 3.3.2.1",
        "string 3.3.2.2"
      ],
      "string 3.3.3",
    ]
  ],
  "string 4",
  [
    "string 5.1",
    [
      "string 5.2.1",
      [
        "string 5.2.2.1",
        "string 5.2.2.2"
      ],
      "string 5.2.3"
    ]
  ]
];

// так как глубина вложенности произвольная
// для обхода всех элементов оптимальным
// будет использовать рекурсивную функцию
function parseArray(data) {
  let retstr = '';
  if(typeof data === "string"){
    // если строка, то выводим ее 
    // содержимое как элемент текущего списка
    retstr += '<li>'+data+'</li>';
  }else if(Array.isArray(data) ){
    // если массив, то создаем влеженный список
    retstr += '<ul>';
    // и каждый элемент массива отдаем на обработку
    // нашей функции, вызывая ее из нееже (это и есть рекурсия)
    // таким образом мы обеспечиваем обход
    // всех элементов нашей древовидной структуры
    // независимо от ее глубины вложенности и порядка
    // следования элементов
    data.forEach(value=>{
      retstr += parseArray(value);
    });
    // после прохода всех элементов внутри текущего
    // массива закрываем текущий список
    retstr += `</ul>`;
  }
  return retstr;
}


let wrap = document.querySelector('.wrap');
wrap.innerHTML = parseArray(arr);

Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Vlad_IT
@Vlad_IT Куратор тега JavaScript
Front-end разработчик
Не очень понял, что вы не поняли.
Вот есть функция createData, она рисует список элементов из массива, который передается ей в параметре l. Все.
В функции проходимся по каждому значению из l. Имеется условие: если l это строка, то выводим ее в li, если же это массив, то вероятно это список дочерних элементов, которые нужно вывести в отдельный блок ul. Для этой цели рекурсивно (рекурсивно, значит вызов функции самой себя) вызываем функцию createData и передаем ей уже не массив всех элементов, а лишь массив дочерних элементов текущего элемента из цикла. И там опять все также, смотрим на элементы, если у элемента есть дочерние элементы, опять вызываем createData.
Ответ написан
@sunblossom
Это не рекурсия. Если по-простому, рекурсия - это когда функция вызывает сама себя или две функции взаимно вызывают друг друга.

Здесь же в цикл передаётся массив, который через оператор in поэлементно считывается в key, а затем выводится. А ещё инициализация переменной data здесь явно излишняя.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы