|
|
|
|
@ -0,0 +1,182 @@
|
|
|
|
|
# Основы JavaScript: ветвление
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
> Скетчноут [Tomomi Imura](https://twitter.com/girlie_mac)
|
|
|
|
|
|
|
|
|
|
## Предлекционный квиз
|
|
|
|
|
|
|
|
|
|
[Предлекционный квиз](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)
|
|
|
|
|
|
|
|
|
|
Ветвление и управление порядком выполнения вашего кода делает ваш код пригодным для повторного использования и надежным. В этом разделе рассматривается синтаксис для управления потоком данных в JavaScript и его значение при использовании с логическими типами данных.
|
|
|
|
|
|
|
|
|
|
[](https://youtube.com/watch?v=SxTp8j-fMMY "Ветвление")
|
|
|
|
|
|
|
|
|
|
> 🎥 Нажмите на изображения выше, чтобы посмотреть видео о ветвлении.
|
|
|
|
|
|
|
|
|
|
> Вы можете пройти этот урок на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-13441-cxa)!
|
|
|
|
|
|
|
|
|
|
## Краткий обзор Булевых переменных
|
|
|
|
|
|
|
|
|
|
Логические (булевы) переменные могут принимать только два значения: `true` (истина) или `false` (ложь). Они помогают принимать решения о том, какие строки кода должны быть исполнены при выполнении определенных условий.
|
|
|
|
|
|
|
|
|
|
Установите для своей булевой переменной значение true или false следующим образом:
|
|
|
|
|
|
|
|
|
|
`let myTrueBool = true`
|
|
|
|
|
`let myFalseBool = false`
|
|
|
|
|
|
|
|
|
|
✅ Булевы переменные названы в честь английского математика, философа и логика Джорджа Буля.(1815–1864).
|
|
|
|
|
|
|
|
|
|
## Операторы сравнения и булевы переменные
|
|
|
|
|
|
|
|
|
|
Операторы сравнения используются для оценки условий путем выполнения сравнений, которые создают логическое значение. Ниже приведен список часто используемых операторов.
|
|
|
|
|
|
|
|
|
|
| Символ | Описание | Пример |
|
|
|
|
|
| ------ | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
|
|
|
|
|
| `<` | **Меньше**: Сравнивает два значения и возвращает `true`, если значение слева меньше, чем справа. | `5 < 6 // true` |
|
|
|
|
|
| `<=` | **Меньше или равно**: Сравнивает два значения и возвращает `true`, если значение слева меньше или равно значению справа. | `5 <= 6 // true` |
|
|
|
|
|
| `>` | **Больше**: Сравнивает два значения и возвращает `true`, если значение слева больше, чем справа. | `5 > 6 // false` |
|
|
|
|
|
| `>=` | **Больше или равно**: Сравнивает два значения и возвращает `true`, если значение слева больше или равно значению справа. | `5 >= 6 // false` |
|
|
|
|
|
| `===` | **Строгое равенство**: Сравнивает два значения и возвращает `true`, если значения справа и слева равны и имеют один и тот же тип данных. | `5 === 6 // false` |
|
|
|
|
|
| `!==` | **Неравенство**: Сравнивает два значения и возвращает логическое значение, противоположное тому, которое вернул бы оператор строгого равенства. | `5 !== 6 // true` |
|
|
|
|
|
|
|
|
|
|
✅ Проверьте свои знания, написав несколько сравнений в консоли браузера. Не удивило ли вас какое-либо из возвращенных значений?
|
|
|
|
|
|
|
|
|
|
## Оператор «if»
|
|
|
|
|
|
|
|
|
|
Оператор `if` будет запускать код внутри своего блока, если условие истинно.
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
if (условие) {
|
|
|
|
|
//Условие было истинным. Код в этом блоке будет исполнен.
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Логические операторы часто используются для формирования условия.
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
let currentMoney;
|
|
|
|
|
let laptopPrice;
|
|
|
|
|
|
|
|
|
|
if (currentMoney >= laptopPrice) {
|
|
|
|
|
//Условие было истинным. Код в этом блоке будет исполнен.
|
|
|
|
|
console.log("Приобретение нового ноутбука!");
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Оператор If..Else
|
|
|
|
|
|
|
|
|
|
Оператор `else` запустит код внутри своего блока, если условие ложно. Это опциональная часть оператора `if`.
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
let currentMoney;
|
|
|
|
|
let laptopPrice;
|
|
|
|
|
|
|
|
|
|
if (currentMoney >= laptopPrice) {
|
|
|
|
|
//Условие было истинным. Код в этом блоке будет исполнен.
|
|
|
|
|
console.log("Приобретение нового ноутбука!");
|
|
|
|
|
} else {
|
|
|
|
|
//Условие было ложным. Код в этом блоке будет исполнен.
|
|
|
|
|
console.log("Пока не могу позволить себе новый ноутбук!");
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
✅ Проверьте свое понимание этого кода, запустив его в консоли браузера. Измените значения переменных currentMoney и laptopPrice, чтобы изменить возвращаемый `console.log()`.
|
|
|
|
|
|
|
|
|
|
## Логические операторы и булевы значения
|
|
|
|
|
|
|
|
|
|
Решения могут потребовать более одного сравнения, которые могут быть связаны вместе логическими операторами для получения общего булевого значения.
|
|
|
|
|
|
|
|
|
|
| Символ | Описание | Пример |
|
|
|
|
|
| ------ | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
|
|
|
|
|
| `&&` | **Логическое И**: Сравнивает два логических выражения. Возвращает true **только**, если обе стороны истинны | `(5 > 6) && (5 < 6 ) //Одна сторона ложна, другая истинна. Возвращает false` |
|
|
|
|
|
| `\|\|` | **Логическое ИЛИ**: Сравнивает два логических выражения. Возвращает true, если хотя бы одна сторона истинна | `(5 > 6) \|\| (5 < 6) //Одна сторона ложна, другая истинна. Возвращает true` |
|
|
|
|
|
| `!` | **Логическое НЕ**: Возвращает противоположное значение логического выражения | `!(5 > 6) // 5 не больше 6, но "!" вернет true` |
|
|
|
|
|
|
|
|
|
|
## Условия и решения с логическими операторами
|
|
|
|
|
|
|
|
|
|
Логические операторы могут использоваться для формирования условий в операторах if..else.
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
let currentMoney;
|
|
|
|
|
let laptopPrice;
|
|
|
|
|
let laptopDiscountPrice = laptopPrice - laptopPrice * 0.2; //Цена ноутбука со скидкой 20 процентов
|
|
|
|
|
|
|
|
|
|
if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
|
|
|
|
|
//Условие было истинным. Код в этом блоке будет исполнен.
|
|
|
|
|
console.log("Getting a new laptop!");
|
|
|
|
|
} else {
|
|
|
|
|
//Условие было ложным. Код в этом блоке будет исполнен.
|
|
|
|
|
console.log("Can't afford a new laptop, yet!");
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Оператор отрицания
|
|
|
|
|
|
|
|
|
|
До сих пор вы видели, как можно использовать оператор if...else для создания условной логики.
|
|
|
|
|
Все, что входит в `if`, должно оцениваться как «истина/ложь». Используя оператор `!`, вы можете _отрицать_ выражение. Это будет выглядеть так:
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
if (!условие) {
|
|
|
|
|
// выполняется, если условие ложно
|
|
|
|
|
} else {
|
|
|
|
|
// выполняется, если условие истинно
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Тернарные выражения
|
|
|
|
|
|
|
|
|
|
`if...else` — не единственный способ выразить логику ветвления. Вы также можете использовать тернарный оператор. Его синтаксис выглядит следующим образом:
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
let variable = условие ? <вернуть это если true> : <вернуть то если false>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Ниже приведен более наглядный пример:
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
let firstNumber = 20;
|
|
|
|
|
let secondNumber = 10;
|
|
|
|
|
let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
✅ Потратьте минуту, чтобы прочитать этот код несколько раз. Вы понимаете, как работают эти операторы?
|
|
|
|
|
|
|
|
|
|
Вышенаписанный код следует понимать следующим образом:
|
|
|
|
|
|
|
|
|
|
- если `firstNumber` больше, чем `secondNumber`
|
|
|
|
|
- тогда присвоить значение `firstNumber` в переменную `biggestNumber`
|
|
|
|
|
- иначе присвоить значение `secondNumber` в переменную `biggestNumber`.
|
|
|
|
|
|
|
|
|
|
Тернарное выражение — это просто компактный способ написания кода ниже:
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
let biggestNumber;
|
|
|
|
|
if (firstNumber > secondNumber) {
|
|
|
|
|
biggestNumber = firstNumber;
|
|
|
|
|
} else {
|
|
|
|
|
biggestNumber = secondNumber;
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 🚀 Челлендж
|
|
|
|
|
|
|
|
|
|
Создайте программу, которая сначала будет написана с помощью оператора if..else, а затем перепишите ее с помощью тернарного оператора. Какой синтаксис вы предпочитаете?
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## Постлекционный квиз
|
|
|
|
|
|
|
|
|
|
[Постлекционный квиз](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)
|
|
|
|
|
|
|
|
|
|
## Обзор и самообучение
|
|
|
|
|
|
|
|
|
|
Подробнее о множестве операторов, доступных пользователю[на MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
|
|
|
|
|
|
|
|
|
|
Пройдите замечательный [поиск оператора](https://joshwcomeau.com/operator-lookup/) Джоша Комо!
|
|
|
|
|
|
|
|
|
|
## Задание
|
|
|
|
|
|
|
|
|
|
[Операторы](assignment.ru.md)
|
OKitel
3 years ago