38 KiB

Raw Blame History Unescape Escape

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

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

journey
    title Your JavaScript Decision-Making Adventure
    section Foundation
      Boolean Values: 5: You
      Comparison Operators: 4: You
      Logical Thinking: 5: You
    section Basic Decisions
      If Statements: 4: You
      If-Else Logic: 5: You
      Switch Statements: 4: You
    section Advanced Logic
      Logical Operators: 5: You
      Complex Conditions: 4: You
      Ternary Expressions: 5: You

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

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

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

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

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

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

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

mindmap
  root((Decision Making))
    Boolean Logic
      true/false
      Comparison results
      Logical expressions
    Conditional Statements
      if statements
        Single condition
        Code execution
      if-else
        Two paths
        Alternative actions
      switch
        Multiple options
        Clean structure
    Operators
      Comparison
        === !== < > <= >=
        Value relationships
      Logical
        && || !
        Combine conditions
    Advanced Patterns
      Ternary
        ? : syntax
        Inline decisions
      Complex Logic
        Nested conditions
        Multiple criteria

Краткий обзор булевых значений

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

✅ Проверьте свои знания, написав несколько сравнений в консоли браузера. Удивил ли вас какой-либо возвращенный результат?

flowchart LR
    A["🔢 Values"] --> B["⚖️ Comparison"]
    B --> C["✅ Boolean Result"]
    
    D["5"] --> E["< 6"]
    E --> F["true"]
    
    G["10"] --> H["=== '10'"]
    H --> I["false"]
    
    J["'hello'"] --> K["!== 'world'"]
    K --> L["true"]
    
    M["📋 Operator Types"] --> M1["Equality: === !=="]
    M --> M2["Relational: < > <= >="]
    M --> M3["Strict vs Loose"]
    
    style A fill:#e3f2fd
    style C fill:#e8f5e8
    style M fill:#fff3e0

🧠 Проверка мастерства сравнения: понимание булевой логики

Проверьте свое понимание сравнения:

Почему, по вашему мнению, === (строгое равенство) обычно предпочтительнее, чем == (нестрогое равенство)?
Можете ли вы предсказать, что вернет 5 === '5'? А как насчет 5 == '5'?
В чем разница между !== и !=?

stateDiagram-v2
    [*] --> Comparison: Two values
    Comparison --> StrictEqual: === or !==
    Comparison --> Relational: < > <= >=
    
    StrictEqual --> TypeCheck: Check type AND value
    Relational --> NumberCompare: Convert to numbers
    
    TypeCheck --> BooleanResult: true or false
    NumberCompare --> BooleanResult
    
    note right of StrictEqual
        Preferred approach
        No type conversion
    end note
    
    note right of Relational
        Useful for ranges
        Numerical comparisons
    end note

Полезный совет: Всегда используйте === и !== для проверки равенства, если вам не нужно специально преобразовывать типы. Это предотвращает неожиданное поведение!

Оператор 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, код внутри блока выполняется, выводя в консоль «Покупаю новый ноутбук!».

flowchart TD
    A["🚀 Program Start"] --> B{"💰 currentMoney >= laptopPrice?"}
    B -->|true| C["🎉 'Getting a new laptop!'"]
    B -->|false| D["⏭️ Skip code block"]
    C --> E["📋 Continue program"]
    D --> E
    
    F["📊 If Statement Structure"] --> F1["if (condition) {"]
    F1 --> F2["  // code to run if true"]
    F2 --> F3["}"]
    
    style B fill:#fff3e0
    style C fill:#e8f5e8
    style D fill:#ffebee
    style F fill:#e3f2fd

Оператор 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().

🎯 Проверка логики if-else: ветвление путей

Оцените свое понимание условной логики:

Что произойдет, если currentMoney будет точно равен laptopPrice?
Можете ли вы придумать реальную ситуацию, где логика if-else была бы полезна?
Как вы могли бы расширить это, чтобы учитывать несколько диапазонов цен?

flowchart TD
    A["🔍 Evaluate Condition"] --> B{"Condition True?"}
    B -->|Yes| C["📤 Execute IF block"]
    B -->|No| D["📥 Execute ELSE block"]
    
    C --> E["✅ One path taken"]
    D --> E
    
    F["🌐 Real-world Examples"] --> F1["User login status"]
    F --> F2["Age verification"]
    F --> F3["Form validation"]
    F --> F4["Game state changes"]
    
    style B fill:#fff3e0
    style C fill:#e8f5e8
    style D fill:#e3f2fd
    style F fill:#f3e5f5

Ключевая идея: If-else гарантирует, что будет выбран только один путь. Это гарантирует, что ваша программа всегда будет реагировать на любое условие!

Оператор 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. Результат? В консоли отображается «Сегодня вторник».

flowchart TD
    A["📥 switch(expression)"] --> B["🔍 Evaluate once"]
    B --> C{"Match case 1?"}
    C -->|Yes| D["📋 Execute case 1"]
    C -->|No| E{"Match case 2?"}
    E -->|Yes| F["📋 Execute case 2"]
    E -->|No| G{"Match case 3?"}
    G -->|Yes| H["📋 Execute case 3"]
    G -->|No| I["📋 Execute default"]
    
    D --> J["🛑 break"]
    F --> K["🛑 break"]
    H --> L["🛑 break"]
    
    J --> M["✅ Exit switch"]
    K --> M
    L --> M
    I --> M
    
    style A fill:#e3f2fd
    style B fill:#fff3e0
    style M fill:#e8f5e8

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

🔄 Мастерство switch: множество вариантов

Проверьте свое понимание switch:

Что произойдет, если вы забудете оператор break?
Когда вы бы использовали switch вместо нескольких операторов if-else?
Почему блок default полезен, даже если вы думаете, что учли все возможности?

pie title "When to Use Each Decision Structure"
    "Simple if-else" : 40
    "Complex if-else chains" : 25
    "Switch statements" : 20
    "Ternary operators" : 15

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

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

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

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

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

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

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

flowchart LR
    A["🔗 Logical Operators"] --> B["&& AND"]
    A --> C["|| OR"]
    A --> D["! NOT"]
    
    B --> B1["Both must be true"]
    B --> B2["true && true = true"]
    B --> B3["true && false = false"]
    
    C --> C1["At least one true"]
    C --> C2["true || false = true"]
    C --> C3["false || false = false"]
    
    D --> D1["Flips the value"]
    D --> D2["!true = false"]
    D --> D3["!false = true"]
    
    E["🌍 Real Examples"] --> E1["Age >= 18 && hasLicense"]
    E --> E2["isWeekend || isHoliday"]
    E --> E3["!isLoggedIn"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1

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

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

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.

🧮 Проверка логических операторов: комбинирование условий

Проверьте свое понимание логических операторов:

В выражении A && B, что произойдет, если A ложно? Будет ли B вообще оцениваться?
Можете ли вы придумать ситуацию, где вам понадобятся все три оператора (&&, ||, !)?
В чем разница между !user.isActive и user.isActive !== true?

stateDiagram-v2
    [*] --> EvaluateA: A && B
    EvaluateA --> CheckB: A is true
    EvaluateA --> ReturnFalse: A is false
    CheckB --> ReturnTrue: B is true
    CheckB --> ReturnFalse: B is false
    
    [*] --> EvaluateC: A || B
    EvaluateC --> ReturnTrue: A is true
    EvaluateC --> CheckD: A is false
    CheckD --> ReturnTrue: B is true
    CheckD --> ReturnFalse: B is false
    
    note right of EvaluateA
        Short-circuit evaluation:
        If A is false, B is never checked
    end note

Совет по производительности: JavaScript использует «короткое замыкание» - в A && B, если A ложно, B даже не оценивается. Используйте это в своих интересах!

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

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

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

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

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

Для простых условных присваиваний 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 может быть более читаемой для сложных условий.

flowchart LR
    A["🤔 Ternary Operator"] --> B["condition ?"]
    B --> C["valueIfTrue :"]
    C --> D["valueIfFalse"]
    
    E["📝 Traditional If-Else"] --> F["if (condition) {"]
    F --> G["  return valueIfTrue"]
    G --> H["} else {"]
    H --> I["  return valueIfFalse"]
    I --> J["}"]
    
    K["⚡ When to Use"] --> K1["Simple assignments"]
    K --> K2["Short conditions"]
    K --> K3["Inline decisions"]
    K --> K4["Return statements"]
    
    style A fill:#e3f2fd
    style E fill:#fff3e0
    style K fill:#e8f5e8

🚀 Задание

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

Вызов 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, и недопустимые значения.

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

Викторина после лекции

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

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

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

Задание

Операторы

🧠 Резюме вашего инструментария для принятия решений

graph TD
    A["🎯 JavaScript Decisions"] --> B["🔍 Boolean Logic"]
    A --> C["📊 Conditional Statements"]
    A --> D["🔗 Logical Operators"]
    A --> E["⚡ Advanced Patterns"]
    
    B --> B1["true/false values"]
    B --> B2["Comparison operators"]
    B --> B3["Truthiness concepts"]
    
    C --> C1["if statements"]
    C --> C2["if-else chains"]
    C --> C3["switch statements"]
    
    D --> D1["&& (AND)"]
    D --> D2["|| (OR)"]
    D --> D3["! (NOT)"]
    
    E --> E1["Ternary operator"]
    E --> E2["Short-circuit evaluation"]
    E --> E3["Complex conditions"]
    
    F["💡 Key Principles"] --> F1["Clear readable conditions"]
    F --> F2["Consistent comparison style"]
    F --> F3["Proper operator precedence"]
    F --> F4["Efficient evaluation order"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1
    style F fill:#fce4ec

🚀 Ваш график освоения принятия решений в JavaScript

⚡ Что вы можете сделать за следующие 5 минут

Попрактиковаться с операторами сравнения в консоли браузера
Написать простое условие if-else, проверяющее ваш возраст
Попробовать задачу: переписать if-else с использованием тернарного оператора
Проверить, что происходит с различными "истинными" и "ложными" значениями

🎯 Что вы можете достичь за этот час

Пройти викторину после урока и пересмотреть непонятные концепции
Создать комплексный калькулятор оценок из задания GitHub Copilot
Построить простой дерево решений для реальной ситуации (например, выбор одежды)
Попрактиковаться в объединении нескольких условий с логическими операторами
Поэкспериментировать с операторами switch для различных случаев

📅 Ваш недельный путь к освоению логики

Завершить задание по операторам с творческими примерами
Создать мини-приложение викторины, используя различные условные структуры
Создать валидатор формы, проверяющий несколько условий ввода
Попрактиковаться с упражнениями из справочника по операторам Джоша Комо
Переписать существующий код, используя более подходящие условные структуры
Изучить короткую оценку (short-circuit evaluation) и её влияние на производительность

🌟 Ваш месячный путь к трансформации

Освоить сложные вложенные условия и поддерживать читаемость кода
Создать приложение с продвинутой логикой принятия решений
Внести вклад в open source, улучшая условную логику в существующих проектах
Обучить кого-то другому различным условным структурам и их применению
Исследовать подходы функционального программирования к условной логике
Создать личный справочник по лучшим практикам условной логики

🏆 Итоговая проверка вашего мастерства принятия решений

Отпразднуйте ваше мастерство логического мышления:

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

journey
    title Your Logical Thinking Evolution
    section Today
      Boolean Confusion: 3: You
      If-Else Understanding: 4: You
      Operator Recognition: 5: You
    section This Week
      Complex Conditions: 4: You
      Switch Mastery: 5: You
      Logical Combinations: 5: You
    section Next Month
      Advanced Patterns: 5: You
      Performance Awareness: 5: You
      Teaching Others: 5: You

🧠 Вы освоили искусство цифрового принятия решений! Каждое интерактивное приложение опирается на условную логику, чтобы разумно реагировать на действия пользователя и изменяющиеся условия. Теперь вы понимаете, как заставить ваши программы думать, оценивать и выбирать подходящие ответы. Эта логическая основа будет двигать каждое динамическое приложение, которое вы создадите! 🎉

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

38 KiB Raw Blame History Unescape Escape