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

Дата публикации: 2021-05-31

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

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

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

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

let x = 0;

// Label a loop as "myLoop"

myLoop:

while (true) {

if (x >= 10) {

// This will cause "myLoop" to end.

break myLoop;

}

x++;

}

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

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

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

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

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!'

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:

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

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 может немедленно остановить вложенный.

// 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!');
}

// 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!');

}

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

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

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

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
}

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 только части вашего кода. Это может быть полезно, если вы хотите локализовать некоторые переменные без необходимости создания функции. Вот пример помеченного блочного элемента:

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

// 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, возможность применить метку к циклу, который завершает его раньше, потенциально может сделать ваш код более эффективным.

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

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.
  }
}

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

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

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

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

Метки: JavaScript