Урок Javascript #8. Методы массивов JS #1 (map, filter, sort, reduce, forEach + примеры)

Мой Telegram: t.me/stackdevru
Методы массивов часто дают разработчику удобные инструменты, позволяющие красиво решать самые разные задачи по преобразованию данных в Javascript.
В этом видео учимся использовать главные методы массивов в Javascript:
1) .map()
2) .filter()
3) .reduce()
4) .sort()
5) .forEach()
Знание этих методов - обязательно перед началом использования современных JS фрэймворков и библиотек, таких как ReactJS. Рассматриваем примеры из практики.
Ссылка на исходник: t.me/stackdevru/10
Главные методы массивов в Javascript #2: • Урок Javascript #9. Ме...
Мои Курсы:
Gatsby JS (полный курс): gatsbyjs.ru
React для начинающих: react001.ru
​Все мои курсы (+ исходные файлы): stackdev.ru
Подписывайся на соц сети:
Telegram: t.me/stackdevru
VK: vasilymur
Instagram: / vm_online
Мой блог о веб-разработке: stackdev.blog

[@volodymyrdubinkin4823]

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

[@stackdev]

все так..

[@muzaffaryunusov7032]

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

[@stackdev]

Это самый правильный путь изучения!

[@user-bn7ij8cr1i]

Сам вот всех источниках смотрю. Чтобы наконец запомнить. Учусь по Learn.Js и это пока самая сложная тема для меня. Вот и пересматриваю все

[@user-kb5kd7ln3h]

возвращайся и повторяй))

[@user-ff3lc1et3u]

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

[@SergeAser]

Спасибо за Вашу работу - все доступно и понятно!! Может только записать, что sort() - мутирует исходный массив?

[@victancia]

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

[@harrisonwinston2850]

напиши метод sort js MDN, там тебе по русски объяснят .

[@xczm225]

сейчас остановился на методе сорт по видео, зачем мы берем значения а и b тут понятно (сравнивая текущий и следующий) а вот с 1 : -1 ... зачем мы их ретерним? это как то влияет на порядок? Благодарю за ответ

[@xczm225]

можно еще через localeCompare() думаю так будет нагляднее

[@beautyisinternal6953]

тоже не поняла почему надо писать -1 и 1

[@dogshin_bulgat]

@@beautyisinternal6953 вы можете использовать не 1 и -1, а несколько иной синтаксис, например, const oldest = presidents.sort((a, b) => a.born - b.born); если хотите отсортировать наоборот от большего к меньшему, то соответственно b.born - a.born

[@dennyluckes4783]

Ваще огонь, буду смотреть и пересматривать пока не запомню!

[@stackdev]

Спасибо!

[@vladimirpuzey713]

Отличное, видео! С удовольствием делал) топ-контент

[@stackdev]

Спасибо!

[@kinomir20]

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

[@jetowl57]

Спасибо, всё понятно и доступно, а главное нестандартные примеры из учебника.

[@stackdev]

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

[@artem_doronin]

урок просто божественный!

[@stackdev]

Спасибо!

[@alexandrgusletsov2567]

спасибо за исходник, позанимаемся

[@user-xy7cx1kv6c]

Супер полезный материал спасибо вам огромное!

[@stackdev]

Спасибо!

[@gerompauel]

It was really awesome!

[@stackdev]

thanx!

[@user-nb1is5wc4k]

Спасибо! Почти всё было понятно. С reduce() так и не разобрался, не хватило объяснения что конкретно делает этот метод.

[@oleksii_smirnov]

оп, я тысячный подписчик в тг сообществе :) крутой контент, спасибо за труд

[@stackdev]

Спасибо! Круто) добро пожаловать

[@user-mq3ly3iq9y]

const writersName = writers.sort((a, b) => a.split(", ")[1] > b.split(", ")[1] ? 1 : -1); так тоже работает)

[@-Vladimir--]

В примере с городами из Википедии присутствует два класса в которых есть "sortable". Если его использовать то получится массив только из трех ссылочных элементов. Корректно указывать "plainrowheaders".

[@manako7653]

Ага, точно подмечено. Пришлось подумать, почему не работает пример. Ничего, разобралась)))

[@user-lo4lg1jo6z]

спасибо тебе, мил человек!

[@dinmukhamedamirov2704]

Хотелось бы по каждому методу отдельное видео. С несколькими примерами, с разными условиями. И по уровню: от легкого к сложному. А то по 1 одному не простому примеру трудно понимается. От 1 одного примера мало толку.

[@rommarioo]

Ну 9е задание было бы эстетичнее выполнить => const fruitSet = new Set(fruits); const arraySet = Array.from(fruitSet); console.log(arraySet);

[@doniyorallayorov5804]

Гениально

[@stackdev]

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

[@theoty-js-react]

Лучшее что можно найти по изучению JS

[@stackdev]

Спасибо!

[@murtazalievm7338]

В параметрах переменные a, b для чего предназначены? И что значит Return 1 и Return -1

[@butyfuljazernice]

это функция а а и б это элементы, если возвращает один то элемент идет вперед иначе назад, почитайте про сорт

[@EuegenTv]

Последнюю задачку можно решить с помощью new Set() или с помощью indexOf

[@user-ow2hr5xk8t]

Спасибо за отличные задачи. Последний пример можно решить проще: const fruSet = [...new Set(fruits)];

[@brutix80]

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

[@user-ow2hr5xk8t]

@@brutix80 Object.keys() вернет ключи объекта в массив)

[@timchenkod88]

Здравствуйте. И спасибо в первую очередь за интересный урок. Подскажите, пожалуйста, такой вопрос. Когда мы пишет выводить города с приставкой San - выводятся также и с приставкой Santa. А как сделать, чтобы выводило только San? Заранее спасибо!

[@ramirogremory6433]

'San '

[@RockyMax]

с методом Push нужно выполнить последнее задание

[@virtreal4663]

А зачем в return `${alived > blived ? -1 : 1}` результат оборачивать в обратные кавычки? Без них тоже правильно работает.

[@jerichod7999]

ещё можно просто отнимать одно от другого (return blived - alived)

[@Max-kr4ie]

Неправильно вы дядя Василий видеоролик назвали, надобыло добавить практика или задачи. А то сами методы слабо объясняются, а практика есть.

[@lllyovvv]

Ребят у меня вопрос, это со всеми бывает когда ты доходишь до этого урока, то не понимаешь, но спустя время когда ты решил глянуть ещё раз то уже начинаешь понимать?) P.S. При том что ты вообще не имел дело с этими

[@igoryavorskiy5297]

Здраствуйте, очень нравятся ваши уроки, подскажите пожалуйста как сделать такое же оформление кода как у вас?

[@stackdev]

спасибо! VSCode тема Dracula

[@igoryavorskiy5297]

@@stackdev спасибо, буду дальше смотреть ваши уроки, посоветуйте на каких уроках нужно сосредоточить внимание новичка в js?

[@stackdev]

@@igoryavorskiy5297 Здесь перечислены все основные темы: js001.ru/

[@JavaScriptcher]

В последней задаче push() не применяется?

[@stackdev]

Не понял - где? напишите пример

[@XyuTe6eHaBopoTHuK]

reduce это боль)

[@stackdev]

Нужно больше практики:)

[@antonyeskimo7593]

Спасибо за ваш труд. Кто поможет понять в 8 задании про метод reduce. const dataCount = data.reduce((objCount, transport) => { if (!objCount[transport]) { objCount[transport] = 0 - Как понять почему мы ставим значение 0 (если совпало в первый ) , потом добавляем +1 если повторилось , а в итоге получается 2 (если первое значение было 0 ) Надеюсь понятно описал , не судите строго я только учусь

[@user-xw8lb1sq1o]

разберём со значением truck, его было всего 3. по коду, если этого значения в нашем объекте не было, то добавляем его как ключ со значением 0 (truck: 0). он появился в объекте и дальше reduce не закончил выполнять написанный код, указано что идёт прибавление. в итоге у нас (truck: 1). далее если в массиве снова встретился truck и он у нас есть в объекте, то прибавляем плюс 1 в объект (truck: 2). условие if пропускается потом truck встречается ещё раз и соответственно будет в объекте truck: 3

[@AlexiCult]

Благодарю за урок! Очень помогает научиться. По городам, есть небольшое упущение: таким образом в список попали не только города, но и county. Вот мой вариант, чтобы были только города. Плюс, выбор нужных элементов сразу по длинному комбинатору ('.sortable tbody th a'), чтобы в скрипте использовать только один querySelectorAll. Плюс, без промежуточных переменных, в одну строку: // const names = Array.from(document.querySelectorAll('.sortable tbody th a')).map(el => el.textContent).filter(el => el.includes('San ')) // console.log(names)

[@fobianka2131]

да уж, видео явно не для плейлиста Начинающим. Никаких объяснений...

[@lesters]

последнее еще можно короче записать const newFruits = [...new Set(fruits)]; или const newFruits = Array.from(new Set(fruits))

[@vaspurakavdalian1133]

Благодаро вас за ваши позновательные уроки.Вы настоящи профессионал. Василий вы не могли бы помоч мне разобраться,как как коротко выполнить вот это / const presidentsSorted = presidents.sort((a, b) => { // const aLived = a.died - a.born; // const bLived = b.died - b.born; // return `${aLived > bLived ? -1 : 1}`; вы сказали что можно удалить две переменные и записать в одну строку. Честно говоря,никак не разобрался.Благодарю

[@AlexiCult]

Так вроде должно сработать: // const presidentsSorted = presidents.sort((a, b) => { // return `${(a.died - a.born) > (b.died - b.born) ? -1 : 1}`;}); Или ещё короче: // const presidentsSorted = presidents.sort((a, b) => `${(a.died - a.born) > (b.died - b.born) ? -1 : 1}`;)

[@vaspurakavdalian1133]

@@AlexiCult Благодаро тебе дружище.Огромное спасибо👏😎

[@dmitrimicha8078]

Ну или так const presidentsSorted = presidents.sort((a, b) => (a.died - a.born) - (b.died - b.born))