Front-end course

Операторы. Преобразование типов. Условные конструкции. Циклы

Операторы. Унарный, бинарный, операнд

Операнд – то, к чему применяется оператор. Например: 5 * 2 – оператор умножения с левым и правым операндами. Другое название: «аргумент оператора».

  • Унарным называется оператор, который применяется к одному операнду. Например, оператор унарный минус ”-” меняет знак числа на противоположный:
let x = 5;
x = -x;
alert(x); // -5
  • Бинарным называется оператор, который применяется к двум операндам. Тот же минус существует и в бинарной форме:
let x = 5, y = 3;
let z = x - y;
alert(z); // 2

Бинарный +

При помощи плюса ’+’ складывают числа.

let x = 5, y = 3;
alert(x + y); // 8

Если применить + к строкам произойдет конкатенация (сложение строк).

let x = "str", y = "ing";
alert(x + y); // "string"

Если хотя бы один аргумент является строкой, то второй будет также преобразован к строке!!!

let x = 5, y = "ing";
alert(x + y); // "5ing"

Унарный +

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

let x = "5", y = "6";
alert(x + y); // "56"
alert(+x + +y); // 11

+null // 0
+undefined // NaN
+true // 1
+false // 0

Мягкое преобразование parseInt, parseFloat:

alert( parseInt("30px") ); // 30

alert( parseFloat("51.2.3") ); // 51.2

Остальные арифметические операторы

  • Умножение (x*y)
  • Возведение в степень (x**y)
  • Деление (x/y)
  • Остаток от деления (x%y)
  • —number и number— (—x, x—)
  • ++number и number++ (++x, x++)

а как насчет приоритета? https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

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

  • Больше/меньше: a > b, a < b.
  • Больше/меньше или равно: a >= b, a <= b.
  • Равенство a == b. Строгое равенство a === b.
  • «Не равно». a != b. Строгое неравенство a !== b.

Всегда получаем логическое значение true или false

Логические операторы

Для операций над логическими значениями есть || (ИЛИ), && (И) и !(НЕ).

|| (ИЛИ) вычисляет ровно столько значений, сколько необходимо – до первого true. Возвращает то значение, на котором остановились вычисления. Причём не преобразованное к логическому типу.

alert( 1 || 0 ); // 1

alert( false || null || "" || 0 ); // 0

&& (И) вычисляет операнды слева направо до первого «ложного» и возвращает его, а если все истинные – то последнее значение

alert( 5 && "test" && false && 3 ); // false

alert( 5 && "test" && 3 ); // 3

Преобразование типов

Сравнение разных типов

При сравнении значений разных типов, используется числовое преобразование. Оно применяется к обоим значениям.

alert( "5" > 3 ); // true

alert( false == 0 ); // true

alert( true == 1 ); // true

Сравнение null и undefined. Два правила:

  1. Значения null и undefined равны == друг другу и не равны чему бы то ни было ещё.
  2. При преобразовании в число null становится 0, а undefined становится NaN.

Преобразование типов для примитивов

Всего есть три вида преобразования:

  1. Строковое преобразование.
  2. Численное преобразование.
  3. Преобразование к логическому значению.

Строковое преобразование

Строковое преобразование происходит, когда требуется представление чего-либо в виде строки.

alert(true); // "true"

Можно также осуществить преобразование явным вызовом String(val)

String(false) === "false"; // true

Также для явного преобразования применяется оператор ”+”, у которого один из аргументов строка.

(true + "") === "true"; // true

Числовое преобразование

Численное преобразование происходит в математических функциях и выражениях, а также при сравнении данных различных типов.

Для преобразования к числу в явном виде можно вызвать Number(val), либо поставить перед выражением унарный плюс ”+“.

Number("3"); // 3
+"3"; // 3

Логическое преобразование

Преобразование к true/false происходит в логическом контексте, таком как if(value), и при применении логических операторов.

Все значения, которые интуитивно «пусты», становятся false. Их несколько: 0, пустая строка, null, undefined и NaN.

Для явного преобразования используется двойное логическое отрицание !!value или вызов Boolean(value).

Boolean("3"); // true
!!"0"; // true

Условные операторы: if, ?

Оператор if («если») получает условие, if (x > y). Он вычисляет его, и если результат – true, то выполняет команду.

if (true == 1) {
  let x = "Hello world!";
  alert(x);
}

Необязательный блок else («иначе») выполняется, если условие неверно:

if (false) {
  alert("Не выполнится");
} else {
  alert("Выполнится");
}

Тернарный оператор “?”

Синтаксис: условие ? значение1 : значение2

let y = 5;
let x = y > 3 ? 10 : 9;

console.log(x); // 10
if ( x == 5 ) {
  alert("hi");
} else {
  alert("John");
}


x == 5 ? alert("hi") : alert("John");

Конструкция switch

Проверяет на строгое равенство ===

let x = "5";

switch (x) {
  case "4":
    console.log("He выполнится");
    break;
  case 5:
    console.log("He выполнится");
    break;
  case "5":
    console.log("Выполнится");
    break;
  default:
    alert("Выполнится, если ничего не совпадет");
}

Циклы

Цикл while

Синтаксис:

while (условие) {
  // тело цикла
}

Пример:

let a = 5;
while (a !== 0) {
  console.log(a);
  a--; // a -= 1, a = a - 1
}

Цикл do while

Синтаксис:

do {
  // тело цикла
} while (условие)

Пример:

let a = 5;
do {
  console.log(a);
  a--;
} while (a !== 0)

Цикл for

Синтаксис:

for (начало; условие; шаг) {
  // тело цикла
}

Пример:

for (let i = 0; i < 3; i++) {
  console.log(i);
}

Повторение цикла по-научному называется «итерация».

Любая часть for может быть пропущена!!!

Директива break

Выйти из цикла можно не только при проверке условия, но и в любой момент с помощью директивы break.

for (let i = 0; i < 3; i++) {
  console.log(i);
  if (i === 1) break;
}

Директива continue

Директива continue прекращает выполнение текущей итерации цикла.

for (let i = 0; i < 10; i++) {
  if (i * 2 > 10) continue;
  console.log(i);
}

Метки для break, continue (labels)

outer:
for (let i = 0; i < 10; i++) {
  let k = 5;
  for (let j = 0; j < 10; j++) { // внутренний цикл
    if (j > 5) {
      break; // внутренний break;
    } else {
      continue outer;
      /*останавливается текущая итерация и начинаем 
      следующую итерацию внешнего цикла*/
    }
  }
}

Quiz

Материалы для прочтения

Written by Vadim Goloviychuk