Урок 12. JavaScript. Методы массивов (forEach, map, filter, reduce, find, findIndex). Js Массивы. 

С завтра возвращаюсь в активный режим на ютубе :) Эксклюзивный контент на моем Boosty: boosty.to/vladilen

Помню, как я месяца 4 назад смотрел этот видеоролик (когда только начинал изучать JS) и мне это казалось запутанным, хотя понимал, что объясняется все понятным и доступным языком. И вот спустя время, снова смотрю этот урок (уже для подготовки к собеседованиям) и все кажется логичным и понятным. Я это к чему... Если вы недавно начали обучение и поначалу вам всё это кажется сложным, то спустя время (с практикой) все станет на свои места и те вещи, которые вам казались сложными, вам будут казаться детскими)) Всем благ! Не сдаемся и идём дальше!

Навигация по уроку будет не лишней: ForEach - 2:30 Map - 5:30 Filter - 9:20 Reduce - 13:30 Find - 17:10 FindIndex - 18:25 Не хватает про метод sort(). Отличный метод для сортировки.

Я бы еще добавил отличия 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()_

В сети много видео годных,но с "говорением" у многих проблемы.ваши безупречные, с точки зрения русского языка формулировки,выше всяких похвал.я слушала,как завороженная,спасибо!

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

не понял тему на learn.js, решил поискать в ютубе - нашел это видео. Ты так четко прояснил все! спасибо!

Спасибо, невероятно понятная и качественная подача материала! Прям радует,что есть в мире туториалов по вебу ютуба поставленная дикция и хорошее объяснение!

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

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

Круто, Владилен! Большой РЕСПЕКТ!

Спасибо, очень понятный урок по методам массива.

Владилен, как всегда - очень полезная информация. Ты создал бренд под своим именем, который олицетворяет качество! Мне приятно слушать. Спасибо за работу!

Спасибо за твой труд Владилен, очень полезный контент.

Спасибо Владилен.Отличный канал у вас!

В который раз благодарна вам за столь полезную информацию!

Владилен, спасибо за качественные уроки. Обычно я ускоряю ролики, а в твоем случае делаю паузу, пересматриваю, замедляю. Боюсь пропустить что-то. Надеюсь когда-нибудь ты откроешь свой инкубатор. Хочу учиться у такого специалиста.

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

лучше объяснения я еще не видел, просто красавчик👍 спасибо

Очень информативное видео! Спасибо большое) теперь все разложено по полочкам и можно практиковаться)

Очень крутая подача материала! Респект!

Спасибо большое за информацию! У меня скоро первое тех.собеседование, Ваши видео помогают закрывать пробелы в знаниях)

Очень крутое объяснение. Мне кажется я даже понял, как работает reduce. Спасибо тебе огромное!

Спасибо Вам огромное♥️ так просто и подробно Вы рассказали и показали!

Благодарю за отличное пояснение map. Понятно слышать, и главное понимать. Особенно кратко и доходчиво показал синтаксис.

Как же я рад что тебя встретил на просторах ютуба, все ролики смотрю. Vue и Nuxt по твоим роликам изучил. Сейчас JS до ума довожу, готовлюсь на Интервью .)))

Хороший у тебя канал. Полезно и подача радует. Спасибо.

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

Спасибо за ваш плейлист! Очень было полезно!

Класс, пытался разобрать эту тему, но не хватило примеров чтобы понять. Потом пошёл в ютуб, нашёл это видео и уже многое уяснил.

Самое понятное видео про данные методы! Спасибо огромное!!!

Все очень доходчиво, как раз то что нужно - большое спасибо!

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

ой очень спасибо за такие видео особенно с примерами реализации на простой логике .Сразу все понятно.Лайк!

Владилен - Вы красавчик, - умеете объяснять👍

Очень хорошо подана информация! Спасибо!

Бро ты талантищеее в коде и обучении!

Очень полезное видео. Без занудства и лишней чепухи

Спасибо за уроки! Все понятно! Вопросов нет!

Спасибо Вам Владилен!

Спасибо большое за материал, буду пересматривать пока не усвоится😊

Как всегда бесценно!

спустя 5 лет ничего лучше не выпустили

Спасибо за урок!

Огромное спасибо за видео. Все очень понятно и на нормальном примере.

Офигенный урок, спасибо!

Спасибо тебе Владилен обьяснил как никто метод Reduce.

Огромное спасибо! Мне сейчас многие вещи так открылись!

Очень все доходчиво разобрано. Спасибо!!!

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

Очень хорошее видео, особенно конец про chaining

Спасибо! Очень хорошо объясняете! :)

Большое спасибо за видео! Очень хорошо объяснили, стало понятнее.

не мог не оставить отзыв. как всегда не только отличная теоретическая подготовка, но и практическая демонстрация полученных знаний. причем скорость речи настолько оптимально подобрана, что позволяет на 1,25 прослушивать то что знаю или понятно и так и на нормальной там где уже надо вдумываться или читать и понимать. при качественном звуке и хорошей дикции. только одно жаль, что я это не встретил года три назад. (а оно вообще тут лежит около года на данный момент). причем оказывается автор еще и курсы ведет где всему не только этому но и более сложному уже более подробно научит. и цена оказывается совсем смешная. потому и описал, что для меня это было актуально давно, а кому-то может и будет полезно. чтобы не тратили времени на тех кому не надо было этим заниматься, а получали знания у реального профессионала, которым уже много лет и является автор данного видеокурса.

Владилен, все очень понятно объяснил, спасибо!))

Шикарно!!! Спасибо за это видео!

Спасибо большое за то что разжевал эту тему, теперь мне все понятно!)

Отличное объяснение, спасибо

Твои видео - это топ!!! Спасибо.

Круто. Чем больше набираешь руками код, повторяя за автором, комментируя при этом, тем больше понимаешь. Всё-же лучше называть каждый новый массив/переменную новыми именами что-бы не путаться. Примерно так: (Для лучшей читабельности скопипастить в редактор кода) // ======================== Пример совместного использования методов ========================== // // задача: 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)

Спасибо! Знал про них, но повторение мать учения)

Владилен, брат, спасибо!

чувак, какой же ты красавчик, респект тебе

Спасибо тебе за видео! Очень информативно! Хотелось бы увидеть видео по дизайн патернах) Был бы очень благодарен

чувак,огромное тебе человеческое спасибо !!!

Владелен, дай Бог тебе здоровья!!! Я наконец-то понял как работают циклы!!!!!! И за всю мотивацию!!! Хочу быть твоим учеником!! 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 лет, всё прекрасно понимаю. Продолжайте в том же духе Владилен! :)

Спасибо! 9ч JS позади, теперь можно глянуть фильм.

Очень хорошо зашло)) Спасибо!

Агонь! очень ждал!

Спасибо за видео!

Cупер полезный урок!

я нашел в точности что искал,Спасибо!

Cпасибо большое за видео-урок! Хотел бы дополнить кому интересно, что в методе .reduce не обязательно устанавливать стартовое значение (тот же ноль в конце стрелочной функции), ибо по умолчанию он нулем и является. Само собой так просто нагляднее, но малоли кому пригодится

спасибо за понятное видео!)

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

Годно как всегда, спасибо))

Это просто пушка 💪

Спасибо! Все понятно!

Большое спасибо за видео

как всегда шикарно))), Muchas Gracias, не все могут быть учителями ну у тебя это хорошо получается.

Владилен, очень классное видео, все по полочкам, трудно понять методы, без практики, видно Конструктивное мышление, Благодарю! Привет из Турции!)

Снова увидел сегодня ===, пора бы загуглить разницу от ==. ; ) Как всегда интересно, спасибо!

Спасибо тебе добрый человек

Не надо искать Игоря, он в отпуске))) Спасибо за крутой видос)

Как всегда the best.

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

Спасибо, теперь стало понятнее

За видос спасибо, очень доходчиво объясняете, но про reduce действительно хотелось бы более развернуто

Отличное видео

Спасибо огромное, смотрю в 2022году , очень тщательно объяснайте..

Большое спасибо, крутяк

Владилен, отличная подача материала! Предлагаю сделать ролик или серию роликов по VSCode. Т.е. рассмотреть настройку и полезные расширения(для фреймворков и т.д.). Уверен, просмотров будет много. Соответственно и подписок станет больше.

как это я пропустил? Спасибо! Лайк!!!

Благодарю!

Спасибо большое!

Спасибо большое 🙏💥⭐

Спасибо огромное за ваш урок! Очень лаконично и доходчиво.