JavaScript - Операторный приоритет

Привет, будущие программисты! Сегодня мы окунемся в тему, которая сначала может показаться немного пугающей, но я обещаю вам, это не так страшно, как кажется. Мы говорим о приоритете операторов в JavaScript. Представьте это как "иерархию" математики в программировании. Давайте разберем это вместе!

Что такое приоритет операторов?

Прежде чем мы полезем в深海, начнем с основ. Приоритет операторов resembles порядок выполнения операций, который вы изучали на уроках математики. Помните PEMDAS (Скобки, Степени, Умножение, Деление, Сложение, Вычитание)? Ну, JavaScript имеет свою версию этого!

Приоритет операторов определяет, как операторы анализируются друг относительно друга. Операторы с более высоким приоритетом становятся операндами операторов с более низким приоритетом.

Давайте рассмотрим простой пример:

let result = 5 + 3 * 2;
console.log(result); // Вывод: 11

Вы можете подумать, что ответ должен быть 16 (5 + 3 = 8, затем 8 2 = 16), но на самом деле это 11. Почему? Потому что умножение имеет более высокий приоритет, чем сложение. Так что 3 2 высчитывается сначала (дает 6), а затем к нему добавляется 5.

Ассоциативность

Теперь давайте поговорим о замысловатом слове: ассоциативность. Не волнуйтесь, это проще, чем кажется!

Ассоциативность определяет порядок выполнения операций для операторов одного приоритета. Она может быть левосторонней или правосторонней.

Левосторонняя ассоциативность

Большинство операторов следуют левосторонней ассоциативности. Это означает, что они оцениваются слева направо. Давайте рассмотрим пример:

let a = 10 - 5 - 2;
console.log(a); // Вывод: 3

Вот как JavaScript обрабатывает это:

1. 10 - 5 = 5
2. 5 - 2 = 3

Правосторонняя ассоциативность

Some operators, like the assignment operator (=), have right-to-left associativity. Let's see how this works:

let a, b, c;
a = b = c = 5;
console.log(a, b, c); // Вывод: 5 5 5

JavaScript обрабатывает это справа налево:

1. c = 5
2. b = c (который равен 5)
3. a = b (который равен 5)

Таблица приоритетов операторов

Теперь давайте посмотрим на "меню" приоритетов операторов в JavaScript. Не волнуйтесь, если вы пока не понимаете все это - мы рассмотрим некоторые примеры!

Приоритет	Тип оператора	Ассоциативность	Операторы
19	Группировка	н/д	( ... )
18	Доступ к члену	левосторонняя	. []
17	Вызов функции	левосторонняя	... ( )
16	New (с列表ом аргументов)	н/д	new ... ( )
15	Постаточный инкремент/декремент	н/д	... ++ ... --
14	Логическое НЕТ, Битовое НЕТ, Unary Plus/Minus, Предынкремент/декремент, typeof, void, delete, await	правосторонняя	! ~ + - ++ -- typeof void delete await
13	Усиление	правосторонняя	**
12	Умножение, Деление, Остаток	левосторонняя	* / %
11	Сложение, Вычитание	левосторонняя	+ -
10	Битовое смещение	левосторонняя	<< >> >>>
9	Отношения	левосторонняя	< <= > >= in instanceof
8	Равенство	левосторонняя	== != === !==
7	Битовое И	левосторонняя	&
6	Битовое ИСКЛЮЧАЮЩЕЕ ИЛИ	левосторонняя	^
5	Битовое ИЛИ	левосторонняя	|
4	Логическое И	левосторонняя	&&
3	Логическое ИЛИ	левосторонняя	||
2	Условный	правосторонняя	?:
1	Присваивание	правосторонняя	= += -= *= /= %= <<= >>= >>>= &= ^= |= **=
0	Запятая	левосторонняя	,

Примеры

Теперь давайте применим эти знания на практике с помощью некоторых примеров!

Пример 1: Арифметические операции

let result = 2 + 3 * 4 - 1;
console.log(result); // Вывод: 13

Вот как JavaScript оценивает это:

1. 3 * 4 = 12 (умножение имеет более высокий приоритет)
2. 2 + 12 = 14
3. 14 - 1 = 13

Пример 2: Логические операции

let x = 5;
let y = 10;
let z = 15;

let result = x < y && y < z || x > z;
console.log(result); // Вывод: true

Давайте разберем это:

1. x < y это true
2. y < z это true
3. true && true это true
4. x > z это false
5. true || false это true

Remember, && (AND) has higher precedence than || (OR).

Пример 3: Смешанные операции

let a = 3;
let b = 4;
let c = 5;

let result = a + b * c > c * (a + b) && a < b;
console.log(result); // Вывод: false

Это выглядит сложно, но давайте разберем это шаг за шагом:

1. b * c = 20
2. a + 20 = 23
3. c (a + b) = 5 7 = 35
4. 23 > 35 это false
5. a < b это true
6. false && true это false

Пример 4: Присваивание и сравнение

let x, y, z;
x = y = z = 5;
console.log(x, y, z); // Вывод: 5 5 5

let result = x == y === z;
console.log(result); // Вывод: true

Remember, assignment (=) has right-to-left associativity, while equality comparisons (==, ===) have left-to-right associativity.

1. z = 5
2. y = z (который равен 5)
3. x = y (который равен 5)
4. x == y это true
5. true === z это true (потому что z равен 5, что является правдивым)

Заключение

Поздравляю! Вы только что сделали первые шаги к пониманию приоритета операторов в JavaScript. Помните, что практика делает мастера. Не бойтесь экспериментировать с различными комбинациями операторов - так вы действительно интегрируете эти concepts.

И вот профессиональный совет: если сомневаетесь, используйте скобки! У них самый высокий приоритет и они могут сделать ваш код более читаемым. Например:

let result = (2 + 3) * 4 - 1;
console.log(result); // Вывод: 19

Таким образом, вы явно告诉 JavaScript, как вы хотите, чтобы выражение было оценено.

Продолжайте программировать, продолжайте учиться и, самое главное, получайте удовольствие! JavaScript - это мощный язык, и понимание этих основ将为 вам успех в вашем программировании.

Credits: Image by storyset