Рекурсия в JavaScript на простых примерах, хватит ее бояться!

💎 Курс Функции в JavaScript: itgid.info/course/function-2021
⏰ Курс JavaScript 2.0: itgid.info/course/javascript-2
👇 Разверни для полной информации
Курс Методы массивов: itgid.info/course/arraymethod
Изучаем рекурсию в JavaScript. Смотрим как можно от циклов перейти к рекурсии и обратно. Рекурсивный перебор объекта, анимация на рекурсии
00:00 Рекурсия
01:40 Переполняем стек
04:10 Пишем правильную рекурсию
05:00 Аналог рекурсии с помощью цикла
07:20 Аналог цикла с помощью рекурсии
10:00 Программа попрощайка
14:35 Аналог на цикле
18:00 Перебор объектов с помощью рекурсии
24:20 Рекурсия для анимации
32:30 Вычисляем факториал

Пікірлер: 69

  • @styopmargaryan1653
    @styopmargaryan1653 Жыл бұрын

    Еще нигде не встречал такого суперского объяснения рекурсии. До этого ничерта не понимал, спасибо Вам! Спасибо большое,❤❤❤ Спасибо за то что Вы делаете!❣❣❣

  • @Anikeev_Pavel
    @Anikeev_Pavel2 жыл бұрын

    Еще нигде не встречал такого суперского объяснения рекурсии. До этого ничерта не понимал, спасибо Вам!

  • @jr9032
    @jr90323 жыл бұрын

    Классно объяснили. Спасибо огромное за качественный контент!🤩🤩🙏

  • @user-id9ui2en1y
    @user-id9ui2en1y2 жыл бұрын

    Задачи на рекурсию объектов просто круть)) приходиться думать. Спасибо!

  • @usertyfoon
    @usertyfoon Жыл бұрын

    Супер! У вас просто дар доступно излагать сложный материал!

  • @yakut54
    @yakut54 Жыл бұрын

    Александр, спасибо за то что Вы делаете!

  • @ZiGoomul
    @ZiGoomul3 жыл бұрын

    Ну вы издеваетесь?)) Только учебу закончил, а тут долгожданный урок, оставлю на завтра. Спасибо за ваш труд

  • @user-rv7mb4fj7v
    @user-rv7mb4fj7v Жыл бұрын

    Спасибо вам большое, вы реально топ! Реально учусь сам и каждая тема вызывает абсолютное непонимание , пока не начну смотреть ваши уроки. Просто пушка рил Сэр!

  • @giorgi_pa
    @giorgi_pa3 жыл бұрын

    Как всегда супер. Вы первый за долгое время кто наконец-то обьяснил без фибоначи. У меня маленкие замечания, прошу не пинайте. Случай про лицо с низкой соц.... Момент без рекурсии. for(;;) как и while(true) тоже красив. Исходя из условия остановки можно было сделать for(;sum

  • @AntonioBenderas

    @AntonioBenderas

    2 жыл бұрын

    Если хотите while, то не забывайте, что надо дописывать отдельно переменную и счётчик

  • @user-lp7uc4yf8w
    @user-lp7uc4yf8w2 жыл бұрын

    Це найкраще пояснення рекурсії!

  • @romanchernyshov2632
    @romanchernyshov2632 Жыл бұрын

    Спасибо большое Александр! Все доступно и понятно!

  • @alexforos5425
    @alexforos54252 жыл бұрын

    Спасибо большое, как всегда очень круто и просто объяснили!

  • @sergey9627
    @sergey9627 Жыл бұрын

    на 17:45 возникла сразу идея не делать бесконечный не нужный цикл while (true) , а мы же знаем свой потолок по сумме (то что в if) , так что всё это переезжает в while , тоесть будет while (s2

  • @taniakedrova
    @taniakedrova2 жыл бұрын

    спасибо за видео! Всё очень понятно

  • @lovikuanyshev
    @lovikuanyshev2 жыл бұрын

    Потрясающее объяснение!

  • @markolegovich4651
    @markolegovich465110 ай бұрын

    Видос топ , как раз проходил эту тему в курсе по ДЖС и на схожих примерах , только более извращенных (вложенность++) объясняли рекурсию , следующая задача же была на факториал , сидел гадал так же как как и с фибоначи , спасибо за ваше объяснения , сложно - легко объяснить, а вот легко объяснить - тяжело.

  • @dobermanpharaoh7567
    @dobermanpharaoh7567 Жыл бұрын

    Хорошо и подробно, спасибо!

  • @galievramil1169
    @galievramil1169 Жыл бұрын

    Действительно, очень классный урок

  • @molchanov5362
    @molchanov5362 Жыл бұрын

    14:45 ( как по мне циклом здесь сделать проще)) iterationMoney = 0; //Кол-во итераций ( сколько раз ему закинут денежек) for (let sum = 0; sum let money = randomIntrger(0, 100); // Функция рандома, которая реализована в видео sum += money; iterationMoney++; // каждый шаг прибавляет 1 к кол-во итераций }

  • @romanr5962
    @romanr59622 жыл бұрын

    Спасибо, все понятно

  • @unknown.6914
    @unknown.691411 ай бұрын

    отличный урок, спасибо

  • @yuriykolomytsyn2352
    @yuriykolomytsyn2352 Жыл бұрын

    Просто шикарное пояснение

  • @user-kq5ow1zv3m
    @user-kq5ow1zv3m Жыл бұрын

    спасибо.очень полезно!!!!!!

  • @bradobrey81
    @bradobrey81 Жыл бұрын

    классно , когда у разраба есть чувство юмора!)))

  • @iliyabrook2933
    @iliyabrook29336 ай бұрын

    Анимацию чуть переделал=)) прикольная штука получилась, сделал шкалу с процентами, которая заполняется и потом возвращается в начальное положение, проценты также меняются до 100% и потом 10% =)) также добавил 'width 0.3s ease-in-out' что плавно двигалась document.querySelector('.block').addEventListener('click', function (event) { const animationSelector = document.querySelector('.animation'); const blockSelector= document.querySelector('.block'); const blockPercent= document.querySelector('.percent'); if (typeof blockSelector.initialWidth === 'undefined') { blockSelector.initialWidth = blockSelector.offsetWidth; blockSelector.style.transition = 'width 0.3s ease-in-out'; blockPercent.initialWith = blockPercent.textContent.split('%')[0] } const blockPercentInit = Number(blockPercent.initialWith) const animationWidth = animationSelector.offsetWidth; const animationStepValue = (animationWidth / 25); const recurseEffectTimeOut = 300; const toDefaultBlockTimeout = animationStepValue * recurseEffectTimeOut; let percent = blockPercentInit; function recursionAnimation() { percent += 4; blockPercent.textContent = percent + '%'; setTimeout(() => { let blockWidth = blockSelector.offsetWidth; blockWidth += animationStepValue; blockSelector.style.width = (blockSelector.offsetWidth + animationStepValue) + 'px'; if (blockWidth >= animationWidth) { return null; } recursionAnimation() }, recurseEffectTimeOut) } recursionAnimation() setTimeout(() => { blockSelector.style.width = blockSelector.initialWidth + 'px'; blockPercent.textContent = blockPercentInit + '%'; }, toDefaultBlockTimeout) }) в блоке нужно только добавить ещё один див 8% кому нужны стили так как в коментариях к этому видео я их не нашел написал свои .container { font-family: 'Open Sans', sans-serif; max-width: 800px; margin: auto; text-align: center; } h1, h2 { font-family: 'Roboto Slab', serif; } .animation { display: flex; justify-content: center; } .animation{ display: flex; justify-content: flex-start; border: 1px solid black; height: fit-content; } .block { width: 70px; height: 80px; background-color: orange; cursor: pointer; display: flex; align-content: center; justify-content: center; } .percent{ display: flex; align-items: center; } .percent > span{ margin-left: 1px; } .percent, .percent > span{ color: white; font-weight: bold; }

  • @blackbirdalternativedevelo1068
    @blackbirdalternativedevelo106814 күн бұрын

    Спасибо!

  • @katemos4584
    @katemos45842 жыл бұрын

    Лучший коуч которого я слушала. Хотела бы быть хотя бы на 50% как Алекс Лущенко.

  • @itgid

    @itgid

    2 жыл бұрын

    Согласен. Крутой чел

  • @g999ar
    @g999ar Жыл бұрын

    как же сгорел пердак когда кантор начал объяснять рекурсию через факториал . Лайк, подписка

  • @user-kz5kz7fx9h
    @user-kz5kz7fx9h2 жыл бұрын

    По моему отлично))))

  • @arzamaskin_kirill
    @arzamaskin_kirill2 жыл бұрын

    Спасибо. да наплевать на тех, кому нужен факториал) Береги нервы.

  • @allufa
    @allufa2 жыл бұрын

    сделал рекурсию в одной функции на входе массив mass [ { "category": "V01", "name": "Apple", "children": [ { "category": "V0100", "name": "Mac", "children": [ { "category": "V010000", "name": "MacBook", "children": [] }, код для вывода всего каталога. function recursion(obj, level) { level++; for (let key in obj) { out1.innerHTML += '•'.repeat(level) + obj[key].name + ''; if (obj[key].children !== '[]') { recursion(obj[key].children, level); } } } recursion(mass, 0); в результате выводит: •Apple ••Mac •••MacBook

  • @tinalee8686
    @tinalee86862 жыл бұрын

    Спасибо ⚘⚘⚘

  • @avinadevil6097
    @avinadevil60972 жыл бұрын

    Превосходно.

  • @videoCxema
    @videoCxema3 жыл бұрын

    алгоритм "минимакс", отличный пример где можно использовать рекурсию

  • @yakut54
    @yakut54 Жыл бұрын

    24:06 Одним циклом обошёлся 👻 const parents = [] function printSurname(users) { for (let name in users) { if (users[name]?.parent) { printSurname(users[name].parent) parents.push(name) } } return parents } console.log(printSurname(users))

  • @SA-tm1ep
    @SA-tm1ep2 жыл бұрын

    Уроки нравятся, учусь по ним. Спасибо. Позволю критику. Пример с факториалом здесь неудачный. Очень желательно, чтобы программист знал математику и алгоритмы. Поэтому часто и просят показать рекурсию на факториале. В математике, факториал n: n! = n * (n-1). Если n = 0, то n! = 1. Все. И функция должна возвращать результат. Никаких промежуточных глобальных переменных. В этом прелесть примера рекурсии на факториале. function fact(n) { if (n === 0) return 1; return n * fact(n - 1) }

  • @LenaFelica_songwriter

    @LenaFelica_songwriter

    2 жыл бұрын

    как это в коде записать? спасибо

  • @JohnRAYChannel

    @JohnRAYChannel

    Жыл бұрын

    @@LenaFelica_songwriter хороший вариант через стрелочную с тернарным оператором factorial = (n) => n

  • @raff_m_d6971
    @raff_m_d69712 жыл бұрын

    спасибо

  • @user-vs3vv4dr3k
    @user-vs3vv4dr3k Жыл бұрын

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

  • @iliyabrook2933

    @iliyabrook2933

    6 ай бұрын

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

  • @Dmitriy_Sentinel
    @Dmitriy_Sentinel3 жыл бұрын

    Друзья, подскажите, как называется менюшка где можно редактировать текст, делать его жирным, подчеркнутым и т.д. в теге textarea ?

  • @rumsgam

    @rumsgam

    3 жыл бұрын

    Это плагины текстового редактора. Ищи - WYSIWYG редакторы.

  • @LenaFelica_songwriter
    @LenaFelica_songwriter2 жыл бұрын

    Очень классное объяснение рекурсии, нигде такого нет, спасибо!!! Но, у меня блок оранжевый не двигается( в крайнем примере). Как его стилизовать, может кто напишет пожалуйста!!

  • @romanmegagunko4650

    @romanmegagunko4650

    Жыл бұрын

    Почитай про position relative / absolute в css

  • @LenaFelica_songwriter

    @LenaFelica_songwriter

    Жыл бұрын

    @@romanmegagunko4650 спасибо)) уже понято давно)

  • @user-bm8vv7nl3m

    @user-bm8vv7nl3m

    5 ай бұрын

    @@romanmegagunko4650 Спасибо, спустя год у меня тот же вопрос возник. Ваш совет помог)))

  • @user-uz5nx8fd4m
    @user-uz5nx8fd4m2 жыл бұрын

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

  • @viktord3507
    @viktord35072 жыл бұрын

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

  • @user-vs3vv4dr3k
    @user-vs3vv4dr3k Жыл бұрын

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

  • @slagrach
    @slagrach Жыл бұрын

    А как добавить условие чтоб бок возвращался назад?

  • @slagrach

    @slagrach

    Жыл бұрын

    if (position > 400) return animBack(); дошло!

  • @MrDmi3i
    @MrDmi3i Жыл бұрын

    А почему в рекурсии условие поменялось (>= 30 а в цикле в другую сторону)?

  • @JohnRAYChannel

    @JohnRAYChannel

    Жыл бұрын

    Думаю 3 месяца спустя ты уже разобрался, но для начинающих объясню В цикле нам нужно совершить итерацию над i 30 раз, то есть повышать на единицу до 30 и останавливать цикл после достижения лимита, но в рекурсии такое условие (i

  • @yakut54
    @yakut54 Жыл бұрын

    3:15 11417 Google Chrome; 11155 Node.js 🙃

  • @danterage636
    @danterage636 Жыл бұрын

    Вселенная бесконечна, это по поводу что бесконечного ничего не бывает

  • @user-pl2bb9zu2o
    @user-pl2bb9zu2o2 жыл бұрын

    у меня никуда не поехал(((( не понимаю почему(( анимация через рекурсию

  • @user-vn8hj5bd9i

    @user-vn8hj5bd9i

    2 жыл бұрын

    В css .block поставить position:relative

  • @0xSxVKaJnwQ
    @0xSxVKaJnwQ8 ай бұрын

    Рекурсия - изи, когда находится на пятой строчке кода и ничего не возвращает.

  • @user-vb5xz2vk7n
    @user-vb5xz2vk7n10 ай бұрын

    ну да конечно без знание рекурсии можно работать на фронте :D, тогда ты не инженером будешь а просто человеком который пишет код не понимая да и еще на собеседовании минимум дурак не спросить про рекурсию и кому ты так нуден если что то не понял и подумал да ладно продержусь

  • @teddyk7272
    @teddyk72722 жыл бұрын

    есть еще такие варианты , 4 вариант самый простой ------------------------------------------------------------------------------------------ 1 Вариант function fact(n) { if (n === 1){ return 1; } else { return fact(n-1) * n++ } } fact(20) Вывод консоли - 2432902008176640000 ------------------------------------------------------------------------------------------- 2 Вариант function fact(n) { if (n === 2){ return 2; } else { return n * fact(n-1) } } fact(20) Вывод консоли - 2432902008176640000 -------------------------------------------------------------------------------------------- 3 Вариант function fact(n) { if (n === 1){ return n; } else { return n * fact(n-1) } } fact(20) Вывод консоли - 2432902008176640000 ------------------------------------------------------------------------------------------ 4 Вариант function fact(n) { if(n===1)return 1 return n * fact(n-1); } fact(20) Вывод консоли - 2432902008176640000 ------------------------------------------------------------------------------------------ 5 Вариант function fact(n) { if(n===2)return 2 return n * fact(n-1); } fact(20) Вывод консоли - 2432902008176640000 ------------------------------------------------------------------------------------------ 6 Вариант function fact(n) {return n

  • @alenachuyankova
    @alenachuyankova2 жыл бұрын

    Спасибо!

  • @iliyabrook2933
    @iliyabrook29336 ай бұрын

    Анимацию чуть переделал=)) прикольная штука получилась, сделал шкалу с процентами, которая заполняется и потом возвращается в начальное положение, проценты также меняются до 100% и потом 10% =)) также добавил 'width 0.3s ease-in-out' что плавно двигалась document.querySelector('.block').addEventListener('click', function (event) { const animationSelector = document.querySelector('.animation'); const blockSelector= document.querySelector('.block'); const blockPercent= document.querySelector('.percent'); if (typeof blockSelector.initialWidth === 'undefined') { blockSelector.initialWidth = blockSelector.offsetWidth; blockSelector.style.transition = 'width 0.3s ease-in-out'; blockPercent.initialWith = blockPercent.textContent.split('%')[0] } const blockPercentInit = Number(blockPercent.initialWith) const animationWidth = animationSelector.offsetWidth; const animationStepValue = (animationWidth / 25); const recurseEffectTimeOut = 300; const toDefaultBlockTimeout = animationStepValue * recurseEffectTimeOut; let percent = blockPercentInit; function recursionAnimation() { percent += 4; blockPercent.textContent = percent + '%'; setTimeout(() => { let blockWidth = blockSelector.offsetWidth; blockWidth += animationStepValue; blockSelector.style.width = (blockSelector.offsetWidth + animationStepValue) + 'px'; if (blockWidth >= animationWidth) { return null; } recursionAnimation() }, recurseEffectTimeOut) } recursionAnimation() setTimeout(() => { blockSelector.style.width = blockSelector.initialWidth + 'px'; blockPercent.textContent = blockPercentInit + '%'; }, toDefaultBlockTimeout) })

  • @user-helena-mankova
    @user-helena-mankova2 жыл бұрын

    Спасибо!