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

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

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

JavaScript
let x = 0;
// Label a loop as «myLoop»
myLoop:
while (true) {
if (x >= 10) {
// This will cause «myLoop» to end.
break myLoop;
}
x++;
}

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

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

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

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

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

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

JavaScript
const x = 1;
switch(x) {
case 1:
console.log(‘On your mark!’);
break; // Doesn’t check the rest of the switch statement if 1 is true
case 2:
console.log(‘Get set!’);
break; // Doesn’t check the rest of the switch statement if 2 is true
case 3:
console.log(‘GO!’);
break; // Doesn’t check the rest of the switch statement if 3 is true
}
// logs: ‘On your mark!’

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

JavaScript
for (let x = 0; x &< 10; x++) {
if (x !== 5) continue; // If the number isn’t five, go to the next pass of the loop.
console.log(x);
}
// logs: 5

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

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

JavaScript
// Our outer if statement
outerIf:
if (true) {
// Our inner if statement
innerIf:
if (true) {
break outerIf; // Immediately skips to the end of the outer if statement
}
console.log(‘This never logs!’);
}

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

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

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

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

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

JavaScript
let x = 0;
outerLoop:
while (x < 10) {
x++;
for (let y = 0; y < x; y++) {
// This will jump back to the top of outerLoop
if (y === 5) continue outerLoop;
console.log(x,y);
}
console.log(‘—-‘); // This will only happen if x < 6
}

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

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

JavaScript
// This example throws a syntax error in an ES module
const myElement = document.createElement(‘p’);
myConditionalBlock: {
const myHash = window.location.hash;
// escape the block if there is not a hash.
if (!myHash) break myConditionalBlock;
myElement.innerText = myHash;
}
console.log(myHash); // undefined
document.body.appendChild(myElement);

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

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

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

JavaScript
const calculatorActions = [
{ action: «ADD», amount: 1 },
{ action: «SUB», amount: 5 },
{ action: «EQ» },
{ action: «ADD», amount: 10 }
];

let el = {};
let amount = 0;
calculate: while (el) {
// Remove the first element of the calculatorActions array
el = calculatorActions.shift();
switch (el.action) {
case «ADD»:
amount += el.amount;
break; // Breaks the switch
case «SUB»:
amount -= el.amount;
break; // Breaks the switch
case «EQ»:
break calculate; // Breaks the loop
default:
continue calculate; // If we have an action we don’t know, skip it.
}
}

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

Заключение

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

Автор: Alex Riviere

Источник: webformyself.com