Добро пожаловать обратно! Надеюсь, вам стало комфортно знакомиться с JS и разбираться в доступных нам типах. Сегодня мы увидим довольно много кода и поработаем над одной из фундаментальных тем программирования: условными выражениями.
Очень часто при написании кода вы хотите что-то сделать на основе решения, и условные операторы помогают нам сделать именно это. В JavaScript нам доступны четыре условных оператора:
- if — используйте для запуска блока кода, если заданное условие истинно.
- else — используйте для запуска блока кода, если одно и то же условие ложно
- else…if — используйте, чтобы указать новое условие, чтобы проверить, является ли первое ложным.
- switch — используйте, когда есть много альтернативных блоков кода.
Прежде чем мы прыгнем, нам нужно понять, чтобы понять пару вещей.
Правда против Фолси
Когда условное выражение выполняется, оно оценивается как истинное или ложное, поэтому знание того, что является ложным в JS, будет очень полезно для написания нашей логики.
Вот пять ложных значений в javascript:
- ““ — пустая строка
- undefined — переменная без связанного с ней значения.
- null — пустое значение
- NaN — не число
- false — конечно!
Все остальное верно. Довольно просто, правда?!
== vs ===
Как вы могли подумать, оба этих оператора указывают на тип равенства. двойное равенство == будет оценивать, равны ли значения. Это иногда называют мелкими равными. Он автоматически принуждает типы к совпадению, а затем оценивает, совпадают ли значения. Иногда это может привести к нежелательному поведению, поэтому мы используем triple equals ===, чтобы быть более критичными в нашей оценке, которая проверяет одинаковый тип и значение. Это иногда называют строгим равенством.
Если бы мы использовали только одно равенство, это означало бы, что мы хотим установить значение, равное чему-то, чего мы, скорее всего, не хотим в нашем условном выражении. Скорее всего, мы просто хотим проверить, равны ли два значения. Давайте посмотрим на быстрый пример:
var word = '5'; var number = 5; word == number // true word === number // false
Здесь мы только что видели, как JavaScript автоматически преобразовывал типы перед сравнением в двойном равенстве. Важно понять это поведение. Давайте еще раз проясним, что JS делает под капотом:
var word = '5'; var number = 5; Number(word); // 5 number.toString(); '5' // + operator shorthand for converting string to number +word; // 5 // Let's create a better visual for what's happening. word == number '5' == '5' // true word === number '5' === 5 // false // It's slightly more complicated than this, // but this should paint the necessary picture for our purposes.
Круто, теперь мы убрали эти несколько предостережений и можем погрузиться в написание некоторых условных выражений.
Условные
Давайте посмотрим на оператор if:
// syntax
if (condition) {
// do something
}
Мы используем if, чтобы сделать что-то, только если условие истинно. Если у меня есть хотя бы 5 долларов в кошельке, я собираюсь купить кофе. Превратим это в оператор if.
// if wallet contains at least $5, buy a coffee
var wallet = 10;
function buyCoffee() {
console.log(“I’m going to buy a coffee.”);
}
if (wallet >= 5) { // true
buyCoffee(); // “I’m going to buy a coffee.”
}
В приведенном выше примере условное выражение состоит в том, является ли бумажник больше или равным 5. Значение бумажника равно 10, поэтому условное выражение оценивается как истинное. Поскольку это было правдой, наш кодовый блок был выполнен, и функция buyCoffee была вызвана, выведя на консоль сообщение «Я собираюсь выпить кофе». Давайте сделаем это немного умнее и добавим логику, чтобы что-то делать, если у нас нет 5 долларов. Мы можем сделать это с помощью оператора else, который используется, чтобы что-то сделать, если условие оценивается как ложное.
// syntax
if (condition) {
// if condition is true do this
} else {
// if condition is false do this
}
// if wallet contains at least $5, buy a coffee,
// else do not buy a coffee.
function buyCoffee() {
console.log(“Yay for coffee!”);
}
function noCoffee() {
console.log(“Boo, we can’t afford coffee today.”);
}
var wallet = 1;
if (wallet >= 5) { // evaluates to false and runs else block
buyCoffee();
} else {
noCoffee(); // “Boo, we can’t afford coffee today.”
}
Облом, без кофе! Посмотрим, почему нет. Оглядываясь назад, мы видим, что условие оценено как ложное, пропущено блок if, выполнен поиск следующего за ним блока else, найдено и выполнено еще блок.
Теперь я хочу маффин и кофе. Давайте посмотрим, как мы можем написать наш код для выполнения логики для нескольких ситуаций. Вступает else…if.
// syntax
if (condition1) {
// if condition1 is true do this
} else if (condition2) {
// if condition1 is false and condition2 is true do this
} else {
// if both condition1 and condition2 are false do this
}
// if wallet contains at least $20 buy a coffee and bagel.
// if not check if we have at least $5, and if so, buy a coffee.
// if we have failed thus far, call noCoffee, and we get nothing.
function buyCoffee() {
console.log(“Yay for coffee!”);
}
function buyMuffin() {
console.log(“Lemon poppyseed muffins are yum!”);
}
function noCoffee() {
console.log(“Boo, we can’t afford coffee today.”);
}
var wallet = 100; // yeah, we be rollin’
if (wallet >= 20) { // true so this block runs
buyCoffee(); // “Yay for coffee!”
buyMuffin(); // “Lemon poppyseed muffins are yum!”
} else if (wallet >= 5) {
buyCoffee();
} else {
noCoffee();
}
В приведенном выше примере мы использовали оператор else…if, чтобы создать условие для оценки того, было ли первое условие ложным. В нашем примере у нас было 100 долларов, из-за чего первое условие оценивалось как истинное и запускало первый блок. Когда блок запускается, он не запускает другие блоки else или else…if. Если бы у нас было 10 долларов, первое условие было бы ложным, и оно перешло бы ко второму условию в else…if, оценивалось бы как истинное и вызывало бы функцию buyCoffee. Из-за этой природы у нас могут быть некоторые пользовательские ошибки в порядке условных выражений, как описано ниже.
// I’ve switched the conditionals and left everything else the same.
function buyCoffee() {
console.log(“Yay for coffee!”);
}
function buyMuffin() {
console.log(“Lemon poppyseed muffins are yum!”);
}
function noCoffee() {
console.log(“Boo, we can’t afford coffee today.”);
}
var wallet = 100; // still rollin’
if (wallet >= 5) { // true
buyCoffee(); // “Yay for coffee!”
} else if (wallet >= 20) {
buyCoffee();
buyMuffin();
} else {
noCoffee();
}
Мы можем видеть важность упорядочения наших условных операторов, и если не быть осторожным, это может привести к нежелательному поведению, например, упустить наш кекс. Выше у нас достаточно денег, чтобы купить кофе и маффин, но так как наше первое условное выражение оценивается как истинное и мы купили только кофе, второе условное выражение никогда не оценивалось, и нам остается только мечтать о нашем лимонном маффине с маком.
Наконец, условные операторы могут использовать преимущества логических операторов, оценивая несколько выражений и возвращая логическое значение в условии. Давайте посмотрим на это в действии.
// if I have at least $5 and I’m feeling hungry, buy a muffin
// else buy a coffee
var wallet = 5;
var feeling = “hungry”;
function buyCoffee() {
console.log(“Yay for coffee!”);
}
function buyMuffin() {
console.log(“Lemon poppyseed muffins are yum!”);
}
if ( wallet >= 5 && feeling == “hungry” ) {
buyMuffin(); // “Lemon poppyseed muffins are yum!”
} else {
buyCoffee();
}
Как вы, возможно, заметили, условные операторы невероятно полезны и важны для успеха разработчиков, и если вы хотите запустить блок кода только при определенных условиях, то это способ сделать это. Поэкспериментируйте с if, else, и else…if. Завтра мы продолжим условные операторы с оператором switch.
