Урок 12. JavaScript. Методы массивов (forEach, map, filter, reduce, find, findIndex). Js Массивы.
HTML-код
- Опубликовано: 19 сен 2024
- Эксклюзивный контент на моем Boosty: boosty.to/vlad...
Telegram: t.me/js_by_vla...
Instagram: / vladilen.minin
Roadmap по каналу:
vladilen.notio...
Урок 12. JavaScript. Методы массивов (forEach, map, filter, reduce, find, findIndex)
В ролике вы увидите, как использовать HOF методы массивов
Сложный JavaScript простым языком:
• Урок 1. JavaScript. Чт...
С завтра возвращаюсь в активный режим на ютубе :)
Эксклюзивный контент на моем Boosty: boosty.to/vladilen
Ок. С завтра возвращаюсь в режим активного зрителя на твоём канале.
PS шутка, я никуда отсюда и не уходил )
Это очень приятная новость! Спасибо за обучение!
Владилен, сделай пожалуйста видео Angular + MobX, желательно не поверхностно
сделай пожалуйста про стрелочные функии, а именно про поведение this внутри ее
@@stepantabaka4660 есть об этом статья на mozilla.developers.org
Помню, как я месяца 4 назад смотрел этот видеоролик (когда только начинал изучать JS) и мне это казалось запутанным, хотя понимал, что объясняется все понятным и доступным языком. И вот спустя время, снова смотрю этот урок (уже для подготовки к собеседованиям) и все кажется логичным и понятным. Я это к чему... Если вы недавно начали обучение и поначалу вам всё это кажется сложным, то спустя время (с практикой) все станет на свои места и те вещи, которые вам казались сложными, вам будут казаться детскими)) Всем благ! Не сдаемся и идём дальше!
За сколько времени вы освоили js
@@spektrone9285 Я бы сказал 5-6 недель, чтобы более менее нормально разобраться с темами (практика)
@@es7729 устроился)?
@@es7729 где искать задачи для практики?
Да! главное практика
Навигация по уроку будет не лишней:
ForEach - 2:30
Map - 5:30
Filter - 9:20
Reduce - 13:30
Find - 17:10
FindIndex - 18:25
Не хватает про метод sort(). Отличный метод для сортировки.
Спасибо большое чувак. Я сразу начал искать такую ссылку, и уже думал блин придеться вслепую искать, но ты нас спас. Хаха клево.
Spasibo bolshoe!!!
> Не хватает про метод sort(). Отличный метод для сортировки.
А еще методы .every() и .some() очень полезны
Вот спасибо, добрый человек)
Я бы еще добавил отличия forEach от map
Отличия forEach vs Map:
1)
_Метод forEach()_ выполняет предоставленную функцию один раз для каждого элемента массива
_Метод map()_ создает новый массив с результатами вызова предоставленной функции для каждого элемента в массиве, который вызывается
2)
_Метод forEach()_ при return возвращает undefined
_Метод map()_ выделяет память и создает новый массив, который в последующем можно сохранить в переменную
3)
_Метод forEach()_ нельзя связывать с другими методами. Например _forEach().reduce(...)..._ вернет ошибку
_Метод map()_ можно связывать с другими методами. Например _map().reduce(...)..._ можно использовать
4)
_Метод forEach()_ изменит текущий массив
_Метод map()_ вернет новый массив с преобразованными элементами и тем же количеством данных
5) Во многих случаях метод _forEach()_ медленнее метода _map()_
Он все это и сказал, ты какой то тугодум
@@everemchuk согл
офигенно, спасибо!
В сети много видео годных,но с "говорением" у многих проблемы.ваши безупречные, с точки зрения русского языка формулировки,выше всяких похвал.я слушала,как завороженная,спасибо!
Я теж з "говорением'" але дуже полюбляю цього хлопця!!!
Я посмотрел этот урок уже 10 раз, это лучшее что для меня работает, просто магическая штука, и только порешав кучу задач, пересмотрев это видео 10 раз я хорошо усвоил данный материал. Спасибо!
Владилен, как всегда - очень полезная информация. Ты создал бренд под своим именем, который олицетворяет качество! Мне приятно слушать. Спасибо за работу!
не понял тему на learn.js, решил поискать в ютубе - нашел это видео. Ты так четко прояснил все! спасибо!
На канале много такого)
const people = [
{ name: 'Владилен', age: 25, budget: 40000 },
{ name: 'Елена', age: 17, budget: 3400 },
{ name: 'Игорь', age: 49, budget: 50000 },
{ name: 'Михаил', age: 15, budget: 1800 },
{ name: 'Василиса', age: 24, budget: 25000 },
{ name: 'Виктория', age: 38, budget: 2300 },
];
// forEach
// Map
// Filter
// Reduce
// Find
// FindIndex
Спасибо!
святой человек
храни Господь!
Ииииииииииииииииииииигаааааааааааааарь!
супер) спасибо!
Огромное спасибо за это видео, после главы на лерн.ява в голове была каша, не смог до конца понять, как именно работают коллбеки этих методов, вы же все разжевали максимально понятно.
Аналогично, выкинули вагон инфы в разделе и ты в нем просто тонешь).
Спасибо, невероятно понятная и качественная подача материала! Прям радует,что есть в мире туториалов по вебу ютуба поставленная дикция и хорошее объяснение!
Класс, пытался разобрать эту тему, но не хватило примеров чтобы понять. Потом пошёл в ютуб, нашёл это видео и уже многое уяснил.
Владелен, дай Бог тебе здоровья!!! Я наконец-то понял как работают циклы!!!!!! И за всю мотивацию!!! Хочу быть твоим учеником!!
const array = ['Доброе утро!', 'Добрый вечер!', 3, 512, '#', 'До свидания!'];
const newArray = [];
for (let i = 0; i < array.length; i++) {
console.log(array[i]); // Каждую итерацию выдаёт елементы массива от 'Доброе утро!' до 'До свидания!'.
console.log(i); // Каждую итерацию выдаёт индексы массива от 0 до 5.
console.log(array); // Каждую итерацию выдаст полностью массив.
if (result === true ) {
newArray.push(array[i]); // Вот так мы заполним массив newArray элементами массива которые нам нужны в нашей логике
}
}
return newArray;
}
Очень полезное видео. Без занудства и лишней чепухи
Хоть мне и 10 лет, всё прекрасно понимаю. Продолжайте в том же духе Владилен! :)
Владилен - Вы красавчик, - умеете объяснять👍
Cпасибо большое за видео-урок! Хотел бы дополнить кому интересно, что в методе .reduce не обязательно устанавливать стартовое значение (тот же ноль в конце стрелочной функции), ибо по умолчанию он нулем и является. Само собой так просто нагляднее, но малоли кому пригодится
Владилен, спасибо за качественные уроки. Обычно я ускоряю ролики, а в твоем случае делаю паузу, пересматриваю, замедляю. Боюсь пропустить что-то. Надеюсь когда-нибудь ты откроешь свой инкубатор. Хочу учиться у такого специалиста.
Супер-полезно!) Спасибо! Мне все ваши видео очень помогают на практике и, как это не странно, в освоении теории. После того, как увидишь что это как это и зачем, теории есть на что лечь и слова в учебнике перестают быть потоком букв
Как же я рад что тебя встретил на просторах ютуба, все ролики смотрю. Vue и Nuxt по твоим роликам изучил. Сейчас JS до ума довожу, готовлюсь на Интервью .)))
Благодарю за отличное пояснение map. Понятно слышать, и главное понимать.
Особенно кратко и доходчиво показал синтаксис.
Спасибо вам огромное. Прояснились моменты, которые были не понятны. Все замечательно, продолжайте в том же духе!
Бро ты талантищеее в коде и обучении!
не мог не оставить отзыв. как всегда не только отличная теоретическая подготовка, но и практическая демонстрация полученных знаний. причем скорость речи настолько оптимально подобрана, что позволяет на 1,25 прослушивать то что знаю или понятно и так и на нормальной там где уже надо вдумываться или читать и понимать. при качественном звуке и хорошей дикции. только одно жаль, что я это не встретил года три назад. (а оно вообще тут лежит около года на данный момент). причем оказывается автор еще и курсы ведет где всему не только этому но и более сложному уже более подробно научит. и цена оказывается совсем смешная. потому и описал, что для меня это было актуально давно, а кому-то может и будет полезно. чтобы не тратили времени на тех кому не надо было этим заниматься, а получали знания у реального профессионала, которым уже много лет и является автор данного видеокурса.
чувак, какой же ты красавчик, респект тебе
Спасибо тебе Владилен обьяснил как никто метод Reduce.
Не надо искать Игоря, он в отпуске)))
Спасибо за крутой видос)
Спасибо Вам Владилен!
спустя 5 лет ничего лучше не выпустили
Твои видео - это топ!!! Спасибо.
лучше объяснения я еще не видел, просто красавчик👍 спасибо
чувак,огромное тебе человеческое спасибо !!!
Спасибо , сразу видно человек большой практики и с порядком в голове. Разложил на практическом примере и все ясно.
Круто. Чем больше набираешь руками код, повторяя за автором, комментируя при этом, тем больше понимаешь.
Всё-же лучше называть каждый новый массив/переменную новыми именами что-бы не путаться. Примерно так:
(Для лучшей читабельности скопипастить в редактор кода)
// ======================== Пример совместного использования методов ========================== //
// задача: 1. отфильтровать людей у которых бюджет > 3000
// 2. привести их к определённому формату
const newPeople = people
.filter(person => person.budget > 3000)//метод фильтр возвращает нам новый массив, значит к нему можно добавить сразу-же следующую обработку
.map(clerk => {//объект clerk, который мы будем видоизменять
return {//новый массив состоящий из другорго вида объектов
info: `${clerk.name} (${clerk.age})`,
money: clerk.budget
}
})
console.log(newPeople)//массив из 4 элементов в формате: info: "Владилен (25)"
// budget: 40000
// 3. Посчитать их бюджет
const amount = people
.filter(person => person.budget > 3000)
.map(clerk => {
return {
info: `${clerk.name} (${clerk.age})`,
money: clerk.budget
}
})
.reduce((total, clerk) => total + clerk.money ,0)//из метода map так-же получен новый массив, и его мы передаём вторым параметром в reduce под именем clerk
console.log(amount)
Очень крутое объяснение. Мне кажется я даже понял, как работает reduce. Спасибо тебе огромное!
я нашел в точности что искал,Спасибо!
Хороший урок, все понятно
P.S. Присоединюсь к одному из комментов, что все таки .sort() нужно было показать
Владилен, очень классное видео, все по полочкам, трудно понять методы, без практики, видно Конструктивное мышление, Благодарю! Привет из Турции!)
Самое понятное видео про данные методы! Спасибо огромное!!!
В который раз благодарна вам за столь полезную информацию!
Спасибо за урок!
Спасибо! 9ч JS позади, теперь можно глянуть фильм.
Уроки по реакту-редаксу, требуют наши сердца)
Сентябрь скорее всего будет реактивным)
Спасибо большое за информацию! У меня скоро первое тех.собеседование, Ваши видео помогают закрывать пробелы в знаниях)
Как всегда бесценно!
я учусь на codacademy, захожу на твой канал, чтобы прояснить то, что не уловила там на английском)) спасибо за труд!
Владилен, дякую за урок - шикарно!
Було б добре, якби більш детально роз'яснили "reduce"!
Спасибо большое за то что разжевал эту тему, теперь мне все понятно!)
*Л. а. й. к. о. с.* за видос. ы)
FINNALY I UNDERSTAND~!!! good video!
Хорошее видео, материал подан доступно, но немного хотелось бы поразжёванней обывательским языком про описание каждого метода-зачем он нужен и где применяется.
Спасибо Владилен.Отличный канал у вас!
Круто, Владилен! Большой РЕСПЕКТ!
Спасибо, очень понятный урок по методам массива.
Спасибо огромное, смотрю в 2022году , очень тщательно объяснайте..
Владилен, все очень понятно объяснил, спасибо!))
Огромное спасибо за видео.
Все очень понятно и на нормальном примере.
Огромное спасибо! Мне сейчас многие вещи так открылись!
Спасибо Вам огромное♥️ так просто и подробно Вы рассказали и показали!
Спасибо за твой труд Владилен, очень полезный контент.
Очень информативное видео! Спасибо большое) теперь все разложено по полочкам и можно практиковаться)
Спасибо большое за материал, буду пересматривать пока не усвоится😊
Хороший у тебя канал. Полезно и подача радует. Спасибо.
Когда прохожу курсы и уроки Владилена, всегда интересно почему он выбирает например такие имена людей в массиве, а не другие. Наверное друзей, подруг и девушек увековечивает в своих роликах :3
Так и есть. Придумать наполнение контентом во время записи - самое сложное)
Спасибо за уроки! Все понятно! Вопросов нет!
Все очень доходчиво, как раз то что нужно - большое спасибо!
Большое спасибо за видео! Очень хорошо объяснили, стало понятнее.
Годно как всегда, спасибо))
Giant thanks !!! Велетенське дякую ! Огромное спасибо !
Отличный ролик!
спасибо за понятное видео!)
Все просят что-то... тогда и я попрошу, может повезет и запишешь видосов. Контент у тебя не для начинающих, стало быть нужны серьёзные темы. Вот мне на пример трудно найти что-то на самом деле стоющее на тему SOLID принципов на JS. Также сложно разобраться в архитектуре портов и адапторов, как это реализовать на чистом JS... её еще гексогональной архитектурой называют. Пару всего примеров на английском нашел. Но вот хотелось бы такой темы на русском. Спасибо за труды
Очень хорошее видео, особенно конец про chaining
map для react js хорошо подходит)
ой очень спасибо за такие видео особенно с примерами реализации на простой логике .Сразу все понятно.Лайк!
Спасибо! Знал про них, но повторение мать учения)
Отличное объяснение, спасибо
Спасибо, супер понятно для новичков. Скорейшего развития каналу !
Снова увидел сегодня ===, пора бы загуглить разницу от ==. ; )
Как всегда интересно, спасибо!
Очень хорошо подана информация! Спасибо!
Очень все доходчиво разобрано. Спасибо!!!
Спасибо большое за урок, доходчиво и понятно!
Спасибо за ваш плейлист! Очень было полезно!
Большое спасибо, крутяк
Очень крутая подача материала! Респект!
Большое спасибо за видео
Про метод reduce хотелось бы более развёрнуто , с примерами из практики, т.к. его везде так же объясняют
Можно посчитать общую стоимость товаров в корзине например.
Кстати да, можно как массив или обьект в ккчестве начального значения. К примеру из массива сделать обьект
Вот все так объясняют, показывая простейший пример. А где чуть посложнее пример с reduce. Очень хотелось бы увидеть.
@@ruslannamanov4525 А есть ли смысл? За сложностью задачи потеряется само применение. Пример почти с потолка:у вас есть некая таблица - для таблицы сделать строку итого. Если хотите большей сложности: по части колонок суммирование, по части среднее, где то мин.макс.... Т.е. в качестве тотал у вас будут эти агрегирующие значения. При этом, как я понимаю, если total будет массивом, то дальше можно "пристегивать" еще цепочку.... :)
например, можно ли из строки 'aabbbbcddde' с помощью reduce сделать строку 'a2b4c1d3e1' (на собеседовании спрашивали)?
Владилен, отличная подача материала!
Предлагаю сделать ролик или серию роликов по VSCode.
Т.е. рассмотреть настройку и полезные расширения(для фреймворков и т.д.).
Уверен, просмотров будет много. Соответственно и подписок станет больше.
Офигенный урок, спасибо!
как всегда шикарно))), Muchas Gracias, не все могут быть учителями ну у тебя это хорошо получается.
Благодарю!
Шикарно!!! Спасибо за это видео!
Спасибо за весь цикл лекций, недавно наткнулся, посмотрел и сразу все понял с такой наглядной подачей. P.s Смотрел это видео, наворачивая курочку с карри, и сразу пришла мысль , что у тебя может получиться наглядное видео про каррирование. Что это вообще такое, зачем и как реализуется в js.
Про карринг подумаю, возможно и сделаю
Владилен, брат, спасибо!
Спасибо! Очень хорошо объясняете! :)
Cупер полезный урок!
За видос спасибо, очень доходчиво объясняете, но про reduce действительно хотелось бы более развернуто
Отличное видео
Спасибо автору за понятный урок. Мне все эти методы очень тяжело даются. Пересматриваю периодически, и уже в codewars стал их применять. For почти отошел)))
Я только джун, ваш видос ТОП.
так джун же в этом шарить должен или не..?
@@dmitriystoyanov933 может он по вёрстке джун хех.
@@dmitriystoyanov933 Джун среди новичков
@@dmitriystoyanov933 информация имеет свойство забываться
Спасибо за Вашу работу, может видео про рекурсию добавите?