23 KiB

Raw Blame History Unescape Escape

Основы JavaScript: принятие решений

Скетчноут от Tomomi Imura

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

Так же, как Аналитическая машина Чарльза Бэббиджа была разработана для выполнения различных последовательностей операций в зависимости от условий, современные программы на JavaScript должны принимать решения, основываясь на изменяющихся обстоятельствах. Эта способность ветвиться и принимать решения превращает статичный код в отзывчивые, интеллектуальные приложения.

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

Тест перед лекцией

Способность принимать решения и управлять потоком программы является фундаментальным аспектом программирования. В этом разделе рассматривается, как управлять путем выполнения ваших программ на JavaScript, используя логические значения и условную логику.

🎥 Нажмите на изображение выше, чтобы посмотреть видео о принятии решений.

Вы можете пройти этот урок на Microsoft Learn!

Краткий обзор логических значений

Прежде чем изучать принятие решений, давайте вспомним логические значения из нашего предыдущего урока. Названные в честь математика Джорджа Буля, эти значения представляют собой бинарные состояния – либо 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.
}

Условие помещается в круглые скобки, и если оно равно true, JavaScript выполняет код внутри фигурных скобок. Если оно равно false, JavaScript просто пропускает весь этот блок.

Вы часто будете использовать операторы сравнения для создания этих условий. Давайте посмотрим практический пример:

let currentMoney = 1000;
let laptopPrice = 800;

if (currentMoney >= laptopPrice) {
  // Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
}

Поскольку 1000 >= 800 оценивается как true, код внутри блока выполняется, выводя в консоль «Покупаю новый ноутбук!».

Оператор if..else

Но что, если вы хотите, чтобы ваша программа делала что-то другое, когда условие ложно? Вот тут-то и появляется else – это как запасной план.

Оператор else дает вам возможность сказать: «если это условие не истинно, сделай вместо этого что-то другое».

let currentMoney = 500;
let laptopPrice = 800;

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!");
}

Теперь, поскольку 500 >= 800 равно false, JavaScript пропускает первый блок и выполняет вместо этого блок else. В консоли вы увидите «Пока не могу позволить себе новый ноутбук!».

✅ Проверьте свое понимание этого кода и следующего кода, запустив его в консоли браузера. Измените значения переменных currentMoney и laptopPrice, чтобы изменить возвращаемый console.log().

Оператор switch

Иногда вам нужно сравнить одно значение с несколькими вариантами. Хотя вы могли бы связать несколько операторов if..else, такой подход становится громоздким. Оператор switch предоставляет более чистую структуру для обработки нескольких дискретных значений.

Концепция напоминает механические переключающие системы, использовавшиеся в ранних телефонных станциях – одно входное значение определяет, какой конкретный путь выполнения будет выбран.

switch (expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

Вот как это устроено:

JavaScript оценивает выражение один раз
Оно просматривает каждый case, чтобы найти совпадение
Когда оно находит совпадение, выполняет этот блок кода
break говорит JavaScript остановиться и выйти из switch
Если ни один из случаев не совпадает, выполняется блок default (если он есть)

// Program using switch statement for day of week
let dayNumber = 2;
let dayName;

switch (dayNumber) {
  case 1:
    dayName = "Monday";
    break;
  case 2:
    dayName = "Tuesday";
    break;
  case 3:
    dayName = "Wednesday";
    break;
  default:
    dayName = "Unknown day";
    break;
}
console.log(`Today is ${dayName}`);

В этом примере JavaScript видит, что dayNumber равно 2, находит соответствующий case 2, устанавливает dayName как «Вторник» и затем выходит из switch. Результат? В консоли отображается «Сегодня вторник».

✅ Проверьте свое понимание этого кода и следующего кода, запустив его в консоли браузера. Измените значения переменной a, чтобы изменить возвращаемый console.log().

Логические операторы и логические значения

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

Эти операторы позволяют создавать сложную условную логику, комбинируя простые оценки true/false.

Символ	Описание	Пример
`&&`	Логическое И: сравнивает два логических выражения. Возвращает true только если обе стороны истинны	`(5 > 3) && (5 < 10) // Обе стороны истинны. Возвращает true`
`\|\|`	Логическое ИЛИ: сравнивает два логических выражения. Возвращает true, если хотя бы одна сторона истинна	`(5 > 10) \|\| (5 < 10) // Одна сторона ложна, другая истинна. Возвращает true`
`!`	Логическое НЕ: возвращает противоположное значение логического выражения	`!(5 > 10) // 5 не больше 10, поэтому "!" делает это true`

Эти операторы позволяют комбинировать условия полезными способами:

И (&&) означает, что оба условия должны быть истинными
ИЛИ (||) означает, что хотя бы одно условие должно быть истинным
НЕ (!) переворачивает true на false (и наоборот)

Условия и решения с логическими операторами

Давайте посмотрим, как эти логические операторы работают на более реалистичном примере:

let currentMoney = 600;
let laptopPrice = 800;
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 false. Code in this block will run.
  console.log("Can't afford a new laptop, yet!");
}

В этом примере: мы рассчитываем цену со скидкой 20% (640), затем оцениваем, покрывают ли наши доступные средства либо полную цену, либо цену со скидкой. Поскольку 600 соответствует порогу цены со скидкой 640, условие оценивается как true.

Оператор отрицания

Иногда проще думать о том, когда что-то НЕ является истинным. Например, вместо того, чтобы спрашивать «Пользователь вошел в систему?», вы можете спросить «Пользователь НЕ вошел в систему?» Оператор восклицательного знака (!) переворачивает логику за вас.

if (!condition) {
  // runs if condition is false
} else {
  // runs if condition is true
}

Оператор ! похож на выражение «наоборот...» – если что-то является true, ! делает это false, и наоборот.

Тернарные выражения

Для простых условных присваиваний JavaScript предоставляет тернарный оператор. Этот лаконичный синтаксис позволяет записать условное выражение в одной строке, что полезно, когда нужно присвоить одно из двух значений на основе условия.

let variable = condition ? returnThisIfTrue : returnThisIfFalse;

Это читается как вопрос: «Это условие истинно? Если да, используйте это значение. Если нет, используйте то значение».

Ниже приведен более наглядный пример:

let firstNumber = 20;
let secondNumber = 10;
let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;

✅ Потратьте минуту, чтобы несколько раз прочитать этот код. Понимаете ли вы, как работают эти операторы?

Вот что говорит эта строка: «firstNumber больше, чем secondNumber? Если да, поместите firstNumber в biggestNumber. Если нет, поместите secondNumber в biggestNumber».

Тернарный оператор – это просто более короткий способ записи традиционного оператора if..else:

let biggestNumber;
if (firstNumber > secondNumber) {
  biggestNumber = firstNumber;
} else {
  biggestNumber = secondNumber;
}

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

🚀 Задание

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

Задание с GitHub Copilot Agent 🚀

Используйте режим Agent, чтобы выполнить следующее задание:

Описание: Создайте комплексный калькулятор оценок, который демонстрирует несколько концепций принятия решений из этого урока, включая операторы if-else, switch, логические операторы и тернарные выражения.

Задание: Напишите программу на JavaScript, которая принимает числовую оценку студента (0-100) и определяет его буквенную оценку, используя следующие критерии:

A: 90-100
B: 80-89
C: 70-79
D: 60-69
F: ниже 60

Требования:

Используйте оператор if-else для определения буквенной оценки
Используйте логические операторы, чтобы проверить, прошел ли студент (оценка >= 60) И имеет ли он отличные результаты (оценка >= 90)
Используйте оператор switch, чтобы предоставить конкретные отзывы для каждой буквенной оценки
Используйте тернарный оператор, чтобы определить, подходит ли студент для следующего курса (оценка >= 70)
Включите проверку ввода, чтобы убедиться, что оценка находится в диапазоне от 0 до 100

Протестируйте свою программу с различными оценками, включая крайние случаи, такие как 59, 60, 89, 90 и недопустимые значения.

Узнайте больше о режиме Agent здесь.

Тест после лекции

Обзор и самостоятельное изучение

Прочитайте больше о множестве доступных пользователю операторов на MDN.

Изучите замечательный справочник по операторам от Джоша Комо!

Задание

Операторы

Отказ от ответственности:
Этот документ был переведен с использованием сервиса автоматического перевода Co-op Translator. Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникающие в результате использования данного перевода.

23 KiB Raw Blame History Unescape Escape