Рекурсия в JavaScript на простых примерах, хватит ее бояться!
ฝัง
- เผยแพร่เมื่อ 31 พ.ค. 2024
- 💎 Курс Функции в 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 Вычисляем факториал
Еще нигде не встречал такого суперского объяснения рекурсии. До этого ничерта не понимал, спасибо Вам!
Спасибо большое,❤❤❤
Спасибо за то что Вы делаете!❣❣❣
Еще нигде не встречал такого суперского объяснения рекурсии. До этого ничерта не понимал, спасибо Вам!
Ну вы издеваетесь?)) Только учебу закончил, а тут долгожданный урок, оставлю на завтра. Спасибо за ваш труд
на 17:45 возникла сразу идея не делать бесконечный не нужный цикл while (true) , а мы же знаем свой потолок по сумме (то что в if) , так что всё это переезжает в while , тоесть будет while (s2
14:45 ( как по мне циклом здесь сделать проще))
iterationMoney = 0; //Кол-во итераций ( сколько раз ему закинут денежек)
for (let sum = 0; sum < 300;) { // Если sum больше 300, заканчиваем цикл
let money = randomIntrger(0, 100); // Функция рандома, которая реализована в видео
sum += money;
iterationMoney++; // каждый шаг прибавляет 1 к кол-во итераций
}
Задачи на рекурсию объектов просто круть)) приходиться думать. Спасибо!
Александр, спасибо за то что Вы делаете!
Анимацию чуть переделал=)) прикольная штука получилась, сделал шкалу с процентами, которая заполняется и потом возвращается в начальное положение, проценты также меняются до 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;
}
Супер! У вас просто дар доступно излагать сложный материал!
Классно объяснили. Спасибо огромное за качественный контент!🤩🤩🙏
Как всегда супер. Вы первый за долгое время кто наконец-то обьяснил без фибоначи.
У меня маленкие замечания, прошу не пинайте.
Случай про лицо с низкой соц.... Момент без рекурсии.
for(;;) как и while(true) тоже красив. Исходя из условия остановки можно было сделать
for(;sum
Если хотите while, то не забывайте, что надо дописывать отдельно переменную и счётчик
Спасибо большое Александр! Все доступно и понятно!
Спасибо вам большое, вы реально топ! Реально учусь сам и каждая тема вызывает абсолютное непонимание , пока не начну смотреть ваши уроки. Просто пушка рил Сэр!
Це найкраще пояснення рекурсії!
Спасибо большое, как всегда очень круто и просто объяснили!
Потрясающее объяснение!
спасибо за видео! Всё очень понятно
Действительно, очень классный урок
Хорошо и подробно, спасибо!
сделал рекурсию в одной функции
на входе массив 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
Видос топ , как раз проходил эту тему в курсе по ДЖС и на схожих примерах , только более извращенных (вложенность++) объясняли рекурсию , следующая задача же была на факториал , сидел гадал так же как как и с фибоначи , спасибо за ваше объяснения , сложно - легко объяснить, а вот легко объяснить - тяжело.
отличный урок, спасибо
Просто шикарное пояснение
Спасибо, все понятно
классно , когда у разраба есть чувство юмора!)))
Лучший коуч которого я слушала. Хотела бы быть хотя бы на 50% как Алекс Лущенко.
Согласен. Крутой чел
спасибо.очень полезно!!!!!!
как же сгорел пердак когда кантор начал объяснять рекурсию через факториал . Лайк, подписка
Спасибо!
Спасибо. да наплевать на тех, кому нужен факториал) Береги нервы.
Спасибо ⚘⚘⚘
По моему отлично))))
Превосходно.
алгоритм "минимакс", отличный пример где можно использовать рекурсию
Уроки нравятся, учусь по ним. Спасибо. Позволю критику. Пример с факториалом здесь неудачный. Очень желательно, чтобы программист знал математику и алгоритмы. Поэтому часто и просят показать рекурсию на факториале. В математике, факториал n: n! = n * (n-1). Если n = 0, то n! = 1. Все. И функция должна возвращать результат. Никаких промежуточных глобальных переменных. В этом прелесть примера рекурсии на факториале. function fact(n) { if (n === 0) return 1; return n * fact(n - 1) }
как это в коде записать? спасибо
@@LenaFelica_songwriter хороший вариант через стрелочную с тернарным оператором
factorial = (n) => n
Друзья, подскажите, как называется менюшка где можно редактировать текст, делать его жирным, подчеркнутым и т.д. в теге textarea ?
Это плагины текстового редактора. Ищи - WYSIWYG редакторы.
спасибо
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))
почему многие кто обучают темы, тупо показывают только как пишется, но не объясняют что именно там делается по порядку шаг за шагом, что за что отвечает, какие операций там производятся, тупо показывая какие то примеры без объяснении и мы будем так же повторять так же как на видео но мы не поймем почему так происходит
А как двигать этот блок внутри другого блока вправо-вниз-влево и вверх? У меня он застревает на повороте влево?
главное надо понять логическое строение что мы вообще делаем и что мы хотим сделать, без этого мы всегда будем смотреть в консоли верный или неверный результат, а надо чтобы мы сами поняли что сделали и точно знать что будет в результате не смотря в консоли, а то получается мы просто сами не можем создать, и приходится брать где то уже готовый сделанный и вставить а там если что подправить и то с помощью других
порой кода будет много, и задание как эти будут больше и сложнее во много раз, консолями редко кто пользуется, нужно юзать дебагер, а порой есть похожий огромный код и с багом, и тебе нужно его чинить, знать, где что находится в таких ситуациях за гранью возможного…
Очень классное объяснение рекурсии, нигде такого нет, спасибо!!! Но, у меня блок оранжевый не двигается( в крайнем примере). Как его стилизовать, может кто напишет пожалуйста!!
Почитай про position relative / absolute в css
@@romanmegagunko4650 спасибо)) уже понято давно)
@@romanmegagunko4650 Спасибо, спустя год у меня тот же вопрос возник. Ваш совет помог)))
Сделайте видео как запустить вс коде вот так для вывода кода в консоли браузера.
Я уже не один день мучаюсь, а годных видео для новичков нет
А как добавить условие чтоб бок возвращался назад?
if (position > 400) return animBack(); дошло!
А почему в рекурсии условие поменялось (>= 30 а в цикле в другую сторону)?
Думаю 3 месяца спустя ты уже разобрался, но для начинающих объясню
В цикле нам нужно совершить итерацию над i 30 раз, то есть повышать на единицу до 30 и останавливать цикл после достижения лимита, но в рекурсии такое условие (i
3:15 11417 Google Chrome; 11155 Node.js 🙃
Вселенная бесконечна, это по поводу что бесконечного ничего не бывает
у меня никуда не поехал(((( не понимаю почему(( анимация через рекурсию
В css .block поставить position:relative
Рекурсия - изи, когда находится на пятой строчке кода и ничего не возвращает.
ну да конечно без знание рекурсии можно работать на фронте :D, тогда ты не инженером будешь а просто человеком который пишет код не понимая да и еще на собеседовании минимум дурак не спросить про рекурсию и кому ты так нуден если что то не понял и подумал да ладно продержусь
есть еще такие варианты , 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
Спасибо!
Анимацию чуть переделал=)) прикольная штука получилась, сделал шкалу с процентами, которая заполняется и потом возвращается в начальное положение, проценты также меняются до 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)
})