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

Сложение + 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, определили как использовать логические и битовые операции, узнали что такое унарный оператор и какой приоритет у каждого из них.

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

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ

eFusion
01 марта 2020

ТОП-15 книг по JavaScript: от новичка до профессионала

В этом посте мы собрали переведённые на русский язык книги по JavaScript – ...
admin
10 июня 2018

Лайфхак: в какой последовательности изучать JavaScript

Огромный инструментарий JS и тонны материалов по нему. С чего начать? Расск...