Не используйте If-Else и Switch в JavaScript, используйте литералы объектов
20 крутых однострочников на JavaScript ☝️
17.01.2022
Понимаем React за 5 минут
18.01.2022
Фото Жака Александру на Unsplash .
Написание сложных условных выражений в JavaScript всегда приводило к созданию довольно запутанного кода. Длинные списки if/else заявлений или switch случаев могут быстро раздуться.
Когда есть несколько условий, считается, что литералы объектов являются наиболее удобочитаемым способом структурирования кода. Давайте посмотрим, как они работают.В качестве примера предположим, что у нас есть функция, которая принимает рифмующуюся сленговую фразу и возвращает ее значение. Используя if/else операторы, это будет выглядеть так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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оператор, который выглядел бы так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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"; } } |
Теперь мы звоним только toLowerCase() один раз, но это все еще не кажется читабельным. switch заявления также могут быть подвержены ошибкам. В этом случае мы просто возвращаем значение, но когда у вас более сложная функциональность, можно легко пропустить breakоператор и внести ошибки.
Альтернатива
Вы можете использовать объект для достижения той же функциональности, что и выше, но гораздо более аккуратным способом. Давайте посмотрим на пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function getTranslationMap(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"; } |
У нас есть объект, где ключи — это условия, а значения — ответы. Затем мы можем использовать обозначение квадратных скобок, чтобы выбрать правильное значение объекта из переданной рифмы.В последней части строки 10 ( ?? “Rhyme not found”) используется нулевое объединение для назначения ответа по умолчанию. Это означает, что если rhymes[rhyme.toLowercase()] есть nullили undefined (но не falseили 0), то возвращается строка по умолчанию «Рифма не найдена». Это важно, потому что мы можем законно захотеть вернуть false или 0 из нашего условного выражения. Например:
|
1 2 3 4 5 6 7 8 9 10 |
function stringToBool(str) { const boolStrings = { "true": true, "false": false, }; return boolStrings[str] ?? "String is not a boolean value"; } |
Это очень надуманный пример, но, он иллюстрирует, как нулевое объединение может помочь избежать появления ошибок!
_____________________
Более сложная логика
Бывают случаи, когда вам может понадобиться выполнить более сложную логику внутри ваших условий. Для этого вы можете передать функцию в качестве значения ключам вашего объекта и выполнить ответ:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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"; } |
Мы выбираем вычисление, которое хотим сделать, и выполняем ответ, передавая два числа. Вы можете использовать необязательную цепочку ( ?.в последней строке кода), чтобы выполнить ответ, только если он определен. В противном случае, перейдите к возвращаемой строке по умолчанию.
Написание условных выражений всегда будет делом вкуса, и в некоторых ситуациях потребуется другой подход. Однако считается, что когда есть несколько условий для проверки, литералы объектов являются наиболее читабельным и поддерживаемым способом.
В данной статье приведен пример, Вы можете попробовать придумать что-то свое. Экспериментируйте!
Источник статьи: https://medium.com/
