Close

1 июня, 2021

Использование оператора 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++;
}

12345678910 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!’

12345678910111213 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

12345 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!’);
}

12345678910 // Our outer if statementouterIf: 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
}

1234567891011 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);

12345678910 // This example throws a syntax error in an ES moduleconst 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); // undefineddocument.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.
}
}

12345678910111213141516171819202122232425 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

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

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

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

Яндекс.Метрика
Открыть чат
Если есть вопросы пишите нам
Здравствуйте.
Чем вам помочь?