Skip to content

6. Operators (операторы)

Jump to bottom
Igor Demin edited this page Nov 3, 2023 · 6 revisions

Операторы

Оператор - это встроенная функция которая как и обычная функция выполняет какие-то действия и возвращает значение. В этом разделе будут:

  • Операторы
  • Операнды
  • Унарные и бинарные
  • Инфиксная, префиксная и постфиксная записи

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

+ - * / - Арифметические

=== !== <=, >= - Сравнения

! && || - Логические (не, и, или)

= - Присваивания

Текстовые операторы typeof - проверить тип значения instanceof - проверить принадлежность объекта к тому или иному классу new - создаёт новый экземпляр объекта delete - удалить св-во в объекте

Операнды или аргументы

a = 10 тут a и 10 это операнды или аргументы, левый и правый, на angl - left hand и right hand Встроенные функции выглядят примерно так, на примере a = 10:

function =(переменная, выражение) { // переменная тут это "a", а выражение просто число "10"
  1. Получение результата выражения
  2. Поиск переменной по имени // имя тут "a"
  3. Присваивание результата выражения переменной // присваиваем "10" переменной "a"
  4. Возврат результата выражения
}

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

Унарные операторы - это операторы у которых только один аргумент(операнд).

a++ - увеличивает значение переменной на единицу
+a - с помощью этого оператора можно конвертировать например строку в число
delete obj.a - это тоже унарный оператор, он удаляет св-во объекта
tyoeof a - определяет тип переменной
new Object() - создаёт новый экземпляр объекта

Бинарные операторы - это операторы у которых всегда два аргумента(операнда). Несколько примеров:

a = 5
a + b
a += 5 // увеличение значения на определенное число и присваиваем новое значение переменной
a === b // такой оператор сравнивает и присваивает значение, а === сравнивает еще и тип, т.е. если сравнить строку 5 и число 5 то получим false
a && b

Формат записи операторов

Инфиксная запись - это когда оператор находится между операндами(агрументами)

a = true
a + b
a += b
a || b
a > b

Префиксная запить - когда оператор находится перед операндом

++a // у этого есть и еще постфиксная запись - a++
delete obj.a
typeof a

Постфиксная запись - когда оператор идёт за операндом

a++
myFunction()

Приоритетность выполнения операторов

Приоритет операторов в JS
Но на самом деле можно логически понять в каком приоритете будут выполняться операторы.

a + b * c / d - e // всё так же как в математике
a + ((b * c) / (d - e)) // так же как в математике можно изменить приоритет скобками

Ложные значения

Это значения которые при приведении к логическому типу Boolean покажут false. Привести любое значение к Boolean можно специальной функцией Boolean(value) -> false, следующие значения считаются ложными в JS:

false
0
''
undefined
null

ПРИМЕР:

console.log(Boolean(0))

Практика с typeof

console.log(typeof(10)) // number
console.log(typeof 10 === 'number') // true так можно проверить тип переменной

let isUndefined
console.log(isUndefined) // undefined
console.log(typeof isUndefined === 'undefined') // true

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

! - префиксный оператор не т.е. всегда пишется перед операндом. Boolean всегда возвращает true или false

&& и || - бинарные операторы, могут использоваться вместе, возвращают значение одного из операндов.

Оператор отрицания не !

Всегда даёт одно из 2х boolean значений true или false, Чаще всего он используется в условных инструкциях, это такие инструкции как if и ifelse.

!10    // false
!0     // true
!'abc' // false
!''    // true
!true  // false
!undefined  // true

Рассмотрим другой пример с !!, используя этот оператор любое значение можно сконвертировать с boolean и тем самым можно проверить ложность значения.

!!10    // true
!!0     // false
!!'abc' // true
!!''    // false
!!true  // true
!!undefined  // false

Операторы короткого замыкания && (short circuit)

Оператор "логическое и" && требует true во всех выражениях

Выражение 1 && Выражение 2

Если выражение 1 - false:

  1. Выражение 2 игнорируется
  2. Возвращается результат Выражения 1 т.е. false 
123 && null // null

Если выражение 1 - true:

  1. Выражение 2 выполняется и оценивается
  2. Если Выражение 2 false то возвращается результат Выражения 2 т.е. false

Если выражение 1 - true:

  1. Выражение 2 выполняется и оценивается
  2. Если Выражение 2 true то возвращается тоже результат Выражения 2 т.е. true

Операторы короткого замыкания || (short circuit)

Выражение 1 || Выражение 2

Если выражение 1 - true:

  1. Выражение 2 игнорируется
  2. Возвращается результат Выражения 1 т.е. true 
123 || null // 123

Если выражение 1 - false:

  1. Выражение 2 выполняется и оценивается
  2. Если Выражение 2 true то возвращается тоже результат Выражения 2 т.е. true

Если выражение 1 - false:

  1. Выражение 2 выполняется и оценивается
  2. Если Выражение 2 false то возвращается результат Выражения 2 т.е. false

Трюк с оператором && и вызовом функции

let b = 10
b &&  console.log('Executed!')
// В консоль придет Executed!

let c
c && console.log('Executed!')
// В консоль придет Undefined

Этот трюк используется чтобы условно вызывать те или иные функции всего одной строкой вместо инструкции if который описывается несколькими строками.

Цепочка операторов && и || 

a && b && c && d

В этом случае будет возвращено первое найденное значение false и возвращено от той переменной где оно найдено, остальные переменные или выражения не оцениваются. Если все истина то возвращаем результат d независимо от того ложно оно или истинно. ВАЖНО: потому что эти операторы всегда возвращают значения одного из операндов.

a || b || c || d

Тут тоже самое только ищем первое истинное выражение и возвращаем его значение.

Оператор ... разделения объекта на св-ва

ПРИМЕР 1: Создаём новый объект на основе ранее созданного и добавляем св-ва.

const button = {
  width: 200,
  text: 'Buy'
}

const redButton = {
  ...button,
  color: 'red'
}

console.table(redButton)

Получим:
┌─────────┬────────┐
│ (index) │ Values │
├─────────┼────────┤
│  width  │  200   │
│  text   │ 'Buy'  │
│  color  │ 'red'  │
└─────────┴────────┘

ПРИМЕЧАНИЕ 1: Если у объекта button уже есть такое св-ва как color например color: 'black', то оно будет перезаписано с новым значением color: 'red'. Но если color: 'red' поставить выше ...button то наоборот color: 'red' перепишется на color: 'black'

ПРИМЕР 2: Создаём новый объект из 2х ранее созданных

const buttonInfo = {
  text: 'Buy'
}

const buttonStyle = {
  color: 'red',
  width: 200,
  height: 300
}

const button = {
  ...buttonInfo,
  ...buttonStyle
}

console.table(button)

Получим:
┌─────────┬────────┐
│ (index) │ Values │
├─────────┼────────┤
│  text   │ 'Buy'  │
│  color  │ 'red'  │
│  width  │  200   │
│ height  │  300   │
└─────────┴────────┘

ПРИМЕЧАНИЕ 1: Если в последствии мы будем изменять значения в объекте button, то они не будут меняться в объектах buttonInfo и buttonStyle, т.е. мутирования объектов не будет, но только ЕСЛИ У ИСХОДНЫХ ОБЪЕКТОВ НЕ БЫЛО ВЛОЖЕННЫХ ОБЪЕКТОВ.

footer

Clone this wiki locally