9 JavaScript кодов Must Have для junior

  Переглядів 44,946

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

2 роки тому

00:00 Начало видео
01:00 Аргумент как объект
03:40 Функция генератор
05:30 Форматируем вывод JSON
07:30 Оператор опциональной последовательности
10:00 Деструктурирующее присваивание
12:40 Создание копии массива
14:20 Удаление дубликатов из массива
16:00 Приводим к Number через map
17:20 Время выполнения кода
Курс JS 2.0: itgid.info/course/javascript-2
Методы массивов: itgid.info/course/arraymethod
Курс HTML для JS разработчиков: itgid.info/course/html
Остальные курсы: itgid.info/
Телеграмм канал: t.me/itgid_info
9 JavaScript Must Have кодов для junior программиста

КОМЕНТАРІ: 124
@klejnov
@klejnov 2 роки тому
В последнем примере: y=t; должно так быть.
@ivanbilous5500
@ivanbilous5500 2 роки тому
Да, но суть в друом.
@alexbulavin543
@alexbulavin543 2 роки тому
👍👍👍
@user-il9yf3gy4c
@user-il9yf3gy4c 2 роки тому
@@vitaliylufter8765 только что проверил у с правильным присвоением у меня в 4 раза быстрее! по ходу не особо важно что к чему присваиваем если это простые числа в соседнем скопе! принцип верен!
@i.am.rossalex
@i.am.rossalex 2 роки тому
и в этом примере, еще быстрей пройдет замена арифметической операцией: a = a + b; b = a - b; a = a - b;
@dennisfisher2684
@dennisfisher2684 2 роки тому
Четвертый мастхэв - деструктиризация данных. Пятый - спред оператор ) Спасибо за видео! Действительно мастхев! )
@GreenHappyHelix
@GreenHappyHelix 2 роки тому
ждем "9 JavaScript кодов Must Have для мидлов")
@constantineh.1235
@constantineh.1235 2 роки тому
Согласен, для мидлов всегда мало контента, было бы неплохо
@user-el9tf7xp1m
@user-el9tf7xp1m 2 роки тому
Да, нужен разбор генераторов с примерами применения. Спасибо за полезный контент!
@user-sb5ps4kk9f
@user-sb5ps4kk9f 2 роки тому
Потрясающе! Очень полезный материал
@violentiner
@violentiner 2 роки тому
встроенный таймер прям круто, спасибо
@user-nc4gs9lz9d
@user-nc4gs9lz9d 2 роки тому
Хорошее видео. Ошибка только в последнем примере, правильный обмен переменных это let t = x; x = y; y = t; // y = x нельзя, так как в x уже содержится y
@pupizoid100
@pupizoid100 Рік тому
А вместо t может быть любое обозначение? Или t означает time время?
@user-nc4gs9lz9d
@user-nc4gs9lz9d Рік тому
@@pupizoid100 называть переменную можно как угодно. Хоть какой-то буквой d, и это ничего означать не будет. А t это точно не time, t логично рассматривать как tmp, temporary = временная переменная.
@pupizoid100
@pupizoid100 Рік тому
@@user-nc4gs9lz9d Понятно. Спасибо. Я проверил как сказали let t = x; x = y; y = t; Получилось на 3 секунды дольше, странно. Чем let t = x; x = y; y = x
@user-nc4gs9lz9d
@user-nc4gs9lz9d Рік тому
@@pupizoid100 так а что странного, второй код неправильный = он не решает задачу обмена переменных, в итоге там переменная t не использует и похоже интерпретатор JS это понимает и игнорирует ненужную переменную.
@pupizoid100
@pupizoid100 Рік тому
@@user-nc4gs9lz9d А вот почему он так быстро обработал. Теперь понял до конца
@user-zr9zv6jr6w
@user-zr9zv6jr6w 2 роки тому
Супер!)) Сохраню в шпаргалки, спасибо
@ivanbilous5500
@ivanbilous5500 2 роки тому
Спасибо, как всегда оочень полезно!
@alexbigar9769
@alexbigar9769 2 роки тому
Спасибо! Очень интересное видео👍
@arsa946
@arsa946 Рік тому
Спасибо! Очень классно всё объяснили. Буду применять!
@sherlockholmes5395
@sherlockholmes5395 2 роки тому
Супер, спасибо, хорошо зашло, укрепил знания, что то новое. Дзякуй вялiкi !!!
@user-et2me5vv4d
@user-et2me5vv4d 2 роки тому
Спасибо, полезное видео!
@Ireile
@Ireile 2 роки тому
Отличные примеры! 👍🏻
@MrColins710
@MrColins710 2 роки тому
корисно, як завжди, дякую
@giorgipetrosyan633
@giorgipetrosyan633 2 роки тому
Как всегда жииирный + от меня. Есть комент по #1. Единственны + в передаче обьекта как параметра, это ничего извне менять не надо.супер актуально в больших проектах.
@mykhailostepanishchev6472
@mykhailostepanishchev6472 2 роки тому
Спасибо, познавательно
@romankozhukhovskyi8370
@romankozhukhovskyi8370 Рік тому
Спасибо, полезно!)
@antDgt
@antDgt 2 роки тому
Спасибо, классное видео.
@oldzas
@oldzas 2 роки тому
Круто, такие уроки важны
@o_opedro4044
@o_opedro4044 2 роки тому
Спс... Как всегда на высоте 👍
@HaveFun77777
@HaveFun77777 2 роки тому
Спасибо, ждём генераторы!
@denysivashchenko2080
@denysivashchenko2080 2 роки тому
супер!!! спасибо )
@MyMy-fg6rt
@MyMy-fg6rt 2 роки тому
Спасибо!
@vitamax3777
@vitamax3777 2 роки тому
хороший энтузиазм!
@raff_m_d6971
@raff_m_d6971 2 роки тому
спасибо
@Ceyhus
@Ceyhus 2 роки тому
Spasibo!
@yaroslav.baronin
@yaroslav.baronin 2 роки тому
За console.time - спасибо :)) класс
@tashkentcity3067
@tashkentcity3067 5 місяців тому
it was really useful for me, thank you for content
@catsapp
@catsapp 2 роки тому
Аргумент как объект прикольно. Потом досмотрю.
@borisn879
@borisn879 2 роки тому
#1 с объектом arg тоже проблема - нужно знать, какие атрибуты он должен содержать. Т.е. все идет к классам, интерфейсам и нотациям, хинтингу ...
@denysivashchenko2080
@denysivashchenko2080 2 роки тому
ждем урок по функциям генераторам )
@fuad2069
@fuad2069 2 роки тому
Поддерживаю
@user-xb7wq5kp5l
@user-xb7wq5kp5l 2 роки тому
Лучше по конкретным примерам где они удобнее чем любой другой функционал
@adilb8652
@adilb8652 2 роки тому
круто !)
@olehkokish
@olehkokish 2 роки тому
ты крут!
@andriichornyi9143
@andriichornyi9143 2 роки тому
Пример #9: при увеличении колличества итераций цикла на x10: ex 1: 142.493896484375 ms, ex 2: 94.2109375 ms. При ста миллионах: ex 1: 412.15673828125 ms, ex 2: 425.421142578125 ms (второй алгоритм показывает медленную работу по сравнению с первым. А при миллиарде: ex 1: 3575.089111328125 ms, ex 2: 3840.5859375 ms
@user-rh5zc9eb7z
@user-rh5zc9eb7z 2 роки тому
Круто, спасибо! PS: Можно ускорить написание `console.log()` в vscode. Если начинать писать вместо `console`, ключевое слово `log`
@Indy_660
@Indy_660 2 роки тому
аналогично в вебшторме, но потом ещё нажать таб
@mickkoch563
@mickkoch563 2 роки тому
Александр знает про log. Видимо по привычке пишет console. Либо чтобы побольше комментариев написали по этому поводу для продвижения канала))
@YauhenRomeiko
@YauhenRomeiko 2 роки тому
y = t Вроде ж так надо И по генераторам да, интересно
@MaksimMelnik
@MaksimMelnik 2 роки тому
#1 - во всём нужна золотая середина. Иногда удобно передать объект, но приходится следить за его структурой. Чаще же, удобнее передать 2-3 параметра и описать их через JSDoc.
@olehy5000
@olehy5000 2 роки тому
Отличные сниппеты! В конце y=t =)
@CzarOfScripts
@CzarOfScripts 2 роки тому
#9 Разве там не "y = t" должно быть?
@ioOmg
@ioOmg 2 роки тому
да
@olduniverse9270
@olduniverse9270 2 роки тому
Я бы посоветовал еще использовать perfomance.now() для измерения времени выполнения и не только.
@user-om2dp6nx7t
@user-om2dp6nx7t 2 роки тому
Алекс, oбaжаю твои видосы, но.. 9 JS кодов 😄 👍🏿
@catsapp
@catsapp 2 роки тому
Мои кода мое богатство
@jinke5935
@jinke5935 2 роки тому
Ох сколько ночей я плакал с этими а=b, b=t, t=a, решая задачи JS... А спред оператор прям вообще конфетка! И удобно читабелен. Спасибо за мастхэвное видео!
@vatakiller
@vatakiller 2 роки тому
Потамуста ты осень умний. Это весь такх слозна - переставить цве переменых мистами. Ас нескалько насей не спал
@jinke5935
@jinke5935 2 роки тому
@@vatakiller *здесь мем Петросяна*
@vatakiller
@vatakiller 2 роки тому
@@jinke5935 и мемасы, и питрасяна любис. Настаясий праграмист, а не вайтисник там кахой та
@pavel7930
@pavel7930 2 роки тому
Крутяк!
@ihopeingod1
@ihopeingod1 Рік тому
🙏🏼
@user-xs2dx2mh3f
@user-xs2dx2mh3f 2 роки тому
7, 8 огонь.
@vatakiller
@vatakiller 2 роки тому
Вау. Это так хруто. Я хацу бытьц таким зе умным хак и ти. Этех знаней мне типерь хватец на всю кареру. Узе саставил резюмэ и атправил в гоогле
@alexkruk4683
@alexkruk4683 2 роки тому
Почти все новое
@mikaelgevorgyan4521
@mikaelgevorgyan4521 2 роки тому
У меня есть очень большой вопрос=))) по поводу кликов!!!
@Hermes_TL
@Hermes_TL 2 роки тому
Деструктивно из массива ещё можно по другому. const a = ['Name', 33]; const [name, age] = a; // name - 'Name' // age - 33
@verstal
@verstal 2 роки тому
Есть еще третий способ поменять местами числовые переменные, самый долгий, но без использования третей переменной. ) Кстати второй способ на больших итерациях почти одинаково по времени с первым, но чаще проигрывает не на много.
@AlexMitinPlus
@AlexMitinPlus 2 роки тому
Аргумент-объект - неоднозначная вещь. Если в функции малое количество аргументов, то лучше применять JSDoc. И IDE вам подскажет чего функция от вас ждёт. Самодельные объекты тоже надо документировать, а иначе откуда другим программистам узнать что в объекте должно быть? И не переданные значения при использовании объекта разве обрабатывать не надо? С другой стороны есть случаи, когда объекты в качестве аргументов - лучший выбор: обработчики событий, манипуляции с DOM и т.п. Есть ещё случай, когда в функции очень много аргументов. И может показаться, что объект лучше. Но если в вашей функции аргументов больше 5, возможно, она делает слишком много. В общем, как везде, о методе знать нужно, но делать все функции принимающими только объекты тоже спешить не стоит.
@yummybunny7351
@yummybunny7351 2 роки тому
0:40 Александр, какой программой вы пользуетесь, чтобы выравнивать окна? Win10 по умолчанию так не умеет.
@kirillzhosul
@kirillzhosul 2 роки тому
Win+стрелки не хватает?
@yummybunny7351
@yummybunny7351 2 роки тому
@@kirillzhosul на видео используется не горячие клавиши, а мышь - при изменении размера одного окна сразу меняется другое. Про Win+стрелки я знаю - это не оно.
@yummybunny7351
@yummybunny7351 2 роки тому
@@kirillzhosul хотя может и оно, но, вроде как, на видео только мышью
@kirillzhosul
@kirillzhosul 2 роки тому
@@yummybunny7351 я в том плане что обычно стрелок хватает, делить можно на 4 части экран(не 4 в ряд, в квадрат(2 сверху, 2 снизу))
@user-ji8db9xo8y
@user-ji8db9xo8y 2 роки тому
Умеет. Берёшь окно мышкой и перетаскиваешь в правый или левый конец экрана. Окно само у вас занимает половину экрана. А на другой половине экрана появляется выбор другово окна. Выбираете окно, и регулируете их ширину на стыке двух окон.
@rtidrivers
@rtidrivers 2 роки тому
21:07 А может надо на 89 строке y=t ? Но вообще: автору респект!
@AndreyVictorovichhh
@AndreyVictorovichhh 2 роки тому
Очень познавательный урок, но не понял где были коды, и куда их вставлять. Пришел на работу, попросили девятый код ввести но как оказалось девятого кода нет если мы считаем с нуля...
@deniskotov
@deniskotov 2 роки тому
Код на букву "Г" - это Год) Что с английского переводится "Бог")) Так что я не г**нокодю, а люто бешено божу)
@user-ko3yq7xu9p
@user-ko3yq7xu9p 2 роки тому
Так консоль в браузере сама красиво и удобно форматируето объект, не нужно даже с JSON играть
@user-fx8jc8pp5f
@user-fx8jc8pp5f 2 роки тому
А зачем в последней функции let t = x? Подскажите плиз.
@vlad_khrychov
@vlad_khrychov 2 роки тому
Чтобы сохранить предыдущее значение из икса. Иначе после того, как ты запишешь в x значение из y, потеряется доступ к стаорому значнию х.
@volodymyrzakolodyazhny7740
@volodymyrzakolodyazhny7740 2 роки тому
На видео - опечатка.
@k0dzer0
@k0dzer0 2 роки тому
Да в 4 пункте поняли, что украли из опционалов языка swift походу логику, только там возвращается nil, типа как в PHP null.))
@awenn2015
@awenn2015 2 роки тому
1 пример, я обычно для этого деструктуризацию использую , суть та же
@GG-pc3ow
@GG-pc3ow 2 роки тому
Ноль дизлайков хорошая работа Олег!(я знаю что автора зовут Александр)
@user-td4yy8zt5u
@user-td4yy8zt5u 2 роки тому
Number("string") ???
@nouchance
@nouchance 2 роки тому
Classic'a Janr'a
@lalapta
@lalapta 2 роки тому
Как перевести must have на русский?
@timnorov
@timnorov 2 роки тому
Всегда отличные уроки. Спасибо большое, но пожалуйста, не говорите "маст хейв", это слух режет. Правильно говорить "маст хэв"
@aleksandrsilkin8594
@aleksandrsilkin8594 2 роки тому
Третий)
@user-vl3ly3qm7b
@user-vl3ly3qm7b 2 роки тому
Кодов? Может типичных для жиэса решений? Задачи уровня 7-8 куи на кодварсах, некоторые из которых ну очень странные, особенно с объектом Number который при его использовании превращает примитив в объект... Это уровень даже не трейни
@denisbielishev
@denisbielishev 2 роки тому
Зачем такая сложность в 5 совете?! Можно сделать [a,b] = .....
@plex4ever
@plex4ever 2 роки тому
посмотрел в коменты что бы наити это
@EvgenOl
@EvgenOl 2 роки тому
5:33 а что мешало вывести в консоль сразу объект? Он бы вообще имел в консоли раскрывающиеся списки и просмотреть его было бы удобнее чем любую строку. Зачем это чесание уха пяткой?
@yogalenovo8262
@yogalenovo8262 2 місяці тому
01:15
@yogalenovo8262
@yogalenovo8262 2 місяці тому
3:40
@yogalenovo8262
@yogalenovo8262 2 місяці тому
5:30
@yogalenovo8262
@yogalenovo8262 2 місяці тому
7:30
@gromovdenis7
@gromovdenis7 2 роки тому
Второй)
@eugenem7288
@eugenem7288 2 роки тому
Первый)
@catsapp
@catsapp 2 роки тому
Не с нуля надо начинать?
@eugenem7288
@eugenem7288 2 роки тому
@@catsapp нулевым был автор
@aiahz
@aiahz 2 роки тому
В четвертом примере за выбрасывание undefined по рукам бить надо. По-хорошому там надо писать try catch с логированием ошибок. Насчёт 9го способа не соглашусь, что нужно писать цикл. Первый вариант гораздо лучше, так как более читабелен, а погоня за 5ms может привести к очень плохим последствиям. В высококровном программировании джунам не стоит париться за байтики.
@Minty290
@Minty290 2 роки тому
Капец ты дышишь, как Дарт Вейдер)
@SergeyPryada
@SergeyPryada 2 роки тому
2:53 чё то дартом запахло
@alexeyilin1527
@alexeyilin1527 2 роки тому
Что за фетиш на слово function, никогда не использовал)
@eduardkolesnik5819
@eduardkolesnik5819 2 роки тому
Это не фетиш, а нормальное определение функций. Кроме существенной технической разницы их ещё и читать удобнее в стриме кода.
@alexeyilin1527
@alexeyilin1527 2 роки тому
@@eduardkolesnik5819 а стрелочные функции не норм?)
@eduardkolesnik5819
@eduardkolesnik5819 2 роки тому
​@@alexeyilin1527 В стрелочных функциях отсутствует половина функционала обычных. На то есть причины. Они и создавались чтоб использовать их в небольших выражениях.
@XTANCE
@XTANCE 2 роки тому
Я ни те, ни те функции не использую. Циклы не нужны. Массивы, объекты тоже. Принципиально.
@alexeyilin1527
@alexeyilin1527 2 роки тому
@@XTANCE как это, принципиально?)
@CzarOfScripts
@CzarOfScripts 2 роки тому
Как же бесит, в одном месте пробел не поставит, в другом поставит.. (arg, null, 2) (data : [...]). Это так на глаз бросается и думаешь "делается на от...".
@user-of1px9tj3c
@user-of1px9tj3c 2 роки тому
первый же пример,- чтобы понять, что нужно передавать в функцию, просто прочитать сигнатуру не достаточно, нужно вычитывать весь код функции, и хорошо когда она из 2 строк, а не 450 к примеру, а если таких функйий 150+ ...это лютый треш когда такой код нужно прочитать-разобраться...дальше не смотрел...
@aiahz
@aiahz 2 роки тому
Не пиши пожалуйста функции в 450 строк, мне потом больно это читать, опыт подсказывает, что одного экрана (около 40 строк) вполне достаточно)
@user-of1px9tj3c
@user-of1px9tj3c 2 роки тому
@@aiahz чукча не писатель, чукча - читатель
@aiahz
@aiahz 2 роки тому
@@user-of1px9tj3c если твой код млжешь прочитать только ты, то твой код говно.
@evgenysokolov7866
@evgenysokolov7866 2 роки тому
Очень сочувствую тем кто смотрит эти видео и пытается по ним учиться
@kirillpodolinniy309
@kirillpodolinniy309 2 роки тому
В чем проблема?
@Kriptio
@Kriptio 2 роки тому
ждем урок по функциям генераторам )
skibidi toilet 73 (part 1)
04:46
DaFuq!?Boom!
Переглядів 28 млн
«Що ви тут лазите?». День з військовими ТЦК Києва + ENG SUB
24:04
Слідство.Інфо | Розслідування, репортажі, викриття
Переглядів 297 тис.
Конгрес голосує за допомогу Україні. Спецефір Голосу Америки
5:43:13
Голос Америки Українською
Переглядів 444 тис.
skibidi toilet 73 (part 1)
04:46
DaFuq!?Boom!
Переглядів 28 млн