Использование Switch для диапазонов чисел в JavaScript

Быстрый ответ

let x = 25;
let result = x > 20 ? 'Больше 20, прекрасненько' : 
             x > 10 ? 'Больше 10, молодец!' :
             'Не более 10, всё компактно!';
console.log(result);

Тернарный оператор позволяет кратко и лаконично обрабатывать сразу несколько условий сравнения. Это более изящная и компактная альтернатива if-else.

if против switch: когда скорость имеет значение

При обработке диапазонов значений if-выражения обычно являются более эффективными, чем switch. Однако стилистика тоже важна, и некоторым разработчикам switch может казаться более привлекательным. В любом случае можно провести тестирование производительности в различных браузерах и убедиться, что со временем исполнение кода может значительно улучшаться, как это происходит, например, с Chrome в последние годы.

let value = 75;
switch (true) {
    case (value > 50):
        console.log('Перевалили за 50!');
        break;
    case (value > 20):
        console.log('Больше 20, на правильном пути!');
        break;
    default:
        console.log('До 20 или менее, не спешите.');
}

Упорядочивайте case-выражения в правильной последовательности с учетом их сверху вниз оценки, чтобы не пропустить необходимый вариант.

Оптимизация switch: рекомендации по повышению эффективности

Switch может не всегда быть самым быстрым решением, но его производительность можно оптимизировать:

Быстрое прямое сравнение

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

Подробнее об этом расскажет наш спикер на видео

Расположение случаев в соответствии с их частотой появления

Самые часто происходящие сценарии размещайте в начале, чтобы сэкономить время на их обработке.

Использование пользовательских объектов для оценки

Создание объекта с критериями и функциями будет способствовать более эффективному управлению ваших условий.

let ranges = {
    range1: () => x > 20,
    range2: () => x > 10,
    default: () => true
};

for (let key in ranges) {
    if (ranges[key]()) {
        console.log(`Совпадает с ${key}`);
        break;
    }
}

Диапазоны и шаги

Используйте верхний предел и Math.floor() для определения границ, а функции создания каждого диапазона облегчат поддержку кода.

function isInRange(value, min, max) { return value >= min && value < max; }

if (isInRange(value, 0, 10)) {
    // Код для обработки в диапазоне 0-10
} else if (isInRange(value, 10, 20)) {
    // Код для обработки в диапазоне 10-20
}

Визуализация «светофора»: изображения для наглядности

Можно уподобить условия светам светофора:

• case value > 100 — приглашение к действию!
• case value > 50 && value <= 100 — время обдумать!
• case value <= 50 — стоп, изучаем внимательнее!

А если ни один из случаев не подошёл, у нас останется вариант "по умолчанию" (⏺️).

Дополнительные приёмы с switch

Следующие приёмы позволяют расширить применение switch:

• Вложенные тернарные операторы
• Таблицы поиска с использованием объектов или Map
• Применение тернарных операторов непосредственно внутри case-выражений switch

switch (true) {
    case (value > 50):
        console.log(value > 75 ? 'Больше 75 – это высоко!' : 'От 51 до 75 – вполне хорошо!');
        break;
    // другие условия
}

Полезные материалы

1. Руководство по использованию switch в JavaScript на MDN
2. Использование switch с несколькими кейсами – Stack Overflow
3. Инструкция по применению switch – W3Schools
4. Обзор switch-case – TutorialsPoint
5. Создание уникального идентификатора в JavaScript – GitHub Gist
6. Написание чистого кода с использованием таблиц поиска в JavaScript – Codeburst