Изучите условное ветвление в JavaScript

Введение

В этом лабе участники углубятся в мир условного ветвления в JavaScript, изучая различные методы принятия решений и управления потоком программы. Лаб涵盖了诸如单分支if语句、if...else逻辑、多条件语句和switch语句等基本概念，提供了不同条件结构的实践经验。

通过实际的编码练习，学习者将熟练掌握实现条件逻辑、比较不同分支技术，并理解如何为特定的编程场景选择最合适的方法。通过逐步处理涉及年龄验证、成绩评估和案例处理的示例，参与者将在 JavaScript 的条件编程能力方面打下坚实的基础。

Разберитесь с однострочным оператором if

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

Сначала создадим файл JavaScript, чтобы изучить однострочный оператор if. Откройте WebIDE и создайте новый файл под названием conditional-basics.js в каталоге ~/project.

// Создайте простой пример проверки возраста
let age = 18;

// Однострочный оператор if
if (age >= 18) {
  console.log("You are eligible to vote!");
}

В этом примере оператор if проверяет, является ли age больше или равно 18. Если условие истинно, блок кода внутри фигурных скобок {} будет выполнен.

Запустим скрипт, чтобы увидеть результат:

node ~/project/conditional-basics.js

Пример вывода:

You are eligible to vote!

Теперь попробуем другой пример, чтобы показать, как работает оператор if, когда условие ложно:

// Измените предыдущий файл
let temperature = 15;

if (temperature < 10) {
  console.log("It's cold outside. Wear a jacket!");
}

В этом случае, так как температура равна 15 (что не меньше 10), ничего не будет напечатано при запуске скрипта.

Реализуйте условную логику if...else

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

Откройте WebIDE и создайте новый файл под названием conditional-else.js в каталоге ~/project. Создадим простой пример, демонстрирующий, как работает if...else:

// Создайте простой пример оценки успеваемости
let score = 75;

if (score >= 60) {
  console.log("Congratulations! You passed the exam.");
} else {
  console.log("Sorry, you did not pass the exam.");
}

В этом примере оператор if...else проверяет, больше или равен ли score 60. Если условие истинно, выводится сообщение о том, что экзамен сдан. В противном случае выводится сообщение о неуспехе.

Запустим скрипт, чтобы увидеть результат:

node ~/project/conditional-else.js

Пример вывода:

Congratulations! You passed the exam.

Теперь изменим скрипт, чтобы показать часть else, изменив значение score:

// Измените предыдущий файл
let score = 45;

if (score >= 60) {
  console.log("Congratulations! You passed the exam.");
} else {
  console.log("Sorry, you did not pass the exam.");
}

При запуске этого скрипта вы увидите другой результат:

Пример вывода:

Sorry, you did not pass the exam.

Создадим еще один пример, чтобы показать, как можно использовать if...else с разными типами условий:

// Добавьте еще один пример в файл
let isRaining = true;

if (isRaining) {
  console.log("Take an umbrella with you.");
} else {
  console.log("Enjoy the sunny day!");
}

Этот пример показывает, как if...else может работать с булевыми условиями.

Создайте многократно условные операторы if...else if...else

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

Откройте WebIDE и создайте новый файл под названием multi-condition.js в каталоге ~/project:

// Создайте пример классификации оценок
let score = 85;

if (score >= 90) {
  console.log("Excellent! You got an A grade.");
} else if (score >= 80) {
  console.log("Great job! You got a B grade.");
} else if (score >= 70) {
  console.log("Good work! You got a C grade.");
} else if (score >= 60) {
  console.log("You passed. You got a D grade.");
} else {
  console.log("Sorry, you failed the exam.");
}

В этом примере оператор if...else if...else последовательно проверяет несколько условий. Первое условие, которое оценивается как истинное, будет иметь свой блок кода выполненным, а остальные условия будут пропущены.

Запустим скрипт, чтобы увидеть результат:

node ~/project/multi-condition.js

Пример вывода:

Great job! You got a B grade.

Теперь изменим значение score, чтобы увидеть, как работают разные условия:

// Попробуйте разные сценарии оценок
let score = 55;

if (score >= 90) {
  console.log("Excellent! You got an A grade.");
} else if (score >= 80) {
  console.log("Great job! You got a B grade.");
} else if (score >= 70) {
  console.log("Good work! You got a C grade.");
} else if (score >= 60) {
  console.log("You passed. You got a D grade.");
} else {
  console.log("Sorry, you failed the exam.");
}

При запуске этого скрипта вы увидите другой результат:

Пример вывода:

Sorry, you failed the exam.

Создадим еще один пример, чтобы показать логику с несколькими условиями для другого сценария:

// Пример условия погоды
let temperature = 25;

if (temperature > 30) {
  console.log("It's very hot outside.");
} else if (temperature > 20) {
  console.log("The weather is warm and pleasant.");
} else if (temperature > 10) {
  console.log("It's a bit cool today.");
} else {
  console.log("It's cold outside.");
}

Этот пример показывает, как можно использовать if...else if...else для обработки нескольких условий с разными результатами.

Используйте оператор switch для обработки нескольких случаев

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

Откройте WebIDE и создайте новый файл под названием switch-statement.js в каталоге ~/project:

// Создайте пример дня недели с использованием оператора switch
let day = 3;

switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  case 4:
    console.log("Thursday");
    break;
  case 5:
    console.log("Friday");
    break;
  case 6:
    console.log("Saturday");
    break;
  case 7:
    console.log("Sunday");
    break;
  default:
    console.log("Invalid day");
}

В этом примере оператор switch проверяет значение day. Каждый case представляет собой конкретное значение, и соответствующий блок кода выполняется, когда значение совпадает. Строка break предотвращает переход к следующему case.

Запустим скрипт, чтобы увидеть результат:

node ~/project/switch-statement.js

Пример вывода:

Wednesday

Теперь создадим еще один пример, чтобы показать default-случай:

// Классификация оценок с использованием оператора switch
let grade = "B";

switch (grade) {
  case "A":
    console.log("Excellent performance!");
    break;
  case "B":
    console.log("Good job!");
    break;
  case "C":
    console.log("Satisfactory performance.");
    break;
  case "D":
    console.log("Needs improvement.");
    break;
  default:
    console.log("Invalid grade.");
}

При запуске этого скрипта вы увидите:

Пример вывода:

Good job!

Покажем, как несколько case могут использовать один и тот же блок кода:

// Определение выходных дней с использованием оператора switch
let day = 6;

switch (day) {
  case 6:
  case 7:
    console.log("It's the weekend!");
    break;
  default:
    console.log("It's a weekday.");
}

Этот пример показывает, как можно обрабатывать несколько case с одной и той же операцией.

Сравните и выберите между операторами if и switch

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

Откройте WebIDE и создайте новый файл под названием conditional-comparison.js в каталоге ~/project:

// Сравнение if и switch для различных сценариев

// Сценарий 1: Простая проверка равенства
let fruit = "apple";

// Использование оператора if
if (fruit === "apple") {
  console.log("If Statement: It's an apple.");
} else if (fruit === "banana") {
  console.log("If Statement: It's a banana.");
} else {
  console.log("If Statement: Unknown fruit.");
}

// Использование оператора switch
switch (fruit) {
  case "apple":
    console.log("Switch Statement: It's an apple.");
    break;
  case "banana":
    console.log("Switch Statement: It's a banana.");
    break;
  default:
    console.log("Switch Statement: Unknown fruit.");
}

// Сценарий 2: Сложные условия
let score = 85;

// Оператор if лучше подходит для сложных условий
if (score >= 90 && score <= 100) {
  console.log("Excellent grade (A)");
} else if (score >= 80 && score < 90) {
  console.log("Good grade (B)");
} else if (score >= 70 && score < 80) {
  console.log("Satisfactory grade (C)");
} else {
  console.log("Needs improvement");
}

// Switch менее подходит для условий, основанных на диапазонах или сложных условий

Запустим скрипт, чтобы увидеть выводы:

node ~/project/conditional-comparison.js

Пример вывода:

If Statement: It's an apple.
Switch Statement: It's an apple.
Good grade (B)

Важные различия, которые нужно запомнить:

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

Создадим последний пример, чтобы проиллюстрировать эти要点：

// Выбор между if и switch

function recommendConditional(input) {
  // Используйте switch для простых, точных совпадений значений
  switch (input) {
    case "red":
    case "blue":
    case "green":
      console.log("Use switch for simple value checks");
      break;

    // Используйте if для более сложных условий
    default:
      if (typeof input === "number" && input > 0 && input < 100) {
        console.log("Use if for range and type checking");
      } else {
        console.log("Complex conditions are better with if statements");
      }
  }
}

recommendConditional("blue");
recommendConditional(50);

Резюме

В этом практическом занятии участники изучали методы условного ветвления в JavaScript, сосредоточившись на различных типах условных операторов. Практическое занятие началось с изучения однострочных операторов if, демонстрирующих, как выполнять код на основе конкретных условий, таких как проверка возраста и проверка температуры. Учащиеся практиковались в создании простой условной логики, которая позволяет коду выполняться только при истинности заданного условия.

Затем практическое занятие перешло к более продвинутым методам условного ветвления, включая операторы if...else для двухстороннего ветвления, многократно условные операторы if...else if...else для сложных решений и операторы switch для обработки нескольких сценариев. Участники узнали, как сравнивать различные методы условного ветвления, понимая синтаксис и практическое применение каждого метода в программировании на JavaScript.