Сложные условия в JavaScript могут привести к созданию запутанного и плохо читаемого кода. Длинные цепочки инструкций if/else или switch часто становятся громоздкими и трудными для сопровождения. В этой статье мы рассмотрим более элегантный способ управления условиями с использованием объектных литералов.
Рассмотрим функцию, которая принимает фразу и возвращает слово, рифмующееся с этой фразой:
function getTranslation(rhyme) {
if (rhyme.toLowerCase() === "apples and pears") {
return "Stairs";
} else if (rhyme.toLowerCase() === "hampstead heath") {
return "Teeth";
} else if (rhyme.toLowerCase() === "loaf of bread") {
return "Head";
} else if (rhyme.toLowerCase() === "pork pies") {
return "Lies";
} else if (rhyme.toLowerCase() === "whistle and flute") {
return "Suit";
}
return "Rhyme not found";
}
Код выглядит громоздким, и метод toLowerCase() повторяется несколько раз. Для улучшения читаемости и уменьшения повторений можно использовать switch:
Пример использования switch
function getTranslation(rhyme) {
switch (rhyme.toLowerCase()) {
case "apples and pears":
return "Stairs";
case "hampstead heath":
return "Teeth";
case "loaf of bread":
return "Head";
case "pork pies":
return "Lies";
case "whistle and flute":
return "Suit";
default:
return "Rhyme not found";
}
}
Хотя этот код лучше, он все еще не идеален. Switch-блоки подвержены ошибкам из-за отсутствия оператора break.
Решение с использованием объектных литералов
Использование объектов для хранения условий и их значений является более элегантным и удобным способом:
function getTranslation(rhyme) {
const rhymes = {
"apples and pears": "Stairs",
"hampstead heath": "Teeth",
"loaf of bread": "Head",
"pork pies": "Lies",
"whistle and flute": "Suit",
};
return rhymes[rhyme.toLowerCase()] ?? "Rhyme not found";
}
В этом примере объект используется для хранения условий и их соответствующих значений. Оператор нулевого слияния (??) возвращает значение по умолчанию, если условие не найдено.
Пример использования нулевого слияния
Оператор нулевого слияния возвращает значение правого операнда, если левый равен null или undefined. Это полезно, когда нужно вернуть значения false или 0:
function stringToBool(str) {
const boolStrings = {
"true": true,
"false": false,
};
return boolStrings[str] ?? "String is not a boolean value";
}
Более сложные условия с функциями
Для более сложной логики можно использовать функции в качестве значений объекта:
function calculate(num1, num2, action) {
const actions = {
add: (a, b) => a + b,
subtract: (a, b) => a - b,
multiply: (a, b) => a * b,
divide: (a, b) => a / b,
};
return actions[action]?.(num1, num2) ?? "Calculation is not recognised";
}
Здесь оператор опциональной последовательности (?.) используется для выполнения функции, если она существует, а оператор нулевого слияния возвращает значение по умолчанию, если действие не распознано.
Заключение
Объектные литералы — это мощный инструмент для управления сложными условиями в JavaScript. Они делают код более читаемым, структурированным и легко поддерживаемым. Используйте этот подход, чтобы улучшить качество вашего кода и избежать типичных ошибок, связанных с if/else и switch.
Визуальный пример
Вот наглядная иллюстрация, которая отражает концепцию использования объектных литералов для управления сложными условиями в JavaScript:
Это изображение помогает понять, как эффективно использовать объектные литералы для управления сложными условиями и улучшения читаемости кода.
