|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "f7009631b73556168ca435120a231c98",
|
|
|
"translation_date": "2025-08-28T23:20:19+00:00",
|
|
|
"source_file": "2-js-basics/3-making-decisions/README.md",
|
|
|
"language_code": "ru"
|
|
|
}
|
|
|
-->
|
|
|
# Основы JavaScript: принятие решений
|
|
|
|
|
|
|
|
|
|
|
|
> Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac)
|
|
|
|
|
|
## Викторина перед лекцией
|
|
|
|
|
|
[Викторина перед лекцией](https://ff-quizzes.netlify.app/web/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-77807-sagibbon)!
|
|
|
|
|
|
## Краткий обзор булевых значений
|
|
|
|
|
|
Булевы значения могут принимать только два значения: `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 (condition) {
|
|
|
//Condition is true. Code in this block will run.
|
|
|
}
|
|
|
```
|
|
|
|
|
|
Логические операторы часто используются для формирования условия.
|
|
|
|
|
|
```javascript
|
|
|
let currentMoney;
|
|
|
let laptopPrice;
|
|
|
|
|
|
if (currentMoney >= laptopPrice) {
|
|
|
//Condition is true. Code in this block will run.
|
|
|
console.log("Getting a new laptop!");
|
|
|
}
|
|
|
```
|
|
|
|
|
|
## Оператор if..else
|
|
|
|
|
|
Оператор `else` выполнит код внутри своих блоков, если условие ложно. Он является необязательным в сочетании с оператором `if`.
|
|
|
|
|
|
```javascript
|
|
|
let currentMoney;
|
|
|
let laptopPrice;
|
|
|
|
|
|
if (currentMoney >= laptopPrice) {
|
|
|
//Condition is true. Code in this block will run.
|
|
|
console.log("Getting a new laptop!");
|
|
|
} else {
|
|
|
//Condition is false. Code in this block will run.
|
|
|
console.log("Can't afford a new laptop, yet!");
|
|
|
}
|
|
|
```
|
|
|
|
|
|
✅ Проверьте свое понимание этого кода и следующего кода, запустив его в консоли браузера. Измените значения переменных currentMoney и laptopPrice, чтобы изменить результат `console.log()`.
|
|
|
|
|
|
## Оператор switch
|
|
|
|
|
|
Оператор `switch` используется для выполнения различных действий в зависимости от различных условий. Используйте оператор `switch`, чтобы выбрать один из множества блоков кода для выполнения.
|
|
|
|
|
|
```javascript
|
|
|
switch (expression) {
|
|
|
case x:
|
|
|
// code block
|
|
|
break;
|
|
|
case y:
|
|
|
// code block
|
|
|
break;
|
|
|
default:
|
|
|
// code block
|
|
|
}
|
|
|
```
|
|
|
|
|
|
```javascript
|
|
|
// program using switch statement
|
|
|
let a = 2;
|
|
|
|
|
|
switch (a) {
|
|
|
case 1:
|
|
|
a = "one";
|
|
|
break;
|
|
|
case 2:
|
|
|
a = "two";
|
|
|
break;
|
|
|
default:
|
|
|
a = "not found";
|
|
|
break;
|
|
|
}
|
|
|
console.log(`The value is ${a}`);
|
|
|
```
|
|
|
|
|
|
✅ Проверьте свое понимание этого кода и следующего кода, запустив его в консоли браузера. Измените значение переменной a, чтобы изменить результат `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; //Laptop price at 20 percent off
|
|
|
|
|
|
if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
|
|
|
//Condition is true. Code in this block will run.
|
|
|
console.log("Getting a new laptop!");
|
|
|
} else {
|
|
|
//Condition is true. Code in this block will run.
|
|
|
console.log("Can't afford a new laptop, yet!");
|
|
|
}
|
|
|
```
|
|
|
|
|
|
### Оператор отрицания
|
|
|
|
|
|
Вы уже видели, как можно использовать оператор `if...else` для создания условной логики. Все, что помещается в `if`, должно оцениваться как true/false. Используя оператор `!`, вы можете _отрицать_ выражение. Это будет выглядеть так:
|
|
|
|
|
|
```javascript
|
|
|
if (!condition) {
|
|
|
// runs if condition is false
|
|
|
} else {
|
|
|
// runs if condition is true
|
|
|
}
|
|
|
```
|
|
|
|
|
|
### Тернарные выражения
|
|
|
|
|
|
`if...else` — это не единственный способ выразить логику принятия решений. Вы также можете использовать так называемый тернарный оператор. Его синтаксис выглядит следующим образом:
|
|
|
|
|
|
```javascript
|
|
|
let variable = condition ? <return this if true> : <return this if false>
|
|
|
```
|
|
|
|
|
|
Ниже приведен более наглядный пример:
|
|
|
|
|
|
```javascript
|
|
|
let firstNumber = 20;
|
|
|
let secondNumber = 10;
|
|
|
let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
|
|
|
```
|
|
|
|
|
|
✅ Потратьте минуту, чтобы несколько раз прочитать этот код. Понимаете ли вы, как работают эти операторы?
|
|
|
|
|
|
В приведенном выше примере говорится:
|
|
|
|
|
|
- если `firstNumber` больше, чем `secondNumber`
|
|
|
- тогда присвойте `firstNumber` переменной `biggestNumber`
|
|
|
- иначе присвойте `secondNumber`.
|
|
|
|
|
|
Тернарное выражение — это просто компактный способ записи следующего кода:
|
|
|
|
|
|
```javascript
|
|
|
let biggestNumber;
|
|
|
if (firstNumber > secondNumber) {
|
|
|
biggestNumber = firstNumber;
|
|
|
} else {
|
|
|
biggestNumber = secondNumber;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
---
|
|
|
|
|
|
## 🚀 Задание
|
|
|
|
|
|
Создайте программу, которая сначала написана с использованием логических операторов, а затем перепишите ее, используя тернарное выражение. Какой синтаксис вам больше нравится?
|
|
|
|
|
|
---
|
|
|
|
|
|
## Викторина после лекции
|
|
|
|
|
|
[Викторина после лекции](https://ff-quizzes.netlify.app/web/quiz/12)
|
|
|
|
|
|
## Обзор и самостоятельное изучение
|
|
|
|
|
|
Прочитайте больше о множестве доступных операторов [на MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
|
|
|
|
|
|
Ознакомьтесь с замечательным [справочником операторов](https://joshwcomeau.com/operator-lookup/) от Джоша Комо!
|
|
|
|
|
|
## Задание
|
|
|
|
|
|
[Операторы](assignment.md)
|
|
|
|
|
|
---
|
|
|
|
|
|
**Отказ от ответственности**:
|
|
|
Этот документ был переведен с использованием сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Хотя мы стремимся к точности, пожалуйста, учитывайте, что автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода. |
