От автора: метки (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++;
}
Метки являются только внутренней ссылкой на оператор и не могут быть найдены, экспортированы или сохранены как значение. Они также не конфликтуют с именами переменных, поэтому, если вы хотите запутать людей, вы можете создать цикл и переменную с тем же именем! Пожалуйста, не делайте этого - в будущем вы и все, кому придется читать ваш код, это оцените. Сценарии использования меток ограничены, но в умелых руках они невероятно эффективны.
Краткое введение в 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!'
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
Использование метки с 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!');
}
Вот и все, вы можете пометить оператор 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
}
Блочные элементы и метки
Блочные элементы 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);
Использование в реальном мире
Мне потребовалось время, чтобы придумать причину использования меток в повседневном производственном коде. Это может быть немного натянуто, но место, где могут пригодиться метки в 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. }
}
Таким образом, мы можем выйти из цикла calculate, когда условие будет выполнено, вместо того, чтобы позволить скрипту продолжить работу!
Заключение
В редких случаях вам понадобится использовать метки JavaScript. Фактически, вы можете сделать успешную карьеру, даже не подозревая о ее существовании. Но на случай, теперь Вы можете его использовать этот синтаксис при необходимости.
Автор: Alex Riviere
Источник: css-tricks.com
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен
