Использование оператора if в JavaScript

От автора: метки (labels) — это функция, которая существует с момента создания JavaScript. Они не новы! Я не думаю, что многие люди знают о них, и я бы даже сказал, что они немного сбивают с толку. Но, как мы увидим, labels могут быть очень полезны в определенных случаях.

Но сначала: Labels в JavaScript не следует путать с HTML <label>, это совсем другое!

Метки (labels) JavaScript — это способ задания названия оператору или блоку кода (обычно: циклам и условным операторам). Это позволяет вам использовать команды break или continue изнутри. Чтобы применить метку к оператору, напишите метку label: и все, что вы укажете внутри будет доступно по имени метки которое ви прописали, и на которое вы можете ссылаться позже. Вот основной синтаксис метки:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

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

Краткое введение в break и continue

Давайте вернемся немного назад и поговорим об break и continue. Команда break прекращает выполнение текущего цикла или условного оператора. Чаще всего он используется в операторе switch для завершения case, но его также можно использовать для раннего завершения оператора if или также для завершения цикла for или while и прекращения цикла. Это отличный способ выйти из условного оператора или преждевременно завершить цикл.

Вот базовый пример использования break:

Tочно так же оператор continue может использоваться с циклами, чтобы досрочно завершить текущую итерацию и начать следующий запуск цикла. Однако это будет работать только внутри цикла. Пример использования continue:

Использование метки с break

Обычно использования меток необходимо, когда вы работаете с вложенными операторами любого типа. Использование break может немедленно остановить вложенный.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

Вот и все, вы можете пометить оператор if.

Использование метки с continue

Иногда возникали ситуации, когда я создавал вложенный цикл и хотел пропустить некоторые итерации внешнего цикла, находясь внутри внутреннего цикла. Обычно я заканчивал разрыв внутреннего цикла, затем проверял, нахожусь ли я в состоянии, которое хочу пропустить, а затем продолжал внешний цикл. Возможность упростить этот код до более удобного для чтения оператора — это здорово!

Блочные элементы и метки

Блочные элементы JavaScript являются способом охвата переменными const и let только части вашего кода. Это может быть полезно, если вы хотите локализовать некоторые переменные без необходимости создания функции. Вот пример помеченного блочного элемента:

Использование в реальном мире

Мне потребовалось время, чтобы придумать причину использования меток в повседневном производственном коде. Это может быть немного натянуто, но место, где могут пригодиться метки в JavaScript — это ранний выход из цикла, находясь внутри оператора switch. Поскольку вы можете использовать break находясь внутри switch, возможность применить метку к циклу, который завершает его раньше, потенциально может сделать ваш код более эффективным.

Вот как мы можем использовать это в приложении-калькуляторе:

Таким образом, мы можем выйти из цикла calculate, когда условие будет выполнено, вместо того, чтобы позволить скрипту продолжить работу!

Заключение

В редких случаях вам понадобится использовать метки JavaScript. Фактически, вы можете сделать успешную карьеру, даже не подозревая о ее существовании. Но на случай, теперь Вы можете его использовать этот синтаксис при необходимости.

Автор: Alex Riviere

Источник: css-tricks.com

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

Читайте нас в Telegram, VK, Яндекс.Дзен

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

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

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

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

Комментирование закрыто.