В этой статье рассмотрим основные операторы JS: от самых базовых математических до более специфичных. Узнаем, как использовать логические и битовые операции, что такое унарный оператор и в каком порядке выполняются операторы (таблица приоритета операторов).

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

В результате использования оператора присваивания, левому операнду от знака присваивания = устанавливается значение правого.

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

1. Обычное присваивание:

         let a = 5; let x = a; console.log(a,x);// 5 5     

2. Присваивание с арифметическим действием:

• += – для прибавления значения;
• -= – вычесть правое значение из левого;
• *= – умножить на операнд;
• /= – разделить и записать значение в правый операнд.

Пример использования присваивания с арифметикой:

         let a = 5; let sum = 1; sum += a; // 6  let sub = 6; sub -= a; // 1  let mul = 2; mul*= a; // 10  let div = 15; div/=a; // 3   console.log(sum, sub, mul, div); // 6 1 10 3     

3. Присваивание с битовыми операциями:

• AND (&=) – побитовое И выполняет И с каждым битом правого и левого операнда, записывая значение в правый операнд;
• XOR (^=) – побитовое исключающее ИЛИ по аналогии выполняет побитно исключающее ИЛИ, результат в правом операнде;
• OR (|=) – побитовое ИЛИ.

         let and = 101;  and &= 100; console.log(and); // 100  let xor = 101;  xor ^= 10;  console.log(xor); // 111  let or = 100;  or |= 10;  console.log(or); // 110      

Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера» Интересно, перейти к каналу

Деструктуризация

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

         let array = [1,2,3,4,5]; let [first,second] = array; console.log(first); // 1      

Количество переменных в левой части может:

• быть меньше, чем количество элементов массива – каждому записывается первые N значение;
• равно количеству элементов. В каждую переменную помещается соответствующее значение;
• больше, но в этом случае учитывайте появление значения undefined в своей переменной.

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

Существует два вида сравнения: с приведением типа переменных и без.

С приведением типа переменных к одному:

• равно (==) – true при равных значениях, причем типы могут быть разными (можно сравнить число и строку);
• неравно (!=) – true, если операнды не равны по значению;
• больше/больше или равно (>,>=) – возвращает true, если левый операнд больше/или равен;
• меньше/меньше или равно (<,<=) – true, если левый операнд меньше/меньше или равен.

         console.log(false == 0); // true console.log('2' != 2); // false console.log( 5 > '3'); // true console.log('2' < true); // false     

Без приведения типов:

• строго равно (===) – true, если операнды равны по значению и по типу;
• строго неравно (!==) – true при разных операндах или их типах.

         console.log(1 !== 0); // true console.log('2' === 2); // false      

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

В JS поддерживаются следующие виды арифметических операторов:

Сложение	+	x + y
Вычитание	—	x – y
Умножение	*	x * y
Деление	/	x / y
Остаток от деления	%	9 % 4 вернет значение 1
Инкремент	++	6++ вернет 6, а после выполнит инкремент. ++6 выполнит инкремент и вернет 7.
Декремент	—	6— вернет 6, а после выполнит декремент. —6 выполнит декремент и вернет 5.
Возведение в степень	**	5** 2 вернет 25

         let a = 16; let b = 4;  console.log(a + b); // 20 console.log(a * b); // 64 console.log(a % b); // 0 console.log(a ** (b/2)); // 256      

Битовые (поразрядные) операторы

Любая битовая операция представляет переданное число в виде двоичного. Хотя действия обрабатывают двоичные число, но возвращаемое значение представлено обычным десятичным числом.

Битовые логические операторы

Битовые операции представляют собой следующий набор операторов:

• Побитовое И (x & y) – для каждого бита выполняется операция И.
• Побитовое ИЛИ (x | y) – для каждой пары битов выполняется ИЛИ.
• Побитовое НЕ (~ х) – инверсия битов.
• Побитовый XOR (x ^ y) – исключающее ИЛИ, единица в битах там, где значение пары битов разное (1 и 0).

         let a = 10; // 1010 let b = 3; // 11  console.log(a & b); // 2 =>  в двоичной системе 10 console.log(a ^ b); // 9 =>  в двоичной системе 1001      

Битовые операторы сдвига

Чтобы выполнить битовый сдвиг, используйте один из методов:

• << – битовый сдвиг влево, первые биты отбрасываются, слева дополняется нулевыми битами;
• >> – битовый сдвиг вправо, правые биты отбрасываются, начало заполняется копией последнего левого бита;
• >>> – сдвиг вправо с заполнением слева нулевыми битами.

         // 23 == 10111 console.log(23<<2); // 1011100 console.log(23>>2); // 101 console.log(23>>>2); // 101      

Также эти операторы можно использовать с оператором присваивания =. Например:

         let a = 23; a <<= 2; // 1011100      

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

Логические операторы чаще всего применяются для создания условий. В JS применять логические операторы можно ко всем типам данных. После применения операторов возвращается значение true или false.

Распространенные виды логических операторов:

1. || – логическое ИЛИ. Возвращает true, если хотя бы один из элементов true.
2. && – Логическое И. Вернет true только в том случае, если оба элемента true, иначе – false.
3. ! – Оператор НЕ. Инверсия элемента: при true – вернет false.

         let a = true; let b = 0; // false  console.log(a && b); // 0 console.log(b || a); // true console.log(!b); // true      

Сокращённая оценка

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

• false && anything – всегда возвращает false;
• true || anything – всегда возвращает true.

         let a = 10; let b = 15 || (a=1); console.log(a); // 10      

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

Операция сложения применима и к строковым типам данных для объединения операндов в одну строку. Пример использования оператора +:

         let string_1 = 'Hello'; let string_2 = 'world'; console.log(string_1+' '+string_2+'!'); // Hello world!      

Можно использовать сокращенную запись +=.

Условный (тернарный) оператор

Тернарный оператор представляет собой сокращенную запись условия. Общий шаблон оператора выглядит так:

• условие? значение1 : значение2
• если условие Истина, то вся конструкция будет возвращать значение1
• в противном случае то, что стоит после :, т. е. значение2

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

         let name = 2>3 ? 'Marina' : 'Dasha'; console.log(name); // 'Dasha'      

Оператор «запятая»

Запятая помогает определить ту последовательность действий, которая должна быть выполнена за один раз. Например, за один проход в цикле необходима итерация для двух переменных:

         let arr = [[1,2,3],[4,5,6],[7,8,9]]; for(let i=0,j =0; i<arr.length;i++,j++){     console.log(arr[i][j]) }      

Стоит учитывать, что стоящие через запятую вычисления будут возвращать только последнее значение.

         let a = 'Hello'; let b = (a + ' ', a + 'world'); console.log(b); // Helloworld      

Унарные операторы

Унарные операторы – это те, которые используют только один оператор. Примеры таких операторов: delete, typeof, void.

delete

Оператор удаляет элемент массива по индексу, а также удаляет свойство из объекта.

Delete возвращает true, когда операцию удаления можно выполнить, false в других случаях. Например:

• нельзя удалить переменную, объявленную через var, let;
• нельзя удалять стандартные методы.

         let number = 25; let object= new Object(); object.size=15; object.title = 'Delete object';  console.log(delete object.size); // true console.log(delete number); // false  delete object.size; console.log(object); // { title: 'Delete object' }      

Удаление элементов массива

Стоит быть внимательнее при удалении элемента массива с помощью delete. Данная операция не влияет на размер массива, удаляется только элемент. Также удаленный элемент станет undefined и будет недоступен для операций.

Оператор typeof

Оператор typeof возвращает строку со значением типа операнда.

         let number = 25; let object= new Object(); let func = function(){};  console.log(typeof number); // "number" console.log(typeof object); // "object" console.log(typeof func); // "function"      

Оператор void

Оператор void вычисляет любое выражение, которое ему было передано, и всегда возвращает undefined. С помощью оператора можно создать сразу же вызываемую функцию:

         void function printSometing() {   console.log('Something') }()  console.log(typeof printSometing) // undefined      

Операторы отношения

Операторы отношения проводят сравнения двух операндов и возвращают true или false.

Оператор in

С помощью оператора in проверяется наличие свойства в объекте или элемента в массиве. Возвращает всегда булева значения.

         let array = [1,2,3]; console.log(15 in array); // true console.log(1 in array); // false      

Оператор instanceof

Проверяет тип объекта и указанный тип. Возвращает true или false.

         let array = []; console.log(array instanceof Array); // true console.log({} instanceof Object); // false      

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

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

Приоритет	Тип оператора	Оператор
19	Группировка	( … )
18	Операторы доступа к элементам списка, свойствам функция new с аргументами, вызов функции	obj.title array[1] new …(…) func(params)
17	Функция new без аргументов	new …()
16	Постфиксный инкремент и декремент	…++…—
15	Логическое НЕ,побитовое отрицание, префиксный инкремент и декремент, унарные функции typeof, void, delete	!~++…—…typeofvoiddelete
14	Степень числа	**
13	Умножение, деление, остаток от деления	*/%
12	Сложение, вычитание	+-
11	Побитовые сдвиги	>><<>>>
10	Меньше, меньше или равно, больше, больше или равно, in, instanceof	<<=>>=ininstanceof
9	Равно, неравно, строго равно, строго неравно	==!====!==
8	Побитовое И	&
7	Побитовое ИСКЛЮЧАЮЩЕЕ ИЛИ	^
6	Побитовое ИЛИ	|
5	Логическое И	&&
4	Логическое ИЛИ	||
3	Тернарный оператор	consotion ? value1 : value2
2	Присваивание,присваивание с арифметическим оператором, присваивание со сдвигом, с битовой или логической операцией	= +=, -=, *=, /= <<=, >>=, >>>= &=, ^=, |= &&=, ||=
1	Запятая	,

***

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

Материалы по теме

• ☕ Учебник по JavaScript: ООП на простых примерах
• ☕ Учебник по JavaScript: работа с датой и временем
• ☕ 40 основных и нестандартных методов для работы со строками в JavaScript