Рубрики
Без рубрики

Как писать чистящий Если высказываются в JavaScript

Одна из основных способностей, которые мы имеем при написании кода, – это писать, чтобы все происходило условным. Когда… С тегом WebDev, Codenewbie, JavaScript, новичков.

Одна из основных способностей, которые мы имеем при написании кода, – это писать, чтобы все происходило условным. Говоря о условном коде, часто мы говорим о хороших старых операторах 👍 🏾. Если вы еще не столкнулись, если еще заявления, это вполне нормально! Вы можете думать о них как о том, чтобы сделать разные вещи, в зависимости от того, является ли что -то правдивым или ложным. В JavaScript, если операторы выглядят примерно так:

let isCold = true;
if (isCold === true) {
    console.log("Turn up the heat 🥶!");
} else {
    console.log("It's nice and hot ☀️😎.");
}

В приведенном выше примере вы можете видеть, что что -то другое будет зарегистрировано в консоли в зависимости от переменной, которая является истинной или ложной. Теперь представьте, что если вам нужно, если вам нужно проверить более сложные условия. Как только вы это сделаете, ваши заявления могут стать длиннее и вложенными, как этот:

let isMilkSmelly = false;
let isMilkExpired = false;
let isHavingCereal = true;

if (isMilkSmelly === true) {
    console.log("Ewww 😷");
    if (isMilkExpired === true) {
        console.log("Time for the trash 🗑");
    }
} else if (isHavingCereal === true) {
    console.log("Yay for not smelly milk!");
} else {
    console.log("I just wanted waffles.");
}

Вы можете найти приведенный выше пример не так плохой, но вы можете представить себе все микро-определения, которые мы принимаем при принятии более крупных решений. Одним из примеров может быть представление о том, если вам нужно будет оценить покерную руку.

Имея это в виду, есть много способов, чтобы ваши операторы выглядели чище, и мы собираемся посмотреть на некоторые сейчас!

Tldr

Охраняющие положения : Западные положения – это способ написать, если операторы позволяют нам охранять поток логики в зависимости от того, выполняется ли условие. Обычно это делается путем возвращения после оператора, поэтому функция останавливается, когда условие выполняется. Это полезно, потому что это позволяет нам избегать вложенных операторов.

function getTemperature() {
    return 25;
}

function getBlanket() {
    if (getTemperature() <= 20) return true;
    if (getTemperature() > 20) return false;
}

console.log(getBlanket()) // false

Тернарный оператор : Тройной оператор похож на сокращение для написания, если заявления! У него есть три части, часть первой – это условие, за которым следует вопрос, часть второй – это то, что должно произойти, если условие верно следовать толстой кишкой, а часть третья – это то, что должно произойти, если условие является ложным. Вот пример:

function getTemperature() {
    return 25;
}

function getBlanket() {
    return (getTemperature() <= 20) ? true : false
}

console.log(getBlanket()) // false

Синтаксические советы : Есть несколько более чистых способов, которые JavaScript дает нам из коробки для написания операторов. Вот некоторые примеры:

let isMilkSmelly = false;
let isMilkExpired = false;
let isHavingCereal = true;

// If statements in one line
if (isMilkSmelly === false) { console.log("Yes, it stinks 😷!") }

// With no keyword the if statement will check if the value is true
if (isHavingCereal) { console.log("Yes, let's have some cereal!") }

// If statement without curly brackets
if (isHavingCereal) console.log("Yes, let's have some cereal!");

// Check if condition is not true without false keyword
if (!isMilkSmelly) console.log("Yes, it stinks 😷!");

// Check If else & else-if in one line without curly brackets.
if (isMilkSmelly) console.log("Yes, it stinks 😷!")
else if (isMilkExpired) console.log("No, it's gone bad!")
else console.log("Yes, let's have some cereal!");

Охранники

В JavaScript мы используем ключевое слово return для отправки данных из наших функций, вроде как нажимать кнопку изгнания. Если мы объединим эту функциональность с операторами IF, мы можем получить шаблон, называемый охраняемыми пунктами. Эти охраны позволяют нам писать более краткие, если еще операторы, которые облегчают его код чище и легче читать. Они помогают нам очистить наши высказывания, если иначе, позволяя нам избежать вложенных заявлений о IF. Нет ничего не так с вложенными заявлениями, если; Я использовал их тонны! Тем не менее, как только я узнал о охранниках, я понял, почему бы не сделать мои операторы, если я немного чище 🧼, где я могу. Чтобы сделать это немного яснее, почему бы нам не посмотреть на пример.

    // Without Guard Clause - 9 Lines
    function getBlanket() {
        let isCold;
        if (getTemperature() <= 20) {
            isCold = true;
        } else {
            isCold = false
        }
        return isCold;
    }

    // With Guard Clause - 4 Lines
        function getBlanket() {
            if (getTemperature() <= 20) return true;
            if (getTemperature() >= 20) return false;
        }

Разве это не очень круто! Когда я обнаружил, что охраняет, идея взорвала меня на минуту 🤯. Код может стать действительно сложным, когда дело доходит до условий, а охраны – это лишь один из способов облегчить для себя.

Тройной оператор

Я обещаю, что самое сложное в тройном операторе-это слово «Тернар» (Tur-NR-EE в соответствии с Google 🤔; всегда доставляет мне проблемы 😅). Оператор Tur-NR-EE позволяет нам написать операторы, если еще в одной строке. Давайте посмотрим на пример.

    let isCold = true;

    // Valid Ternary Operator - check is true
    isCold ? console.log("🥶🧊") : console.log("🥵🌞");

Вот визуальный пример, который помечает разные части!

С учетом анатомии еще один крутой факт о тройных операторах заключается в том, что вы можете цепорить их, как если бы Else-IF-заявления! Давайте взглянем:

    let isMilkSmelly = false;
    let isMilkExpired = false;
    let isHavingCereal = true;

    isMilkSmelly ? console.log("Yes, it stinks 😷!")
    : isMilkExpired ? console.log("No, it's gone bad!")
    : isHavingCereal ? console.log("Yes, let's have some cereal !") 
    : console.log("Let's have pancakes!");

Эти цепные тройные операторы работают так же, как и Else-if-блоки, но, поскольку вы можете написать каждое условие, поскольку она является собственной линией, она может сделать ваш код чище и легче проанализировать.

Я думаю, что тройной оператор – отличный инструмент для вашего ремня инструмента программиста. Они дают нам быстрый и чистый способ написать наши заявления, если еще. Однако с его прохлением есть некоторые вещи, которые следует помнить. Например, вы не можете сделать что -то вроде этого:

let isHavingCereal = true;
isHavingCereal ? return console.log("I want cereal!") : return console.log("I want waffles!");

Если вы спрашиваете, почему вы не можете этого сделать, не беспокойтесь, потому что я думал то же самое. Причина, по которой вы не можете сделать это, заключается в том, что все после первого возврата в этом утверждении будет считаться недоступным кодом. Если вы запустили этот код, вы получите ошибку, сказав «Uncaught SyntaxError: Неожиданный токен «возврат».

Синтаксические советы

Наряду с двумя методами, о которых мы говорили до сих пор, есть некоторые общие синтаксические советы, которые мы можем помнить, чтобы сделать наши операторы чище. Мы уже видели некоторые из них в наших предыдущих примерах, но давайте посмотрим на них здесь, чтобы быть явными.

let isMilkSmelly = false;
let isMilkExpired = false;
let isHavingCereal = true;

// If statements in one line
if (isMilkSmelly === false) { console.log("Yes, it stinks 😷!") }

// With no keyword the if statement will check if the value is true
if (isHavingCereal) { console.log("Yes, let's have some cereal!") }

// If statement without curly brackets
if (isHavingCereal) console.log("Yes, let's have some cereal!");

// Check if condition is not true without false keyword
if (!isMilkSmelly) console.log("Yes, it stinks 😷!");

// Check If else & else-if in one line without curly brackets.
if (isMilkSmelly) console.log("Yes, it stinks 😷!")
else if (isMilkExpired) console.log("No, it's gone bad!")
else console.log("Yes, let's have some cereal!");

Там у нас это есть! Охранные положения, тройной оператор и несколько быстрых кончиков синтаксиса. Надеюсь, вы найдете эти полезные (и крутые 😎) в своем путешествии.

Счастливого обучения 😄👋🏾!

Оригинал: “https://dev.to/sandricoprovo/how-to-write-cleaner-if-statements-in-javascript-2c0m”

Читайте ещё по теме: