Топ-9 фишек JavaScript для написания и улучшения своего кода
Вставка
- Опубліковано 5 чер 2020
- Все мы стремимся оптимизировать свою работу, писать меньше кода и тратить меньше времени. В этом видео я расскажу фишки языка программирования Javascript в которых можно улучшить свой код. Видео больше нацелено на начинающих JS, где я покажу некоторые не очевидные моменты. Расскажу как справляться с некоторыми нюансами работы с массивами и объектами Javascript. В целом для новичков это видео просто находка и поможет в дальнейшем решении задач.
Классное видео, удобные фишки JavaScript
Спс👏🏻
Смотрю твои видосики уже давно. Спасибо, что делаешь такой контент в сфере "IT",реально - годно. Иногда устаёшь читать учебники, и отличный вариант посмотреть твой видосик так же для развития)
Ооо, спасибо 🙏🏻
Господа, не критикуйте музыканта! Он играет как умеет!
А если серьезно, мне интересно это видео с точки зрения чтения чужого "индийского" кода. Понятно, что некоторые вещи лучше не использовать, возможна некорректная работа кода. НО! Теперь в чужом коде я пойму, что делал "индус" и смогу исправить эту часть.
Так что автору респект в независимости от изначальной цели этого выпуска!
Оч круто)) не затяжное информативное видео, спасибо!
Рад что зашло
Классный формат!) Нужно больше фишек!)
Один из лучших видосов за последнее время, т.к. прям напоминаешь про простые, и казалось бы, очевидные вещи.
Супер формат!!! Понятно все)) Жду еще что нибудь интересное по JS
Отличный формат
Жду вторую часть
На днях, когда 1000 лайков это наберёт
Спасибо что есть такой канал. Автор удачи тебе.
Отлично! Такого, однозначно, надо побольше
Согласен
Формат просто отличный, видео информативное. Жду с нетерпением следующее видео)
На днях будет, когда 1000 лайков это наберёт
очень неплохой формат вспомнить о таких вот мелочах полезных!!!
Шикарно, буду делать
Это был самое информативное и короткое видео без лишних слов!!
Воот, это отличное видео, давай продолжение) Пару фишек были для меня новыми.
Думаю в каждом видео будет что то новое ✌🏻✌🏻
Спасибо, есть полезные моменты.
Это супер 👏🏻
Отличное видео, очень много не знал, так как новичок) Спасибо за полезный и понятный материал
Будет больше 👍🏻
Невероятно полезно и информативно!!!
Огонь. Мне понравилось. Продолжай в том же духе👍
Договорились 😎
Классное видео! Шафл массива классно делается!)
Спасибо🙂
Больше таких видео! Мне понравилося
Договорились, ваши лайки - с меня видео)
Супер. Спасибо
Коротко - спасибо!!!
И познавательно
Блин, flat больше всего понравился)) не знал, что можно так просто распаковать многомерный массив...
Щас будет ещё много интересного 😇😇
Я и не знал о его существовании 🙈
@@oleksandrvakhovskyi4163 ну потому что это из es9 и мало кто о нём знает. А надо постоянно смотреть про es че куда какие фичи появились
Он распарсит один уровень вложенности, к слову)
@@pilyugin если передать в flat(arg), где arg равен числу то получим распаковку до нужного уровня вложенности, для распаковки любого уровня вложенности arg === Infinity
Да было полезно. Можно ещё такой ролик?
Спасибо, интересно.
Это хорошо 😇
спасибо за контент
Отличное видео продолжай жду продолжения
Спасибо, будет
Крутой видос , спасибо
Лайк
Заебись, я давно уже прогаю на js и из видоса для меня было полезно только про уникальные элементы массива через сетер, можно в следующий раз более жосткие фичи
Интересная фича с динамическим свойством , а так , лично для меня мало чего нового, хотелось бы послушать про каррирование в js
Для вас мало, для многих это видео находка)
Спасибо. Отличный формат, максимально по делу... Только лучше выбрать темную тему в консоли браузера ;-)
Спасибо за крепкий сон
Спосибо за JS!!!
Выйдет ещё!
спс - полезно
Хээй уже жду)
Ок ок
Результат 👍
Кайф
№6, есть еще один способ, в конце поставить |0, это округлит сразу до int, если просто плюс поставить то там может вернутся и float
За "читаемость" №2 и смесь условий с побочными эффектами не боишься в аду сгореть?
№5 - индусятина вмеcто toSting() / parseInt()
Не боюсь
Ну почему же, №2 вполне нормально. В реакте такая тема часто применяется.
№5 конечно да) Так себе вариант.
@@ITime_shorts кстати в bash такое практикуют как обработку ошибок
'+' явно короче чем parseInt
@@buggs4825 ага, а терь примени это в коде на пару тысяч строк, везде и человек, который будет это смотреть явно не похлопает тебя по головке. Это неявное дерьмо тупо говнокодинг джаваскриптёров, только представление новичкам в программировании о коде портят.
можно больше таких видео о js и немного css
На скрине видео перед "но" нужна запятая, но видео прикольное, с удовольствием просмотрел
Да да, спасибо ✌🏻
Хорошо
Отлично даже
#5. Есть еще один способ перевести число в строку:
const num = 5
const str = `${num}`
Для того чтобы перевести строку в число можно использовать метод parseInt().
Спасибо, формат (づ￣ ³￣)づ
формат збс
Это шикарно
@@SuprunAlexey да, мне как начинающему и никак не закончающему (странное слово вышло) как раз то что нужно
Если на то пошло, то лучше использовать стрелочные функции в видео и можно даже отдельно рассказать про разницу написания функций и с какими проблемами можно столкнуться, очень полезное видео будет для всех
И лучше используй eslint, явно будет чище и читабельнее код. Просто когда ты используешь то двойные кавычки, то одинарные, еще и отступы в 4 пробела, у меня кровь из глаз идет 🤣
Сделаю 👍🏻
А как ты так быстро делаешь, например "скелеты" функций и сразу же выводишь только что введенные данные в IDE, сразу в консоль браузера?
Это какие то расширения определенные? Или "магия" монатажа?
Пишем arr.flat(infinity) и тогда можно распаковать любую вложенность.
Ну в работе это и юзается) думал что я там забыть мог)))
Ну вдруг забыл
насчет последнего способа, не будет утечки памяти в таком случае?
По поводу обнуления массива, а arr = [ ] не даст тот же результат или есть какие то нюансы?
arr.length = 0 не поменяет ссылку на массив.
А как же явные и неявные логические преобразования?
К примеру проверку строки (str.length !== 0 && str !== undefined && str !== null) можно записать как (str).
Тоже полезная штука 😋
Полезная
В случае с перемешиванием массива стоит обратить внимание на алгоритм Фишера - Йетса learn.javascript.ru/task/shuffle
Можно
плюсую, так как показано в видео дает распределение с разной вероятностью
Подскажи, что за шрифт на обложке? Очень красивый 😀
Bebas
@@SuprunAlexey Спасибо!
Видео хорошее, но мне кажется, что микрофон тихий вроде как. Перевести в строку же ещё можно через функцию .tostring() же не?
Ещё надо
Окей
Я там поставил лайк, можешь уже начинать снимать подобное видео.
Ждём остальных 😃
Лайк, но масштаб в редакторе и консоли увеличить можно! Просто мелковатый код, но фишки хорошие!
Блин, это при том что я уже увеличил, но окей - приму к сведению, спасибо
@@SuprunAlexey а ты попробуй ещё экраны разделить и работать в многооконном режиме, а то получается переключаешься постоянно с редактора на браузер, я обычно когда тренируюсь у меня где-то 70% занимает редактор, а ост 30 браузер в уменьшенном виде с открытой консолью, очень удобно!
Я обычно работаю с двумя мониторами и мелким шрифтом, очень так привык 😬
Привет, пожалуйста можешь ответить на мой вопрос?
В данное время все идут в веб разработчики видя статьи о их зарплатах и комфорте работы дома, щас практически каждый второй хочет стать программистом в этой сфере и рубить бабло на фрилансе.
Так вот как ты думаешь не будет ли в будущем слишком много людей в этой сфере и не останутся ли многие без работы, как в свое время юристы, будут ли понижаться зарплаты веб-программистов из-за этой инфляции
в 90х все шли на юристов
результат видиш сам
большие зарплаты это такой же миф как мифы про богатую жизнь в америке
зайди на фриланс какой - там на главной 95% индусы по 30 баксов в час
Пообщайся с рекрутерами. Они тебе скажут, что программистов много, но нормальных очень мало.
фишка номер 2, это хорошая практика? Или всё же лучше с условием? Видно, понятно
Можете встретить ее во многих фреймворках
для человека, который на си подобных языках пишет, то такое сокращение это ад для мозгов
только с условием, автор должен быть указать что такое есть, но не рекомендуется использовать в продакшене...
Я перешел на JS с C++ и обычно использую обычный if-else или если какое-то короткое выражение, то тернарный оператор "?".
Шёл 2020 год, а видео были 720p
Это видео 720 разве?
@@SuprunAlexey нет, с чего ты взял? Это видео 720p
Блин, странно, вроде рендерил 1080🤔🤔🤔
у меня монитор 24"
сижу на 1280х720
не хочу ослепнуть совсем
давай тоже самое про пайтон
Будет
А что значит Math.random() - 0.5 в "перемешивании" массива? Не понял для чего 0.5
По рекомендации airbnb приводить значение к строке лучше через String.
github.com/leonidlebedev/javascript-airbnb#type-casting--coercion
Спасибо, добрый человек, сохранил, почитаю
2:06 не знал что так можно
На 7.44 отображается не правильно. Т.к. метод sort меняет исходный массив, а массив это ссылочный тип данных. Т.е. массив хранится в памяти в другом месте, а не в переменной. А также тот факт что console.log работает как-бы асинхронно. Короче на экране оба массива в консоли должны выглядеть одинакаво - перемешаны.
3. Это регулярные выражения. Если бы я в про них не знал, то бы не понял что это за запись. Этот коммент для тех кто ещё с ними не столкиваося.
Ну да, полезно их знать
во втором пункте можно так же записать условие в виде Guard
if (cond) sayhello()
Тоже вполне себе неплохо как по мне
Плохая практика
Фигурные кавычки почти всегда нужно открывать. Таковы правила хорошего кода.
Интересно, но лучше всем этим не злоупотреблять
Смотря где
пункт 2 и 5 категорически не советую использовать. ибо это быдлячество и просто неуважение к остальным... в остальном норм))) Касательно пункта 2. если и есть цель написать в одну строку, то можно воспользоваться тернарным оператором.
На 10 минут три рекламы и вступления на 2, «очень информативно»
Про рекламу это вообще глупо говорить в бесплатных обучающих видео. А вступление, ну увы, хотел рассказать про формат и что будет ещё:)
@@SuprunAlexey было бы достаточно и одной на 10 минут
Купите ютуб премиум и не парьтесь по поводу рекламы в бесплатном обучающем контенте...
@@SuprunAlexey спасибо конечно за совет, но мне проще отписаться от вашего канала )))
До свидания:)
до примьеры 8 минут.
жду
Не долго
Что за тема для vs code?
Стандартная вроде🤔🤔🤔
@@SuprunAlexey можно название? Не могу найти
**написал код версия 1.0**
1.0: не работает
**делал правки версия 1.2.7**
1.2.7: работает лишь 50% функций
**перелапатил всё, вернулся к версии 1.0**
1.0: работает всё отлично
JS Я люблю тебя
Я не очень то шарю в js, тем более в новых спецификациях, но...какой смысл делать свойство динамическим и пихать в неё данные из константы? Разве суть константы не в том, что там значение, которое не должно меняться?)
Я уже не помню что конкретно в этом видео. Пример кода в студию
@@SuprunAlexey да не важен код, суть не меняется, в динамические данные засовывают данные из "переменной" const, разве суть этой "переменной" не в том, что в const не должны меняться данные? Это же всё таки константа - постоянная. Вообще не понимаю смысл констант в js, если их используют как обычные переменные...
Это у вас просто вопрос или в видео так написано?
@@SuprunAlexey да в видео
const test = "engine2"
let car = {
model: "honda",
[test]: "2.0"
}
Как-то так, вот тут и возникает вопрос почему мы делаем свойство динамическим, но данные для неё берём из константы?
@@sergeyst3934 чел, это называется Computed Property Name
Вполне очевидные "фишки", подавляющая часть которых взята с интерактивного учебника learn.javascript.ru/ . Честно говоря, надеялся узнать что-то по-настоящему интересное
почему нельзя обнулить массив как arr = [ ] ???????? (всегда так делаю)
Можно, я показал как способ
На тизере написано "что б".... Что!? Что Т ) Што Ж? ) Ты индус что ли... понятно, что программеру русский не особо нужен, но ты в массы вещаешь, не тру (
я думаю что данные пример не улучшают качество кода, а очень даже наоборот. Использование сайд эффектов (плохой архитектуры языка) приводит к багам почти в 100% случаев. (амперсанды вместо if это жесть)
тот случай, когда "краткость - сестра таланта" не работает... стоит хотя бы вскользь упомянуть поднаготную того, что объясняешь
Например, что не понятно? Что б я в дальнейшем понимал как объяснять. Вроде 99% все поняли из рассказанного.
@@SuprunAlexey, все точно не буду перечислять, но вот оператор &&, к примеру, работает так: возвращает первое ложное значение/выражение или, если нет ложного, то последнее правдивое - поэтому это можно (но не нужно, с целью "чистоты" кода) иногда использовать как условную конструкцию.
И вот такие "детали" новичку стоит знать и понимать.
#9 - перезапись length - ну это вообще ни в какие рамки! только Array.prototype.slice()
Под разное применение
Меня больше волнует, разница. Если использовать length, не остается ли в памяти ничего?
Andrius Rėgalas, это можно проверить:
let arr = [1, 2, 3, 4, 5, 6, 7];
arr.length = 5;
arr.length = 7;
console.log(arr);
Если в массиве по-прежнему будет 6 и 7, то значит остаётся)
Опять же про перемешивания массива. Вариант с random в sort - плохой вариант решения.
В sort функция должна возвращать для каждой пары всегда одинаковое значение, а в примере рандомное - это пхоло.
Так же этот способ не корректно работает.
Вот статейка для ознакомления habr.com/ru/post/358094/
Спасибо, добрый человек, сохранил, почитаю
последняя фишка смахивает на гавнокод. если нужно очистить массив то просто присвой ему []. это наглядней чем arr.length = 0;
Надеюсь никто через + не будет делать конкотинацию строк.
Мало фишек показал или растягиваешь удовольствие? Про Symbol и BigInt жахни урок, все-таки типы данных
По десять минут видео делаю, остальные в других видео
Увеличь в следующий раз редактор кода. Ничего не видно)
Окей, в этот раз тоже увеличивал. А вы с телефона смотрите?
Как по мне так : #2 #6 #9 больше антипатерны и хаки чем полезные "фишки". Код должен быть очевидным и понятным при беглом прочтении, а неявные преобразования только мешают этому. Лучше написать на 3 строчки больше, чем сидеть и думать что же это такое и зачем.
#3 должно было прозвучать ключевое слово - "регулярное выражение". А то ой не все поменяло, поставим флаг g, ой к регистру чувствительно, добавим флаг i. Зрители будут просто пытаться запомнить "трюк" не понимая сути, и главное - даже не подозревая что возможностей там значительно больше, и стоит копнуть глубже.
Set не особо производительный
2. нет. При быстром сканировании оно может восприниматься как true && true. Код должен быть не двухсмисленим (легким) для понимания.
ох музыка бесит
преобразование в строку путем сложения с кавычками - это быдлокод, который нарушает логику математической операции сложения
в школе говорили, что нельзя сложить яблоки с бананами - будет куча фруктоовощей
но создатели яваскрипта видать даже такое в школе не проходили, поэтому яваскрипт один из самых тупейших языков
так и не пойму, чего он такое популярный стал
var num = 15;
var n = num.toString();
так гораздой понятней (это пример с в2ц школы взят, специально загуглил и не поленился)
кстати так и не понял, что опять случилось в головах разрабов этого убожеста и они вар поменяли на лет?
месячные начались что ли?
раньше работало и никто не жаловался
var на let поменяли? вы бы хоть о разнице между ними прочитали прежде чем засирать что-то
@@ivanpupkin7515
ну и в чем разница? почему просто нельзя было оставить вар и поменять, что они там поменяли внутри у этого вара
@@kalobyte про обратную совместимость слыхали?
@@ivanpupkin7515
а в чем она? ну раньше писали вар, сейчас летв тех же местах
что поломается, если вар останется и код не будет нарушен, слово же не выкидывается
@@ivanpupkin7515
я глянул разницу и еще раз убедился, что яваскрипт был создан дегенератами
области видимости переменных были уже в тех же сях
да и функций тоже
и константы были, в с++ конст для переменных тоже есть
пол-года назад было интересно смотреть такие видосы(как выяснилось полная чушь). Codwers и все эти видосы стали лоховскими. Чему учат... нечему!
Фишки из видео - набор ненужной фигни, портящая взгляд на код. Надо учиться пользоваться функциями и методами, а не этим синтаксическим дерьмом.
кг/ам, диз, отписка
LocKtaR-o-DarK что?