☕ Учебник по JavaScript: основные операторы

В этой статье рассмотрим основные операторы 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 поддерживаются следующие виды арифметических операторов:

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

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

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

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

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

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