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

Question

[Кристина]

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



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

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;
}

Comments

[Andrew]

а где тут рекурсия?
вы хотите чтобы вам разобрали этот пример или чтобы обьяснили что такое рекурсия?

[Кристина]

Andrew, Хочу вывести рекурсивно, но не знаю как. В песочнице привела пример, как должно выглядеть. Хочется код на моём примере и с объяснениями :)

Answer 1

[Роман]

Кристина, выкладываю на Ваш суд мою попытку объяснить суть рекурсии. Код имеет комментарии.

сам код с пояснениями

// итак, пусть будет задан некий абстрактный массив 
// с произвольной глубиной вложенности
// при этом элементами массива могут быть
// строки и вложенные массивы
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);

Comments

[Кристина]

Спасибо, дотащили мои мысли в голове акцентом на проверку типов. Я мало внимания этому уделила)

[Роман]

Кристина, когда для сокращения объема кода используют тернарные условные операторы, типа:

item += typeof data === 'string' ? `<li>${data}` : `<li><ul class="list">${createData(data)}</ul>`;

Это может привести к путанице и недопониманию происходящего в коде даже у программистов привыкших их использовать.
Именно поэтому и заменил на обычные if-ы и снабдил их комментами.

Answer 2

[Владимир Проскурин]

Не очень понял, что вы не поняли.
Вот есть функция createData, она рисует список элементов из массива, который передается ей в параметре l. Все.
В функции проходимся по каждому значению из l. Имеется условие: если l это строка, то выводим ее в li, если же это массив, то вероятно это список дочерних элементов, которые нужно вывести в отдельный блок ul. Для этой цели рекурсивно (рекурсивно, значит вызов функции самой себя) вызываем функцию createData и передаем ей уже не массив всех элементов, а лишь массив дочерних элементов текущего элемента из цикла. И там опять все также, смотрим на элементы, если у элемента есть дочерние элементы, опять вызываем createData.

Comments

[Кристина]

Владимир Проскурин Да вот уже приближаюсь к истине, на вашем примере как раз вникала в суть.

Шаг в сторону делаю, и бесконечность) В общем сейчас попытаюсь всё устаканить в голове.

Спасибо)

Answer 3

[sunblossom]

Это не рекурсия. Если по-простому, рекурсия - это когда функция вызывает сама себя или две функции взаимно вызывают друг друга.

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

Comments

[Кристина]

sunblossom Так нужно вывести рекурсивно, я просто не знаю как.

[sunblossom]

Кристина, никак, потому что поля. У них нет индексации. Разве что, можно циклом заполнить массив названиями полей и рекурсивно передавать индекс в функцию. Типа того

const pets = {...};

let wrap = document.querySelector('.wrap');

var pets_i = [];

for(let key in pets)
{
  pets_i.push(key);
}

function createData(i)
{
  if(i < pets_i.length)
  {
    return `<div class="item" data-name="${pets_i[i]}">${pets[pets_i[i]]}</div>` + createData(i + 1);
  }
  else
  {
      return "";
  }
}

wrap.innerHTML = createData(0);

[Кристина]

sunblossom, Да о чем вы говорите? Я знаю, что можно. Просто не понимаю как это работает.

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;
}

[sunblossom]

Кристина, сначала научитесь формулировать свои мысли, а потом задавайте вопросы.
И да, ваш код не сработает.

[Кристина]

sunblossom, Так в заголовке написано, что я хочу. Если бы я понимала, я и вопрос нормально сформулировала.

Всё работает https://codepen.io/kris-iris/pen/OBRogm

[sunblossom]

Кристина, а ничего, что выводится только значение первого поля?

[Роман]

Кристина, Вы бы по подробнее описали суть задания, особенно откуда взято требование рекурсивности, потому как приведенный Вами ассоциативный массив с питомцами совершенно не нуждается в рекурсии.

На всякий случай попытался изобразить рекурсивную функцию (получился правда какой-то рекурсивный монстр, абсолютно бессмысленный:)

[Кристина]

Роман, Да не в задании дело, а в понимании) Привела простой пример объекта. А если это глубина в 5 вложений и т.п.

В общем просто хочу понять.

[Кристина]

Роман, За пример, кстати, спасибо! Думаю всё устаканю в голове к утру!)

[Роман]

Кристина, ок, отпишусь после перекура. Пример с Меню-Аккордеоном не удачный для понимания рекурсии, приведу другой.