JavaScript - Операторы

Александр Мальцев
Александр Мальцев
11K
15
Содержание:
  1. Математические операторы
  2. Операторы присваивания
  3. Операторы сравнения
  4. Строковые операторы
  5. Побитовые операторы
  6. Приоритет операторов
  7. Комментарии

В JavaScript можно выделить следующие виды операторов:

Математические операторы

В JavaScript выделяют следующие математические операторы: + (сложение, унарный плюс), - (вычитание, отрицание), * (умножение), / (деление), % (остаток от деления), ** (возведение в степень), ++ (увеличение значения на 1), -- (уменьшение значения на 1).

8 + 4;  // 12 (результат сложения)
8 - 4;  // 4  (результат вычитания)
8 * 4;  // 32 (результат умножения)
8 / 4;  // 2  (результат деления)
8 % 4;  // 0  (результат вычисления остатка от деления)
2 ** 3; // 8  (результат возведения числа 2 в степень 3)
++7;    // 8  (увеличение числа 7 на 1)
--8;    // 7  (уменьшение числа 8 на 1)

В результате выполнения математической операции всегда возвращается числовое значение.

5 – 15;      // -10 (1 пример)
'5' - '15';  // -10 (2 пример)

JavaScript – это язык с динамическим приведением типов. Во втором примере оператор минус () является математическим и может оперировать только с числами. Для выполнения этой операции JavaScript приведёт значения первого и второго операнда к числам (5 и 15), а затем уже выполнит вычитание.

Ещё один пример с использованием оператора минус (-):

5 - 'px'; // NaN

В этом примере JavaScript приведёт строку «px» к специальному числовому значению NaN. В результате вычисления 5 – NaN будет возвращён результат NaN.

Пример с использованием оператора плюс (+):

5 + 'px';  // "5px"

Оператор плюс (+) не только математический, он также используется для конкатенации (соединения) строк.

Выбор операции при использовании оператора плюс (+) зависит от типа значений операндов. Если хотя бы один из операндов является строкой, то данная операция рассматривается как операция конкатенации строк. В противном случае она будет считаться математической.

В этом примере второй операнд является строкой, следовательно, данная операция будет операцией конкатенацией строк. Т.к. первый операндов не является строкой, то JavaScript приведёт его к ней. В результате будет возвращена строка «5px».

Ещё оператор плюс (+) может применяться к одному операнду:

+5.8;      // 5.8 (при применении к числу унарный оператор + ничего не изменяет)
+'5.8';    // 5.8 (при применении унарного оператора + к не числовому значению приводит его к числу)
+'5.8px';  // NaN (привёл текст к числовому значению NaN)

Унарный оператор плюс (+) в основном используется для явного преобразования не числовых типов данных к числам.

Оператор минус (), также как и оператор плюс (+) может применяться к одному операнду. Если операнд является числом, то он просто изменит его знак на противоположный. В противном случае, он преобразует значение операнда к числу, а затем изменит его знак на противоположный.

5 + (-10); //-5;
-(-15);    // 15
-'5';      // -5
-'5px';    // NaN

Операторы инкремента (++) и декремента (--) имеют префиксную и постфиксную форму.

var num1, num2;
num1 = 5;
num2 = num1++; // постфиксная форма, т.е. сначала возвращается значение, а затем увеличивается значение переменной num1 на 1.
console.log(num1); // 6
console.log(num2); // 5
num1 = 5;
num2 = ++num1; // префиксная форма, т.е. сначала увеличивается значение переменной num1 на 1, а затем возвращается её значение
console.log(num1); // 6
console.log(num2); // 6

Оператор процент (%) вычисляет остаток от деления первого операнда на второй:

100 % 3; // 1

Как вычисляется остаток от деления показано на картинке:

JavaScript - Использование оператора процент (%), как вычисляется остаток от деления

Операторы присваивания

Оператор равно (=) используется для присвоения (установления) левому операнду (переменной) значение правого операнда.

num = 33;     // присвоим переменной num число 33
num1 = num2;  // присвоим переменной num1 значение переменной num2

В JavaScript имеются ещё составные операторы присваивания: +=, -=, *=, /=, %=, **=, <<=, >>=, >>>=, &=, ^=, |=. Данные операторы выполняют перед присваиванием ещё одну операцию.

Эти операторы являются просто сокращёнием следующей записи:

operand1 = operand1 operator operand2;
// эта запись имеет тот же смысл что и верхняя
operand1 operator= operand2;

Например:

var x = 7;
x += 8;   // 15
x += '3'; // "153"
x -= 30;  // 123
x **= 2;  // 15129

Операторы сравнения

Операторы сравнения предназначены для сравнения двух операндов. Если сравнение верное, то в качестве результата этой операции возвращается true. В противном случае, значение false.

В JavaScript выделяют следующие операторы сравнения: == (равенство), != (не равенство), === (строгое равенство), !== (строгое не равенство), > (больше), >= (больше или равно), < (меньше), <= (меньше или равно).

// СРАВНЕНИЕ ЧИСЕЛ
5 > 10;        // false
5 === 2 + 3;   // true
7 < 2 * 3;     // false
4 <= 4;        // true
+0 === -0;     // true
// СРАВНЕНИЕ БУЛЕВЫХ ЗНАЧЕНИЙ
true > false;  // true
true == false; // false
// РАВЕНСТВО null и undefined
null == undefined; // true (особенность языка)

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

При этом какой символ больше другого определяется по их кодам в таблице Unicode.

// ПРИМЕР 1
// 51 - код символа '3' // '3'.charCodeAt(0)
// 50 - код символа '2' // '2'.charCodeAt(0)
'3' > '25'; // true, т.к. 51 > 50

// ПРИМЕР 2
// 1080 - код символа 'и' // 'и'.charCodeAt(0)
// 1090 - код символа 'т' // 'т'.charCodeAt(0)
'символ' > 'строка'; // false, т.к. 1080 не больше 1090

// ПРИМЕР 3
'домик' > 'дом'; // true, т.к. у него больше символов

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

// 1044 - код символа 'Д' // 'Д'.charCodeAt(0)
// 1076 - код символа 'д' // 'д'.charCodeAt(0)
'Дом' === 'дом'; // false, т.к. 'Д' не равно 'д'

'Дом'.toLowerCase() === 'дом'.toLowerCase(); // true

Если оба операнда являются объектами, то сравниваются их ссылки.

var
  obj1 = {
    num: 3
  },
  obj2 = {
    num: 3
  },
  obj3 = obj1;
  
obj1 == obj2;   // false, т.к. переменные имеют разные ссылки
obj1 == obj3;   // true, т.к. переменные ссылаются на один и тотже объект
obj1 === obj3;  // true, т.к. переменные ссылаются на один и тотже объект

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

Если операнды имеют примитивный тип данных, то они приводится при операции сравнения к числу:

'2' == 2;    // true, т.к. строка '2' будет приведена к числу 2
true != 0;   // true, т.к. true будет приведено к 1
false == 0;  // true, т.к. false == true
'' > -5;     // true, т.к. пустая строка будет приведена к 0
'' == false; // true, т.к. пустая строка будет приведена к 0 и false тоже к 0
'5px' == 5;  // false, т.к. строка '5px' будет приведена к NaN

При сравнении объекта с примитивным типом данных, JavaScript вызывает его метод valueOf или toString. Полученное значение, если оно не объект, сравнивается с примитивным типом данных и возвращается результат. Если метод valueOf или toString, то выбрасывается ошибка «Cannot convert object to primitive value».

// ПРИМЕР 1
var obj = {
  num: 5,
  toString: function () {
    return this.num;
  }
};
obj == 5; // true

// ПРИМЕР 2
var 
  arr = [4, 5, 6],
  str = '4,5,6';
arr == str; // true

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

2 === '2';  // false, т.к. тип данных разный
true === 1; // false, т.к. тип данных разный

Строковые операторы

Для выполнения операций со строками в JavaScript нет никаких специальных операторов.

Для конкатенации (соединения) строк используется оператор плюс (+). Данный оператор применяется не только для соединения строк, но также и для сложения чисел. Кроме этого, данный оператор может использоваться с одним операндом. Этот вариант применение оператора, в основном используется тогда, когда нужно некоторое значение привести к числу.

"одна строка " + "другая строка"; // "одна строка другая строка" (использование оператора + для сложения строк)
7 + 8; // 15 (использование оператора + для сложения чисел)
+"7"; // 7 (использование оператора + для приведения строки к числу)

Для сравнения строк используются операторы строго равенства (===), больше (>), меньше (<) и др. Т.е. точно такие же операторы которые используются для сравнения чисел, объектов и других типов данных.

var str = "некоторый текст";
str === "некоторый текст"; // true

Побитовые операторы

Побитовые операторы предназначены для выполнения логических операций над целыми числами, а точнее над их двоичными представлениями.

Представление числа в двоичной системе осуществляется посредством 32 битов.

// 5  => 0000 0000 0000 0000 0000 0000 0000 0101
// 10 => 0000 0000 0000 0000 0000 0000 0000 1010

В JavaScript имеются следующие побитовые операторы: & (побитовое И), | (побитовое ИЛИ), ~ (побитовое НЕ), ^ (исключающее ИЛИ), << (сдвиг влево), >> (сдвиг вправо), >>> (сдвиг вправо с заполнением нулями).

Пример с использованием оператора &:

// ПРИМЕР 1
5 & 10; // 0
// 5      => ... 0000 0101
// 10     => ... 0000 1010
// 5 & 10 => ... 0000 0000
// 02 = 010

// ПРИМЕР 2
5 & 7; // 5
// 5      => ... 0000 0101
// 7      => ... 0000 0111
// 5 & 7  => ... 0000 0101
// 1012 = 510

// выполнение логической операции «И» осуществляется для каждой пары битов, находящихся на одинаковых позициях в двоичных представлениях операндов
// логическое "И" работает так: 0 & 0 = 0, 1 & 0 = 0, 0 & 1 = 0, 1 & 1 = 1.

Пример с использованием оператора |:

// ПРИМЕР 1
5 | 10; // 15
// 5      => ... 0000 0101
// 10     => ... 0000 1010
// 5 | 10 => ... 0000 1111
// 11112 = 1510

// ПРИМЕР 2
5 | 4; // 5
// 5      => ... 0000 0101
// 4      => ... 0000 0100
// 5 | 4  => ... 0000 0101
// 1012 = 510

// выполнение логической операции «ИЛИ» осуществляется для каждой пары битов, находящихся на одинаковых позициях в двоичных представлениях операндов
// логическое "ИЛИ" работает так: 0 | 0 = 0, 1 | 0 = 1, 0 | 1 = 1, 1 | 1 = 1.

Примеры с использованием оператора ^:

// ПРИМЕР 1
5 ^ 7; // 2
// 5      => ... 0000 0101
// 7      => ... 0000 0111
// 5 ^ 7  => ... 0000 0010
// 102 = 210

// ПРИМЕР 2
5 ^ 4; // 1
// 5      => ... 0000 0101
// 4      => ... 0000 0100
// 5 ^ 4  => ... 0000 0001
// 12 = 110

// выполнение логической операции «исключающее ИЛИ» осуществляется для каждой пары битов, находящихся на одинаковых позициях в двоичных представлениях операндов
// исключающее "ИЛИ" работает так: 0 ^ 0 = 0, 1 ^ 0 = 1, 0 ^ 1 = 1, 1 ^ 1 = 0.

Пример с использованием оператора ~:

// ПРИМЕР 1
~5; // -6
// 5       => 0000 0000 0000 0000 0000 0000 0000 0101
// ~5 (-6) => 1111 1111 1111 1111 1111 1111 1111 1010
// выполнение логической операции «НЕ» осуществляется для каждого бита двоичного представления операнда (число 0 заменяется на 1, а 1 на 0).

Пример с использованием оператора <<:

// ПРИМЕР 1
5 << 3; // 40
// 5      => 0000 0000 0000 0000 0000 0000 0000 0101
// 5 << 3 => 0000 0000 0000 0000 0000 0000 0010 1000
// 1010002 = 4010

// operand1 << operand2
// оператор << сдвигает двоичное представление operand1 на количество битов, указанных посредством второго операнда operand2, добавляя нули справа.

Пример с использованием оператора >>:

// ПРИМЕР 1
45 >> 3; // 5
// 45      => 0000 0000 0000 0000 0000 0000 0010 1101
// 45 >> 3 => 0000 0000 0000 0000 0000 0000 0000 0101
// 1012 = 510

// operand1 >> operand2
// оператор >> сдвигает двоичное представление operand1 на количество битов, указанных посредством второго операнда operand2; лишние биты, сдвинутые вправо, отбрасываются.

Пример с использованием оператора >>>:

// ПРИМЕР 1
-30 >>> 3; // 536870908
// -30       => 1111 1111 1111 1111 1111 1111 1110 0010
// -30 >>> 3 => 0001 1111 1111 1111 1111 1111 1111 1100 
// 111111111111111111111111111002 = 53687090810

// operand1 >>> operand2
// оператор >>> сдвигает двоичное представление operand1 на количество битов, указанных посредством второго операнда operand2; лишние биты, сдвинутые вправо, отбрасываются; число слево дополняется нулевыми битами.

Приоритет операторов

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

Таблица, содержащая операторы и их приоритет.

Операторы Порядок Приоритет
() (группировка) не определено 1
. (доступ к свойствам и методам объекта) [] (доступ к элементам) слева направо 2
new (создание объекта со списком аргументов) не определено
() (вызов функции, метода) слева направо 3
new (создание объекта без списка аргументов) справа налево
++ (постфиксный инкремент), -- (постфиксный декремент) не определено 4
! (логическое отрицание), ~ (побитовое отрицание), + (унарный плюс), - (унарный минус), ++ (префиксный инкремент), -- (префиксный декремент), typeof, void, delete справа налево 5
** (возведение в степень) справа налево 6
* (умножение), / (деление), % (остаток от деления) слева направо 7
+ (сложение), - (вычитание) слева направо 8
<< (сдвиг влево), >> (сдвиг вправо), >>> (сдвиг вправо с заполнением нулями) слева направо 9
< (меньше), <= (меньше или равно), > (больше), >= (больше или равно), in, instanceof слева направо 10
== (равенство), != (не равенство), === (строгое равенство), !== (строгое не равенство) слева направо 11
& (побитовое И) слева направо 12
^ (побитовое исключающее ИЛИ) слева направо 13
| (побитовое ИЛИ) слева направо 14
&& (логическое И) слева направо 15
|| (логическое ИЛИ) слева направо 16
?: (условный оператор) справа налево 17
= (присваивание), +=, -=, *=, /=, %=, **=, <<=, >>=, >>>=, &=, ^=, |= справа налево 18
yield, yield* справа налево 19
... (расширение) неопределено 20
, (запятая) слева направо 21

Оператор, имеющий меньшее значение приоритета, выполняется раньше, чем оператор, имеющий более высокое значение приоритета. Если операторы имеют одинаковое значение приоритета, то они выполняются слева направо.

Комментарии:

  1. Toivo
    Toivo
    16.08.2021, 15:25
    У Вас небольшая ошибка в примерах: 5 > 10; // true — а нужно false
    1. Александр Мальцев
      Александр Мальцев
      17.08.2021, 15:51
      Спасибо, поправил.
    2. Sergii
      Sergii
      25.05.2021, 17:19
      var
      arr = [4, 5, 6],
      str = '4,5,6';
      arr == str; // true

      Разве в этом примере строка не преобразуется в NaN? Так же как и массив. В итоге они не равны.

      // СРАВНЕНИЕ ЧИСЕЛ
      5 > 10; // true
      Тут false.
      1. Александр Мальцев
        Александр Мальцев
        26.05.2021, 11:50
        При сравнении массива и строки, массив будет приведён к строке (т.е. arr.toString()). Таким образом [4, 5, 6] станет '4,5,6' и результат этой операции будет true:

        Сравнение значений в JavaScript
      2. Jasurbek
        Jasurbek
        28.03.2021, 16:33
        Здравствуйте Александр
        у меня есть такой пример:
        let a = 9;
        if (a % 5 === 0) {
          console.log(a, "делится на 5");
        } else {
          console.log(a, "не делится на 5");
        }
        if (a % 3 === 0) {
          console.log(a, "делится на 3");
        } else {
          console.log(a, "не делится на 3");
        }
        
        Вот тут ответ правильный делится на 3, не делится на 5.
        Но, я хотел сделать так, когда цифра будет let = 11; чтобы выходил не делится на 3 и 5. Подскажите пожалуйста, как правильно.
        1. Александр Мальцев
          Александр Мальцев
          30.03.2021, 14:26
          Привет!
          Можно написать так:
          if (a % 3 === 0 && a % 5 === 0) {
            console.log(a, 'делится на 3 и 5');
          } else if (a % 3 === 0 && a % 5 !== 0) {
            console.log(a, 'делится на 3 и не делится на 5');
          } else if (a % 3 !== 0 && a % 5 === 0) {
            console.log(a, 'делится на 5 и не делится на 3');
          } else {
            console.log(a, 'не делится на 3 и 5');
          }
          
        2. Ekaterina
          Ekaterina
          14.08.2020, 08:48
          Я так пробовала, но выходят ошибки:
          [1:10] Expected to return a value at the end of function 'test'.
          [4:10] Unnecessary 'else' after 'return'.
          Не понимаю, почему лишний else? если мы задаем три условия…
          1. Александр Мальцев
            Александр Мальцев
            14.08.2020, 08:56
            Тогда измените на следующее:
            function test(val) {
              if (val < 0) {
                return 'Negative';
              } else if (val > 0) {
                return 'Positive';
              }
              return 'Zero';
            }
            
            Но в этом случае если вы передадите в функцию не число, то у вас выведется 'Zero'.
            1. Ekaterina
              Ekaterina
              14.08.2020, 09:12
              То же пишет ошибку. Сделала методом «тыка» вот так и оказалось верным:
              function test(val) {
              if (val < 0) {
              return 'Negative';
              } if (val > 0) {
              return 'Positive';
              }
              return 'Zero';
              }
              Александр, почему второе условие (val > 0) мы прописываем без else?
              Почему Zero просто возвращаем?
              1. Александр Мальцев
                Александр Мальцев
                15.08.2020, 14:26
                Если вы учитесь в какой-то программе, то лучше выбрать что-то другое. Иначе вы зайдёте в тупик с изучением JavaScript. Так как вы написали код, он работать будет. Но в предыдущем примере тоже никаких ошибок нет.
                Код, который вы написали работает так. Если параметр val меньше 0, то функция завершает работу и возвращает строку 'Negative'. Если нет, то выполняется следующий if. В котором проверяем больше ли значение параметра val нуля. Если да, то завершаем работу функции и возвращаем 'Positive'. Если нет, то возвращаем 'Zero'.
                1. Ekaterina
                  Ekaterina
                  16.08.2020, 16:52
                  Понятно, спасибо большое за помощь!
          2. Ekaterina
            Ekaterina
            14.08.2020, 07:03
            Я неправильно поняла суть задачи. Там несколько условий: Напишите функцию, которая принимает число и возвращает Negative если число меньше нуля, Positive если больше нуля, Zero если равно нулю.
            Решение:
            1. function test(val) {
            2. if (val < 0) {
            3. return Negative;
            4. } else {
            5. return Positive;
            6. else if (val > 0) {
            7. return Zero
            8. }
            9. }

            Что я делаю не так?
            7. }
            1. Александр Мальцев
              Александр Мальцев
              14.08.2020, 07:25
              Так вы должны просто возвращать соответствующую строку:
              function test(val) {
                if (val < 0) {
                  return 'Negative';
                } else if (val > 0) {
                  return 'Positive';
                } else if (val === 0) {
                  return 'Zero';
                }
              }
            2. Ekaterina
              Ekaterina
              13.08.2020, 17:39
              Александр, проконсультируйте пожалуйста по решению след.задачи:
              Напишите функцию, которая принимает число и возвращает Negative если число меньше нуля.
              Решение:
              1. function test(val) {
              2. код
              3. }
              Мое решение (неправильное), с использованием оператора:
              1.function test(val) {
              2.if (val < 0) {
              3. return test('Negative')
              4. }
              Я совсем далека от верного решения? В чем ошибка? (сильно не бейте))
              1. Александр Мальцев
                Александр Мальцев
                14.08.2020, 07:22
                В return указывайте то, что хотите вернуть:
                function test(val) {
                  if (val < 0) {
                    return 'Negative';
                  }
                }
                
              Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.