Источник: Nuances of Programming
Увидев в проекте на Angular или React устаревший код JavaScript, код-ревьюер сразу определит, что разработчик — новичок. Но если вы воспользуетесь 3 советами из статьи, вас будут считать профессионалом по современному JavaScript. Итак, начнем наше путешествие!
Как использовать spread
Оператор spread … — мой любимый в JavaScript. В основном я использую его в трех случаях:
- создание копии массива
- расширение массива
- расширение объекта
Дополнение: получив некоторые комментарии читателей, хочу обратить внимание на один момент. Если мы обрабатываем много данных для создания больших массивов, лучше не использовать оператор spread , а выполнять изменения на месте.
Как проверить значения null
Помните ли вы свою первую проверку значений null ? Я до сих пор не могу забыть свой старый код в проекте на JEE, когда JavaScript еще не был настолько развит:
А теперь меня спасает простое if :
Условие if будет истинным, если foo не: пустые строки, 0 , null , undefined , NaN , или false .
Наряду с if использование опциональной последовательности и нулевого слияния сделает код более чистым.
Опциональная последовательность ?. — это безопасный способ доступа к свойствам вложенных объектов. Иными словами, вам не нужно несколько раз проверять null , когда у объекта длинная цепочка значений.
На следующем примере показано, как узнать, имеет ли почтовый индекс адреса клиента значение null :
Нулевое слияние ?? — не совсем новая функция, но синтаксис упрощает. Он возвращает первый аргумент, если он не null / undefined , иначе — второй.
В приведенном ниже коде будет показано сообщение, если оно не null / undefined , иначе — фраза «добро пожаловать».
Особенно хорошо использовать ?? в последовательности:
В этом примере будет отображаться firstName , если оно не null / undefined , в противном случае будет показано lastName , если оно не null / undefined . А если два первых значения равны null / undefined , то появится‘anonymous’ .
Как использовать .map() , .reduce(), и .filter()
Да, речь идёт о мощных техниках функционального и реактивного программирования! Когда несколько лет назад я впервые использовала такой подход, мне открылись новые горизонты. Каждый раз, когда я смотрю на эти простые инструкции, то до сих пор поражаюсь их красоте.
Одна из основ функционального программирования — списки и операции. Я приведу пример рефакторинга с тремя наиболее известными операциями: map , reduce и filter .
Допустим, до появления Covid-19 семья из Японии приехала на отдых в Париж. Они купили в магазине продукты и предметы первой необходимости. Но цены на все товары в евро. А они хотели узнать цену каждого товара, а также общую стоимость продуктов в японских йенах.
Мы знаем, что 1 евро равен 126 йенам. Используя традиционный подход, мы вычислим это с помощью классического цикла:
Без объяснений все выглядит не очень понятно. Но с нашими волшебными функциональными операциями код расскажет историю!
map преобразует всю стоимость из евро в йену, filter удалит непродовольственные товары, а reduce добавит цену каждого продукта к общей сумме.
Дополнение: несколько активных читателей заметили, что при преобразовании йены использование map , filter и reduce будет повторять массив 3 раза. Но поскольку временная сложность алгоритма остается O(N), это не повлияет на производительность обычного приложения. Я сделала такой рефакторинг для приложения со значительным объемом данных, и проблем с производительностью не возникло. Однако я полностью согласна с тем, что мы должны быть предельно осторожны с очень большими данными.
Читайте также:
Перевод статьи Zhichuan JIN : 3 small tips to become Master Yoda of modern JavaScript