Не пишите так в JavaScript. Оптимизируем код

Поделиться
HTML-код
  • Опубликовано: 12 сен 2024

Комментарии • 103

  • @overcomeaging
    @overcomeaging 3 года назад +18

    хорошее видео, но в начале было сказано про оптимизации
    а на деле оказалось просто сокращением кода
    P.S.: в 4-м примере исходный и итоговый варианты не эквивалентны

  • @SerzhNesteruk
    @SerzhNesteruk 5 месяцев назад

    Попробую дополнить некоторые примеры.
    #2 Можно решить так:
    v = d != null && d !== '' && d;
    ...или даже так:
    v = d !== '' && d ?? false;
    #4 Для функции-предиката корректнее будет возвращать результат требуемой проверки, а не значение свойства объекта, потому что оно ведь может быть и ложноподобным (falsy).
    const checkProp = (obj, key) => obj[key] != null;
    Хотя вместо этой функции, наверное, лучше просто использовать оператор in или метод hasOwnProperty (без свойств прототипов). Например, 2 in nobj или nobj.hasOwnProperty(2)
    #5 Предложенный вариант довольно интересен, вызов функции действительно можно выносить за скобки. Но если функции не переиспользуются, то их всё же проще заинлайнить.
    res5 = (
    typeof t5 === 'string'
    ? t5.length > 8
    : t5 > 100
    );
    #6 Если ноль не причислять (как сделано в видео) к негативным значением, то можно решить ещё и так:
    value = ['negative', 'zero', 'positive'][Math.sign(num) + 1];
    #9 Деструктурирующее присваивание будет конечно же лучшим решением, но для числовых значений вполне возможно и такое:
    w1 = w2 - (w2 = w1, 0);

  • @Sevenvad
    @Sevenvad 3 года назад +1

    Глядя на статус-бар в Visual code, можно подумать, что автор сидит под windows XP. У меня реально были такие мысли, когда я превьюху увидел.

  • @saveman2121
    @saveman2121 Год назад +1

    Однозначно лайк, очень полезные видео делаешь отец!

  • @creemer
    @creemer 3 года назад +2

    В 8ом совете приведение к числе через Number - гораздо читабельнее будет всех остальных трикшотов!

  • @DrZlad
    @DrZlad 3 года назад +4

    + не поможет, при : «100%» или «100px» только parseInt поможет. Спасибо за урок! Здоровья Вам!

  • @alexandrsachishin962
    @alexandrsachishin962 3 года назад +3

    насчет оператора нулевого слияния: это новый оператор, без которого можно обойтись условием на condition != undefined. именно != т.к. нестрогое сравнение на undefined также приводит и к null, т.к. nul == undefined вернет true, но null === undefined вернет false

    • @olegkravchenko9655
      @olegkravchenko9655 3 года назад

      condition != null
      Тоже самое, но чуть короче :)

    • @alexandrsachishin962
      @alexandrsachishin962 3 года назад

      @@olegkravchenko9655 да, но лучше undefined: null мы проставляем сами, а undefined показывает, что такого нет вообще, а не то что мы проставили значение на null

  • @user-mq3or4wx9s
    @user-mq3or4wx9s 3 года назад +3

    Гребаные оптимизаторы. Переменные называй однобуквенно ещё для экономии. Вы для какого процессора программируете? Z80 на машкоде? Циклы узкое место для любого процессора, там стоит упирать на оптимизацию, во всех остальных случаях читаемость предпочтительнее.

    • @Watozarato
      @Watozarato 6 месяцев назад

      Поддерживаю

  • @Bxz56Rvp8
    @Bxz56Rvp8 3 года назад +3

    Меня поражает работоспособность Александра, как, где найти столько сил?

  • @gatrianL
    @gatrianL 3 года назад

    это прям золото видос, побольше таких)

  • @user-cc6dj6nh6n
    @user-cc6dj6nh6n 3 года назад

    Люблю этот канал!

  • @user-bt4tp6gw1o
    @user-bt4tp6gw1o 3 года назад +1

    4:40
    if (!d) {
    // сделай что то
    }
    магияяя....

  • @aaz1656
    @aaz1656 3 года назад

    Все доходчиво разжевано. Спасибо.

  • @MrVertu01
    @MrVertu01 3 года назад +2

    Тернарный оператор начал применять после Ваших видео)) попробую что-нибудь оптимизировать в последнем проекте)
    На счет примера #7, в проекте использую EJS и объекты с инфойдля карточек товара/слайдеров/новостей или еще чего-нибудь, что можно вывести в цикле и как раз через forEach прогоняю всегда
    и вопрос, как называется последний метод?)

    • @Maxam5979
      @Maxam5979 3 года назад +2

      Деструктурирующее присваивание

  • @mars_family
    @mars_family 3 года назад

    Спасибо, надеюсь на продолжение

  • @СергейПресняков-о4р
    @СергейПресняков-о4р 3 года назад +3

    Про системы счисления - вот это и плохо в javascript, что язык пытается предполагать за тебя. Тип аргумента не подходит в операции, язык не глядя приведет к строке. Или к числу, как захочет. parseInt - сам как хочет подставляет систему счисления. Полный бардак в языке.

  • @ILyxaFedoseev
    @ILyxaFedoseev 3 года назад

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

  • @МаратБагаутдинов-т1ю
    @МаратБагаутдинов-т1ю 3 года назад +1

    Круто, спасибо.

  • @user-of8ff8vb5o
    @user-of8ff8vb5o 3 года назад

    Полезно. Благодарю.

  • @petrsklyarov9688
    @petrsklyarov9688 3 года назад

    1 пример гораздо лучше, ИМХО, решить через switch:
    switch(roleName) {
    case 'role1' :
    case 'role2' :
    case 'role3' :
    Код...
    Почему лучше, чем поиск в массиве? Это наглядней, и гораздо быстрее рефакторить. Если завтра для role2 надо поменять код на совершенно другой - сразу ясно что и где править и даже условие для выборки роли практически готово - не надо писать ещё один массив и ещё один блок if. Ну и switch обрабатывается быстрее чем if и поиск в массиве

  • @eugeneromanenko5960
    @eugeneromanenko5960 3 года назад

    В вашем примере стрелочная функция checkProp не является полным аналогом обычной функции, так как возвращает либо строку либо false. Обычная же возвращала true or false.

  • @alex_rew
    @alex_rew 3 года назад

    Было бы круто, если бы задачки были по этой теме!

  • @akadox
    @akadox 3 года назад

    Так забавно наблюдать как фронтендер изобретает хеш таблицу и Null Coalescing

  • @jinke5935
    @jinke5935 3 года назад

    Александр, а можете вот также объяснить на примерах в видео-формате в чём разница оптимизации и рефакторинга?

    • @andrewvasiliev4548
      @andrewvasiliev4548 3 года назад +1

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

    • @tordok7158
      @tordok7158 3 года назад +1

      Оптимизация = правильное применение алгоритмов = ускорение кода; Рефакторинг = читабельность = ускорение разработки и расширяемость. У меня так, пока что, в голове.

  • @CptMerkury
    @CptMerkury 3 года назад

    В 6ом примере я бы использовал Number() с регулярным выражением, тогда будет не важно, целые числа, есть ли в них буквы или нет, причем когда parseInt/Float уже не справляются:
    let regx = /[a-z]/g;
    let str = '2.4f';
    console.log(Number(str.replaceAll(regx, ""))) //2.4
    console.log(parseInt(str)) // NaN

    • @CptMerkury
      @CptMerkury 3 года назад

      @@TheKorolariya Так это же число, зачем его через регулярно прогонять. Зависит же от ситуации)
      Тот мой код это не панацея, чисто чтобы быстро избавиться от грязных чисел, не более)

  • @user-jb3cd5uk2j
    @user-jb3cd5uk2j 3 года назад

    класс, спасибо

  • @rauannadirov5935
    @rauannadirov5935 3 года назад

    Здравствуйте! 1 пример:
    const userRole = `guest`;
    switch (userRole){
    case `guest`:
    case `manager`:
    case `affiliate`:
    console.log(`Можно`);
    break;
    }
    Как вам это? плохо или хорошо? или лучше switch использовать только тогда когда у нас есть несколько if?
    Заранее спасибо за ответы и советы!

  • @it-coding
    @it-coding 2 года назад

    цикл с 3мя элементами запустить дороже чем проверку сделать , уж лучше через битовые маски

  • @alien2364
    @alien2364 3 года назад

    а можно потом "в копилочку" видео о деструктуризации сделать?)

  • @deterkot
    @deterkot 2 года назад

    можно зделать вот так:
    const j = 6;
    const h = 7;
    но короче :
    const j = 6,
    h = 7
    можно и дальше так делать)))

  • @antresolweb
    @antresolweb 3 года назад

    Первый принцип программиста - главное не навредить)

    • @andrewvasiliev4548
      @andrewvasiliev4548 3 года назад +1

      Первый принцип программиста: работает - не трогай.

    • @tordok7158
      @tordok7158 3 года назад

      @@andrewvasiliev4548 плохого программиста

  • @ihopeingod1
    @ihopeingod1 Год назад

    🙏🏼

  • @rocket-ua
    @rocket-ua 3 года назад +1

    Ну по поводу стрелочных функций то вся их прелесть не в сокращении написания кола, а в привязке к контексту :) а писать коротко в одну строку функции часто бывает на много менее читабельно и сложнее для понимания, особенно когда на проекте работает несколько человек.

  • @inqvisitor3722
    @inqvisitor3722 3 года назад

    в switch/case своя область видимости + можно объединить несколько case. Пример некорректный

  • @Bercerq
    @Bercerq 3 года назад +1

    10:45 "И если он допустим равен нулю" и ставлю 1, тупо краткий портрет программирования когда кто-то наблюдает

  • @user-lx5vv3uu8u
    @user-lx5vv3uu8u 3 года назад

    Вначале лайк, потом только просмотр. Никак иначе!))

  • @CptMerkury
    @CptMerkury 3 года назад

    А почему в 5ом примере для читаемости нельзя написать так:
    res = typeof t === 'string' ? strCheck(t) : numCheck(t); ?

    • @tordok7158
      @tordok7158 3 года назад

      Вероятно потому что это не читабельно

  • @frichermsd9551
    @frichermsd9551 3 года назад

    14:25 это же ключ, а не индекс. Или я ошибаюсь?

    • @ultraduck100
      @ultraduck100 3 года назад

      Это ключ, да. Дядь Саша оговорился видимо

  • @eugeneshiyan
    @eugeneshiyan 3 года назад

    Превью крутое

  • @DetiZhizni
    @DetiZhizni 3 года назад

    На объекте ржал как сука. Советчик епта

  • @dimageorgiev5798
    @dimageorgiev5798 3 года назад

    😎👍👍👍👍

  • @eugenenovikov671
    @eugenenovikov671 3 года назад

    стрелочная функция не всплывает

  • @danielkhachaturian
    @danielkhachaturian Год назад

    НАМЧЕГ

  • @ИванИванов-ч8з8ы
    @ИванИванов-ч8з8ы 3 года назад

    так это ж рефакторинг, а не оптимизация

    • @no_bs_science
      @no_bs_science 3 года назад

      тут вообще какие-то элементарные вещи, но главное же кликбейтный заголовок

  • @zloy_ax8496
    @zloy_ax8496 3 года назад

    +++

  • @ZeusFly2012
    @ZeusFly2012 3 года назад

    остой полный

    • @tordok7158
      @tordok7158 3 года назад

      Да, в некоторых моментах меня бы уже уволили за такие приколы.