5 советов по написанию лучших выражений с условными операторами в JavaScript

5 советов по написанию лучших выражений с условными операторами в JavaScript

От автора: когда мы применяем в JavaScript условные операторы, хочется сделать код как можно чище. Вот 5 советов относительно того, как писать лучшие / более чистые условные выражения.

1. Используйте Array.includes для множественных критериев.

Давайте рассмотрим приведенный ниже пример:

На первый взгляд, этот пример выглядит неплохо. Однако, что, если у нас будут другие красные фрукты, скажем, cherry и cranberries? Будем ли мы расширять оператор с помощью других || ?

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Мы можем переписать условие выше, используя Array.includes

Мы извлекаем красные фрукты (условия) в массив. Таким образом, код выглядит более аккуратным.

2. Меньше вложений, раннее возвращение

Давайте расширим предыдущий пример, чтобы включить еще два условия:

если фрукт не предоставлен, выдать ошибку

принимать и выводить количество фруктов, если оно превышает 10.

Посмотрите на этот код, у нас есть:

1 if / else, который отфильтровывает недействительные условия

3 уровня вложенных операторов if (условие 1, 2 и 3)

Общее правило, которое я лично соблюдаю — возвращайте раньше, когда найдены недействительные условия.

Таким образом, мы имеем на один уровень вложенности меньше. Этот стиль кодирования особенно подходит, когда у вас есть длинный оператор if (представьте, что вам нужно прокрутить страницу до самого дна, чтобы узнать, что указывает оператор else, это не круто).

Мы можем дополнительно уменьшить вложенность if, инвертируя условия и возвращая раньше. Посмотрите на условие 2 ниже:

Инвертируя условие 2, мы убираем из кода вложенный оператор. Этот метод полезен, когда у нас длинная логика, и мы хотим прекратить дальнейший процесс, когда условие не выполняется.

Однако такая практика не является жестким требованием. Спросите себя: эта версия (без вложения) лучше / читабельнее предыдущей (условие 2 с вложением)?

Я просто бы оставила предыдущую версию (условие 2 с вложением). Потому что тогда:

код короткий и прямой, он более понятный с вложением

инвертирование условие может быть более трудным для понимания (увеличение когнитивной нагрузки)

Поэтому всегда будьте нацелены на «меньше вложений» и «раннее возвращение», но не переусердствуйте.

3. Используйте параметры функции по умолчанию и деструктурирование

Я думаю, что приведенный ниже код может выглядеть вам знакомым, при работе с JavaScript нам всегда нужно проверить значение на null / undefined и присвоить значение по умолчанию:

Фактически, мы можем исключить переменную q, назначив параметры функции по умолчанию.

Гораздо проще и интуитивнее, не так ли? Обратите внимание, что каждый параметр может иметь собственный параметр функции по умолчанию. Например, мы можем назначить значение по умолчанию для fruit — function test(fruit = ‘unknown’, quantity = 1).

Что, если fruit является объектом? Можем ли мы назначить параметр по умолчанию?

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Посмотрите на пример выше, мы хотим вывести название фрукта, если оно доступно, или мы выводим unknown. Мы можем избежать условной проверки fruit && fruit.name с помощью параметра функции по умолчанию и деструктурирования.

Поскольку нам нужно только свойства name, мы можем деструктурировать параметр с помощью {name}, тогда мы можем в коде использовать name как переменную вместо fruit.name.

Мы также назначаем пустой объект {} в качестве значения по умолчанию. Если мы этого не сделаем, вы получите ошибку при выполнении строки test(undefined): «Cannot destructure property name of ‘undefined’ or ‘null’.», — потому что свойство name не определено.

сли вы не возражаете против использования сторонних библиотек, есть несколько способов сократить проверку на null:

используйте функцию Lodash get

используйте библиотеку с открытым исходным кодом Facebook idx (с Babeljs)

Вот пример использования Lodash:

Здесь вы можете запустить демо-код. Кроме того, если вы являетесь поклонником функционального программирования (FP), вы можете использовать Lodash fp, функциональную версию Lodash (метод изменен на get или getOr).

4. Отдавайте предпочтение Map / литералам объектов, а не оператору switch

Давайте рассмотрим пример ниже, мы хотим вывести фрукты по цвету:

Вышеприведенный код кажется нормальным, но я нахожу его довольно раздутым. Тот же результат может быть достигнут с помощью литерала объекта:

В качестве альтернативы вы можете использовать Map для достижения того же результата:

Map — это тип объекта, доступный с ES2015, который позволяет хранить пару ключа значение.

Стоит ли нам вообще отказаться от оператора switch? Не думаю. Лично я использую литерал объекта, когда это возможно, но я не ставила бы жесткое правило запретить использовать его, если это имеет смысл для вашего сценария.

Рефакторинг синтаксиса

В приведенном выше примере мы можем фактически реорганизовать наш код, чтобы добиться того же результата с помощью Array.filter.

Всегда есть несколько способов добиться того же результата. Мы показали вам 4. Кодирование — это весело!

5. Используйте Array.every и Array.some для полных / частичных критериев

Этот последний совет больше посвящен использованию новой (но не такой уже и новой) функции массивов Javascript для сокращения кода. Посмотрите на код ниже, мы хотим проверить, все ли фрукты красного цвета:

Код такой длинный! Мы можем уменьшить количество строк с помощью Array.every:

Гораздо чище? Аналогичным образом, если мы хотим проверить, является ли какой-либо из фруктов красным, мы можем использовать Array.some.

Заключение

Давайте вместе создавать более читаемый код. Надеюсь, вы узнали что-то новое из этой статьи. Это все. Удачного кодирования!

Автор: Jecelyn Yeen

Источник: https://scotch.io/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Full-Stack практика. Создание JavaScript блога

Создание веб-приложения с нуля на JavaScript, NodeJS, ExpressJS

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree