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

  Рет қаралды 50,619

WebDev с нуля. Канал Алекса Лущенко

WebDev с нуля. Канал Алекса Лущенко

Күн бұрын

💎 Курс Функции в 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 Вычисляем факториал

Пікірлер: 68
@styopmargaryan1653
@styopmargaryan1653 Жыл бұрын
Еще нигде не встречал такого суперского объяснения рекурсии. До этого ничерта не понимал, спасибо Вам! Спасибо большое,❤❤❤ Спасибо за то что Вы делаете!❣❣❣
@Anikeev_Pavel
@Anikeev_Pavel 2 жыл бұрын
Еще нигде не встречал такого суперского объяснения рекурсии. До этого ничерта не понимал, спасибо Вам!
@ZiGoomul
@ZiGoomul 2 жыл бұрын
Ну вы издеваетесь?)) Только учебу закончил, а тут долгожданный урок, оставлю на завтра. Спасибо за ваш труд
@sergey9627
@sergey9627 Жыл бұрын
на 17:45 возникла сразу идея не делать бесконечный не нужный цикл while (true) , а мы же знаем свой потолок по сумме (то что в if) , так что всё это переезжает в while , тоесть будет while (s2
@giorgipetrosyan633
@giorgipetrosyan633 2 жыл бұрын
Как всегда супер. Вы первый за долгое время кто наконец-то обьяснил без фибоначи. У меня маленкие замечания, прошу не пинайте. Случай про лицо с низкой соц.... Момент без рекурсии. for(;;) как и while(true) тоже красив. Исходя из условия остановки можно было сделать for(;sum
@AntonioBenderas
@AntonioBenderas 2 жыл бұрын
Если хотите while, то не забывайте, что надо дописывать отдельно переменную и счётчик
@iliyabrook2933
@iliyabrook2933 5 ай бұрын
Анимацию чуть переделал=)) прикольная штука получилась, сделал шкалу с процентами, которая заполняется и потом возвращается в начальное положение, проценты также меняются до 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; }
@user-id9ui2en1y
@user-id9ui2en1y 2 жыл бұрын
Задачи на рекурсию объектов просто круть)) приходиться думать. Спасибо!
@yakut54
@yakut54 Жыл бұрын
Александр, спасибо за то что Вы делаете!
@user-lp7uc4yf8w
@user-lp7uc4yf8w 2 жыл бұрын
Це найкраще пояснення рекурсії!
@usertyfoon
@usertyfoon Жыл бұрын
Супер! У вас просто дар доступно излагать сложный материал!
@jr9032
@jr9032 2 жыл бұрын
Классно объяснили. Спасибо огромное за качественный контент!🤩🤩🙏
@romanchernyshov2632
@romanchernyshov2632 Жыл бұрын
Спасибо большое Александр! Все доступно и понятно!
@molchanov5362
@molchanov5362 Жыл бұрын
14:45 ( как по мне циклом здесь сделать проще)) iterationMoney = 0; //Кол-во итераций ( сколько раз ему закинут денежек) for (let sum = 0; sum < 300;) { // Если sum больше 300, заканчиваем цикл let money = randomIntrger(0, 100); // Функция рандома, которая реализована в видео sum += money; iterationMoney++; // каждый шаг прибавляет 1 к кол-во итераций }
@user-rv7mb4fj7v
@user-rv7mb4fj7v Жыл бұрын
Спасибо вам большое, вы реально топ! Реально учусь сам и каждая тема вызывает абсолютное непонимание , пока не начну смотреть ваши уроки. Просто пушка рил Сэр!
@lovikuanyshev
@lovikuanyshev 2 жыл бұрын
Потрясающее объяснение!
@alexforos5425
@alexforos5425 2 жыл бұрын
Спасибо большое, как всегда очень круто и просто объяснили!
@taniakedrova
@taniakedrova 2 жыл бұрын
спасибо за видео! Всё очень понятно
@dobermanpharaoh7567
@dobermanpharaoh7567 Жыл бұрын
Хорошо и подробно, спасибо!
@romanr5962
@romanr5962 2 жыл бұрын
Спасибо, все понятно
@galievramil1169
@galievramil1169 Жыл бұрын
Действительно, очень классный урок
@katemos4584
@katemos4584 2 жыл бұрын
Лучший коуч которого я слушала. Хотела бы быть хотя бы на 50% как Алекс Лущенко.
@itgid
@itgid 2 жыл бұрын
Согласен. Крутой чел
@markolegovich4651
@markolegovich4651 9 ай бұрын
Видос топ , как раз проходил эту тему в курсе по ДЖС и на схожих примерах , только более извращенных (вложенность++) объясняли рекурсию , следующая задача же была на факториал , сидел гадал так же как как и с фибоначи , спасибо за ваше объяснения , сложно - легко объяснить, а вот легко объяснить - тяжело.
@yuriykolomytsyn2352
@yuriykolomytsyn2352 Жыл бұрын
Просто шикарное пояснение
@unknown.6914
@unknown.6914 10 ай бұрын
отличный урок, спасибо
@allufa
@allufa 2 жыл бұрын
сделал рекурсию в одной функции на входе массив 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
@user-kq5ow1zv3m
@user-kq5ow1zv3m Жыл бұрын
спасибо.очень полезно!!!!!!
@bradobrey81
@bradobrey81 Жыл бұрын
классно , когда у разраба есть чувство юмора!)))
@alenachuyankova
@alenachuyankova 2 жыл бұрын
Спасибо!
@tinalee8686
@tinalee8686 2 жыл бұрын
Спасибо ⚘⚘⚘
@g999ar
@g999ar Жыл бұрын
как же сгорел пердак когда кантор начал объяснять рекурсию через факториал . Лайк, подписка
@user-kz5kz7fx9h
@user-kz5kz7fx9h 2 жыл бұрын
По моему отлично))))
@avinadevil6097
@avinadevil6097 2 жыл бұрын
Превосходно.
@SA-tm1ep
@SA-tm1ep 2 жыл бұрын
Уроки нравятся, учусь по ним. Спасибо. Позволю критику. Пример с факториалом здесь неудачный. Очень желательно, чтобы программист знал математику и алгоритмы. Поэтому часто и просят показать рекурсию на факториале. В математике, факториал 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 Жыл бұрын
как это в коде записать? спасибо
@JohnRAYChannel
@JohnRAYChannel Жыл бұрын
@@LenaFelica_songwriter хороший вариант через стрелочную с тернарным оператором factorial = (n) => n
@arzamaskin_kirill
@arzamaskin_kirill 2 жыл бұрын
Спасибо. да наплевать на тех, кому нужен факториал) Береги нервы.
@videoCxema
@videoCxema 2 жыл бұрын
алгоритм "минимакс", отличный пример где можно использовать рекурсию
@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))
@raff_m_d6971
@raff_m_d6971 2 жыл бұрын
спасибо
@user-uz5nx8fd4m
@user-uz5nx8fd4m 2 жыл бұрын
А как двигать этот блок внутри другого блока вправо-вниз-влево и вверх? У меня он застревает на повороте влево?
@Dmitriy_Sentinel
@Dmitriy_Sentinel 2 жыл бұрын
Друзья, подскажите, как называется менюшка где можно редактировать текст, делать его жирным, подчеркнутым и т.д. в теге textarea ?
@rumsgam
@rumsgam 2 жыл бұрын
Это плагины текстового редактора. Ищи - WYSIWYG редакторы.
@user-vs3vv4dr3k
@user-vs3vv4dr3k Жыл бұрын
почему многие кто обучают темы, тупо показывают только как пишется, но не объясняют что именно там делается по порядку шаг за шагом, что за что отвечает, какие операций там производятся, тупо показывая какие то примеры без объяснении и мы будем так же повторять так же как на видео но мы не поймем почему так происходит
@user-vs3vv4dr3k
@user-vs3vv4dr3k Жыл бұрын
главное надо понять логическое строение что мы вообще делаем и что мы хотим сделать, без этого мы всегда будем смотреть в консоли верный или неверный результат, а надо чтобы мы сами поняли что сделали и точно знать что будет в результате не смотря в консоли, а то получается мы просто сами не можем создать, и приходится брать где то уже готовый сделанный и вставить а там если что подправить и то с помощью других
@iliyabrook2933
@iliyabrook2933 5 ай бұрын
порой кода будет много, и задание как эти будут больше и сложнее во много раз, консолями редко кто пользуется, нужно юзать дебагер, а порой есть похожий огромный код и с багом, и тебе нужно его чинить, знать, где что находится в таких ситуациях за гранью возможного…
@LenaFelica_songwriter
@LenaFelica_songwriter Жыл бұрын
Очень классное объяснение рекурсии, нигде такого нет, спасибо!!! Но, у меня блок оранжевый не двигается( в крайнем примере). Как его стилизовать, может кто напишет пожалуйста!!
@romanmegagunko4650
@romanmegagunko4650 Жыл бұрын
Почитай про position relative / absolute в css
@LenaFelica_songwriter
@LenaFelica_songwriter Жыл бұрын
@@romanmegagunko4650 спасибо)) уже понято давно)
@user-bm8vv7nl3m
@user-bm8vv7nl3m 4 ай бұрын
@@romanmegagunko4650 Спасибо, спустя год у меня тот же вопрос возник. Ваш совет помог)))
@slagrach
@slagrach Жыл бұрын
А как добавить условие чтоб бок возвращался назад?
@slagrach
@slagrach Жыл бұрын
if (position > 400) return animBack(); дошло!
@viktord3507
@viktord3507 Жыл бұрын
Сделайте видео как запустить вс коде вот так для вывода кода в консоли браузера. Я уже не один день мучаюсь, а годных видео для новичков нет
@MrDmi3i
@MrDmi3i Жыл бұрын
А почему в рекурсии условие поменялось (>= 30 а в цикле в другую сторону)?
@JohnRAYChannel
@JohnRAYChannel Жыл бұрын
Думаю 3 месяца спустя ты уже разобрался, но для начинающих объясню В цикле нам нужно совершить итерацию над i 30 раз, то есть повышать на единицу до 30 и останавливать цикл после достижения лимита, но в рекурсии такое условие (i
@yakut54
@yakut54 Жыл бұрын
3:15 11417 Google Chrome; 11155 Node.js 🙃
@danterage636
@danterage636 Жыл бұрын
Вселенная бесконечна, это по поводу что бесконечного ничего не бывает
@0xSxVKaJnwQ
@0xSxVKaJnwQ 7 ай бұрын
Рекурсия - изи, когда находится на пятой строчке кода и ничего не возвращает.
@user-pl2bb9zu2o
@user-pl2bb9zu2o 2 жыл бұрын
у меня никуда не поехал(((( не понимаю почему(( анимация через рекурсию
@user-vn8hj5bd9i
@user-vn8hj5bd9i 2 жыл бұрын
В css .block поставить position:relative
@user-vb5xz2vk7n
@user-vb5xz2vk7n 10 ай бұрын
ну да конечно без знание рекурсии можно работать на фронте :D, тогда ты не инженером будешь а просто человеком который пишет код не понимая да и еще на собеседовании минимум дурак не спросить про рекурсию и кому ты так нуден если что то не понял и подумал да ладно продержусь
@teddyk7272
@teddyk7272 2 жыл бұрын
есть еще такие варианты , 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
@user-helena-mankova
@user-helena-mankova 2 жыл бұрын
Спасибо!
@iliyabrook2933
@iliyabrook2933 5 ай бұрын
Анимацию чуть переделал=)) прикольная штука получилась, сделал шкалу с процентами, которая заполняется и потом возвращается в начальное положение, проценты также меняются до 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) })
Замыкания, просто и с примерами. Функции JavaScript
39:25
WebDev с нуля. Канал Алекса Лущенко
Рет қаралды 44 М.
CAN YOU HELP ME? (ROAD TO 100 MLN!) #shorts
00:26
PANDA BOI
Рет қаралды 36 МЛН
СҰЛТАН СҮЛЕЙМАНДАР | bayGUYS
24:46
bayGUYS
Рет қаралды 720 М.
Стрелочные функции JavaScript. JavaScript function 2021
22:21
WebDev с нуля. Канал Алекса Лущенко
Рет қаралды 28 М.
Уроки по JavaScript | Drag'n'Drop на JavaScript
10:04
JavaScript v.2.0. Рекурсия
16:08
WebDev с нуля. Канал Алекса Лущенко
Рет қаралды 40 М.
15 crazy new JS framework features you don’t know yet
6:11
Fireship
Рет қаралды 382 М.
Как на самом деле померяли скорость вращения чёрной дыры
20:02
БОРИС БОЯРШИНОВ СО ДНА НАУКИ
Рет қаралды 6 М.
Просто o async, await. Без циклов и таймеров. JavaScript
15:55
WebDev с нуля. Канал Алекса Лущенко
Рет қаралды 94 М.
Как напортачить начинающему JS разработчику: принципы DRY, KISS, YAGNI, SOLID
31:53
WebDev с нуля. Канал Алекса Лущенко
Рет қаралды 16 М.
CAN YOU HELP ME? (ROAD TO 100 MLN!) #shorts
00:26
PANDA BOI
Рет қаралды 36 МЛН