Базовые математические операции в JavaScript
В этой статье для начинающих, ты узнаешь как в JS работает сложение, вычитание, умножение и деление разных типов данных.
JavaScript поддерживает все базовые арифметические операции. Сегодня я расскажу тебе об операторах + , — , * , и / .
Сложение
Оператор + используется в JavaScript, чтобы сложить два значения. Ему нужно два операнда (числа в нашем случае), чтобы правильно работать:
Результат получился ровно таким, как мы и ожидали. Два плюс два равно четыре. Но все становится сложнее и запутаннее, когда мы попробуем работать с другими типами данных.
Если один из операндов строка, то второй будет тоже рассматриваться как строка. Эти строки будут склеены вместе, чтобы получить результат.
Также, можно поместить функцию, объект или массив с любой стороны оператора + . В этом случае они сначала будут конвертированы в строки.
Заметь, что большинство объектов станут строками вида [object Object] . Это стандартная реализация toString в JavaScript. Если тебе нужно что-то другое, ты должен писать свою имплементацию функции toString() .
Интересные вещи происходят, если один из операндов — boolean (переменная логического типа), а другой число. Или оба операнда boolean . В таких случаях, переменные логического типа будут конвертированы в числа. true станет равно 1 , а false превратится в 0 .
Вычитание, умножение и деление
Базовые правила сложения и выглядят сложно для разных типов данных. Но пока мы работаем с числами, все просто. То же верно и для JavaScript операторов * , / и — .
Булевы значения также конвертируются в 0 или 1 , когда с другой стороны оператора стоит другой boolean или число.
Infinity и -Infinity
Если ты попробуешь разделить число на 0 или false , то в результате получишь Infinity или -Infinity .
В других случаях, когда JavaScript не может нормально посчитать результат выражения, ты получишь NaN . Это специальное “не-число”, сокращение от “not-a-number”.
Пустой массив
Пустой массив превращается в пустую строку или 0 в зависимости от других операндов.
Унарный инкремент и декремент в JavaScript
В JS, есть два очень полезных оператора, которые увеличивают или уменьшают значение числа на единицу. Их называют операторами унарного инкремента (увеличение) и декремента (уменьшение). Унарные они потому, что им нужен только один операнд для корректной работы.
Выглядят эти операторы, как двойной плюс ++ и двойной минус — .
Операторы ++ и — можно написать с любой стороны переменной. Записи counter++ и ++counter сделают почти одно и то же. Разницу покажу на примере:
Сначала мы берем значение i , выводим на экран и только после этого делаем инкремент. Результат инкремента станет виден во втором console.log .
А если написать ++i , то все будет наоборот. Сначала мы выполним инкремент, а уже потом обновленное значение i попадет в console.log .
Чтобы убедиться, что ты все правильно понял, посчитай этот пример. Ответить можешь мне на почту или в телеграм. Ссылки есть на главной странице.
Вывод
Ты узнал о базовой математике JavaScript, ее правилах и исключениях.
Операции + , — , * , / работают как ожидается с числами, но со строками, объектами, массивами, булевыми переменными и функциями ведут себя иначе.
Базовые операторы, математика
Многие операторы знакомы нам ещё со школы: сложение + , умножение * , вычитание — и так далее.
В этой главе мы начнём с простых операторов, а потом сконцентрируемся на специфических для JavaScript аспектах, которые не проходят в школьном курсе арифметики.
Термины: «унарный», «бинарный», «операнд»
Прежде, чем мы двинемся дальше, давайте разберёмся с терминологией.
Операнд – то, к чему применяется оператор. Например, в умножении 5 * 2 есть два операнда: левый операнд равен 5 , а правый операнд равен 2 . Иногда их называют «аргументами» вместо «операндов».
Унарным называется оператор, который применяется к одному операнду. Например, оператор унарный минус "-" меняет знак числа на противоположный:
Бинарным называется оператор, который применяется к двум операндам. Тот же минус существует и в бинарной форме:
Формально, в последних примерах мы говорим о двух разных операторах, использующих один символ: оператор отрицания (унарный оператор, который обращает знак) и оператор вычитания (бинарный оператор, который вычитает одно число из другого).
Математика
Поддерживаются следующие математические операторы:
- Сложение + ,
- Вычитание — ,
- Умножение * ,
- Деление / ,
- Взятие остатка от деления % ,
- Возведение в степень ** .
Первые четыре оператора очевидны, а про % и ** стоит сказать несколько слов.
Взятие остатка %
Оператор взятия остатка % , несмотря на обозначение, никакого отношения к процентам не имеет.
Результат a % b – это остаток от целочисленного деления a на b .
Возведение в степень **
Оператор возведения в степень a ** b возводит a в степень b .
В школьной математике мы записываем это как a b .
Математически, оператор работает и для нецелых чисел. Например, квадратный корень является возведением в степень 1/2 :
Сложение строк при помощи бинарного +
Давайте рассмотрим специальные возможности операторов JavaScript, которые выходят за рамки школьной арифметики.
Обычно при помощи плюса ‘+’ складывают числа.
Но если бинарный оператор ‘+’ применить к строкам, то он их объединяет в одну:
Обратите внимание, если хотя бы один операнд является строкой, то второй будет также преобразован в строку.
Как видите, не важно, первый или второй операнд является строкой.
Вот пример посложнее:
Здесь операторы работают один за другим. Первый + складывает два числа и возвращает 4 , затем следующий + объединяет результат со строкой, производя действие 4 + ‘1’ = ’41’ .
Сложение и преобразование строк — это особенность бинарного плюса + . Другие арифметические операторы работают только с числами и всегда преобразуют операнды в числа.
Например, вычитание и деление:
Приведение к числу, унарный +
Плюс + существует в двух формах: бинарной, которую мы использовали выше, и унарной.
Унарный, то есть применённый к одному значению, плюс + ничего не делает с числами. Но если операнд не число, унарный плюс преобразует его в число.
На самом деле это то же самое, что и Number(. ) , только короче.
Необходимость преобразовывать строки в числа возникает очень часто. Например, обычно значения полей HTML-формы — это строки. А что, если их нужно, к примеру, сложить?
Бинарный плюс сложит их как строки:
Поэтому используем унарный плюс, чтобы преобразовать к числу:
С точки зрения математика, такое изобилие плюсов выглядит странным. Но с точки зрения программиста тут нет ничего особенного: сначала выполнятся унарные плюсы, которые приведут строки к числам, а затем бинарный ‘+’ их сложит.
Почему унарные плюсы выполнились до бинарного сложения? Как мы сейчас увидим, дело в их приоритете.
Приоритет операторов
В том случае, если в выражении есть несколько операторов – порядок их выполнения определяется приоритетом, или, другими словами, существует определённый порядок выполнения операторов.
Из школы мы знаем, что умножение в выражении 1 + 2 * 2 выполнится раньше сложения. Это как раз и есть «приоритет». Говорят, что умножение имеет более высокий приоритет, чем сложение.
Скобки важнее, чем приоритет, так что, если мы не удовлетворены порядком по умолчанию, мы можем использовать их, чтобы изменить приоритет. Например, написать (1 + 2) * 2 .
В JavaScript много операторов. Каждый оператор имеет соответствующий номер приоритета. Тот, у кого это число больше, – выполнится раньше. Если приоритет одинаковый, то порядок выполнения – слева направо.
Отрывок из таблицы приоритетов (нет необходимости всё запоминать, обратите внимание, что приоритет унарных операторов выше, чем соответствующих бинарных):
| Приоритет | Название | Обозначение |
|---|---|---|
| … | … | … |
| 15 | унарный плюс | + |
| 15 | унарный минус | — |
| 14 | возведение в степень | ** |
| 13 | умножение | * |
| 13 | деление | / |
| 12 | сложение | + |
| 12 | вычитание | — |
| … | … | … |
| 2 | присваивание | = |
| … | … | … |
Так как «унарный плюс» имеет приоритет 15 , который выше, чем 12 у «сложения» (бинарный плюс), то в выражении "+apples + +oranges" сначала выполнятся унарные плюсы, а затем сложение.
Присваивание
Давайте отметим, что в таблице приоритетов также есть оператор присваивания = . У него один из самых низких приоритетов: 2 .
Именно поэтому, когда переменной что-либо присваивают, например, x = 2 * 2 + 1 , то сначала выполнится арифметика, а уже затем произойдёт присваивание = с сохранением результата в x .
Присваивание = возвращает значение
Тот факт, что = является оператором, а не «магической» конструкцией языка, имеет интересные последствия.
Большинство операторов в JavaScript возвращают значение. Для некоторых это очевидно, например сложение + или умножение * . Но и оператор присваивания не является исключением.
Вызов x = value записывает value в x и возвращает его.
Благодаря этому присваивание можно использовать как часть более сложного выражения:
В примере выше результатом (a = b + 1) будет значение, которое присваивается переменной a (то есть 3 ). Потом оно используется для дальнейших вычислений.
Забавное применение присваивания, не так ли? Нам нужно понимать, как это работает, потому что иногда это можно увидеть в JavaScript-библиотеках.
Однако писать самим в таком стиле не рекомендуется. Такие трюки не сделают ваш код более понятным или читабельным.
Присваивание по цепочке
Рассмотрим ещё одну интересную возможность: цепочку присваиваний.
Такое присваивание работает справа налево. Сначала вычисляется самое правое выражение 2 + 2 , и затем результат присваивается переменным слева: c , b и a . В конце у всех переменных будет одно значение.
Опять-таки, чтобы код читался легче, лучше разделять подобные конструкции на несколько строчек:
Польза от такого стиля особенно ощущается при быстром просмотре кода.
Сокращённая арифметика с присваиванием
Часто нужно применить оператор к переменной и сохранить результат в ней же.
Базовая математика в JavaScript — числа и операторы
В этой части курса мы обсуждаем математику в JavaScript — как мы можем использовать operators (en-US) и другие функции, чтобы успешно манипулировать числами для выполнения наших задач.
| Необходимые условия: | Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript. |
|---|---|
| Цель: | Ознакомление с основами математики в JavaScript. |
Все любят математику
Хорошо, может быть, не все. Некоторые из нас любят математику, некоторые из нас ненавидели математику с тех пор, как мы изучали таблицу умножения в школе, а некоторые из нас находятся где-то между ними. Но никто из нас не может отрицать, что математика является фундаментальной частью жизни, и мы не можем обойтись без неё. Это особенно актуально, когда мы учимся программировать на JavaScript (или на любом другом языке, если на то пошло) — большая часть того, что мы делаем, опирается на обработку числовых данных, вычисление новых значений и т.д. Так что не удивительно, что JavaScript имеет полнофункциональный набор математических функций.
В этой статье обсуждаются только основные разделы, которые вам нужно знать сейчас.
Типы чисел
В программировании даже скромная система десятичных чисел, которую мы все так хорошо знаем, сложнее, чем вы думаете. Мы используем разные термины для описания различных типов десятичных чисел. Например:
- Целые — это целые числа, такие как: 10, 400, или -5.
- С плавающей точкой(или: с плавающей запятой) — имеют целую и дробную части, например: 12.5 или 56.7786543.
- Doubles — тип чисел с плавающей точкой, которые имеют большую точность, чем стандартные числа с плавающей точкой (что означает, что они точны для большего числа десятичных знаков).
У нас даже есть разные типы числовых систем:
- Бинарная — низкоуровневый язык компьютеров; нули и единицы (0 и 1);
- Восьмеричная — 8-ми разрядная, использует 0–7 в каждом столбце;
- Десятичная — 10-ти разрядная, использует 0-9 в каждом столбце;
- Шестнадцатеричная — 16-ти разрядная, используют 0–9 и потом a–f в каждом столбце. Вы, возможно, уже встречали эти числа, когда задавали цвет в CSS.
Прежде чем взорвётся ваш мозг, остановитесь прямо здесь и сейчас!
Во-первых, мы просто будем придерживаться десятичных чисел на протяжении всего курса; вы редко когда будете сталкиваться с необходимостью думать в других числовых системах, если вообще когда-либо с ней столкнётесь.
Во-вторых, в отличие от некоторых других языков программирования, JavaScript имеет только один тип данных для чисел, как вы догадались это Number . Это означает, независимо от типа чисел, с которыми вы работаете в JavaScript, обрабатывать вы их будете точно так же.
Для меня всё — числа
Давайте быстро поиграем с некоторыми числами, чтобы снова познакомиться с основным синтаксисом, который нам нужен. Введите команды, перечисленные ниже, в вашу консоль (developer tools JavaScript console), или используйте простую встроенную консоль.
-
Прежде всего, давайте объявим пару переменных и инициализируем их целым числом и числом с плавающей точкой, соответственно, затем введите имена переменных обратно, чтобы проверить, что все в порядке:
Арифметические операторы
Арифметические операторы — это основные операторы, которые мы используем для различных математических операций, например таких, как сложение или вычитание:
| Оператор | Имя | Функция | Пример |
|---|---|---|---|
| + | Сложение | Объединение чисел в одно целое. | 6 + 9 |
| — | Вычитание | Вычитает правое число от левого. | 20 — 15 |
| * | Умножение | Умножает два числа вместе. | 3 * 7 |
| / | Деление | Делит левое число на правое. | 10 / 5 |
| % | Модуль числа | Возвращает значение остатка при делении первого числа на второе. Результат будет иметь тот же знак, что и первое число. | 11 % 3 = 2 (поскольку число 3 вмещается три раза, остатком будет число 2) |
| ** | показатель степени | Возводит базовое число в указанную степень, то есть количество базовых чисел, указанных экспонентой, умножается вместе. Впервые он был представлен в EcmaScript 2016. | 5 ** 5 (возвращает 3125, или как: 5*5*5*5*5) |
Примечание: Иногда числа участвующие в математических операциях называют операндами ( operands (en-US) ).
Нам, вероятно, не нужно учить вас базовым математическим операциям, но мы хотели бы проверить ваше понимание синтаксиса. Попробуйте ввести приведённые ниже примеры в свою консоль (developer tools JavaScript console), или используйте встроенную консоль, с которой вы уже знакомы, чтобы ознакомиться с синтаксисом.
-
Для начала попробуйте ввести простые примеры, такие как:
Некоторые примеры выше могут дать вам не тот результат, которого вы ожидали; приведённый ниже раздел может дать ответ на вопрос о том, почему.
Приоритет операторов
Давайте взглянем на последний пример сверху. Предположим, что num2 содержит значение 50 и num1 содержит значение 10 (как и было обозначено выше):
Будучи человеком, вы, вероятно, прочитаете это как «50 плюс 10 равно 60», затем «8 плюс 2 равно 10», и, наконец, «60 делить на 10 равно 6».
Но браузер видит это по-другому: «10 делить на 8 равно 1.25», затем «50 плюс 1.25 плюс 2 равно 53.25».
Это происходит из-за приоритета операторов — некоторые операторы будут применены перед другими в процесс вычисления суммы (в программировании её называют выражением). Приоритет операторов в JavaScript ничем не отличается от приоритета арифметических операций, который вы изучали в школе — умножение и деление всегда выполняются первыми, затем сложение и вычитание (сумма всегда вычисляется слева направо).
Если вы хотите переопределить порядок выполнения операторов, вы можете окружить парными скобками часть выражения, которая должна быть выполнена первой. Для получения результата 6 вам следует сделать следующее:
Результат этого выражения равен 6.
Примечание: полный список операторов JavaScript и приоритетов их выполнения можно найти по этой ссылке: Expressions and operators.
Операторы инкремента и декремента
Иногда вам захочется повторно добавить или вычесть единцу к/из значению числовой переменной. Это можно сделать с помощью оператора инкремента ( ++ ) и декремента ( — ). Мы использовали ++ в нашей игре «Угадай число» в статье первое погружение в JavaScript, где мы добавляли 1 к переменной guessCount , в которой хранилось значение количества попыток пользователя после каждого хода.
Примечание: инкремент и декремент часто используются в циклах, о которых вы узнаете позже. Например, если вы захотите пройтись по списку цен и добавить к каждой налог с продаж, вам придётся в цикле обойти каждую цену и провести необходимые вычисления для учёта налога. Инкремент будет использован для перехода на новую ячейку списка при необходимости. У нас есть несложный пример реализации такого списка — попробуйте и взгляните на код чтобы посмотреть, сможете ли вы найти инкременты! Мы взглянем на циклы поближе позже по ходу курса.
Давайте попробуем сыграть с этим в вашей консоли. Для начала заметим, что вы не можете использовать инкремент/декремент непосредственно к числу, что может показаться странным. Дело в том, что мы присваиваем к переменной новое обновлённое число, а не просто вычисляем значение. Следующий пример приведёт к ошибке:
Таким образом, вы можете применить инкремент только к существующим переменным:
Так, вторая странность! Если вы сделаете это, вы получите значение 4 — браузер возвращает текущее число, после чего применяет к нему оператор инкремента. Вы можете удостовериться в том, что инкремент был применён, узнав значение переменной ещё раз:
То же самое для — : попробуйте пример ниже
Примечание: вы можете заставить делать это в другом порядке — применить инкремент/декремент и только потом вернуть значение. Для этого необходимо записать оператор слева от переменной, а не справа. Попробуйте пример сверху ещё раз, но в этот раз используйте ++num1 и —num2 .
Операторы присваивания
Операторы присваивания — операторы, которые присваивают значение переменным. Мы уже много раз использовали самый простой из них, = , он просто приравнивает значение переменной слева к значению справа:
Однако есть ещё несколько сложных конструкций, которые позволяют делать ваш код более простым и аккуратным. Наиболее часто используемые перечислены ниже:
| Operator | Name | Purpose | Example | Shortcut for |
|---|---|---|---|---|
| += | Присваивание сложения | Прибавляет значение справа к переменной слева и возвращает новое значение переменной | x = 3; x += 4; | x = 3; x = x + 4; |
| -= | Присваивание вычитания | Вычитает значение справа из переменной слева и возвращает новое значение переменной | x = 6; x -= 3; | x = 6; x = x — 3; |
| *= | Присваивание умножения | Умножает переменную слева на значение справа и возвращает новое значение переменной | x = 2; x *= 3; | x = 2; x = x * 3; |
| /= | Присваивание деления | Делит переменную слева на значение справа и возвращает новое значение переменной | x = 10; x /= 5; | x = 10; x = x / 5; |
Попробуйте использовать такие конструкции, что понять, как они работают. Сможете ли вы определить значение до того, как напишите вторую строку?
Заметьте, что значение справа может быть как числом (константой), так и переменной, например:
Примечание: есть ещё другие операторы присваивания, в этой статье перечислены только самые базовые.
Активное обучение: меняем размеры коробки
В этом упражнении вы будете пользоваться числами и операторами для работы с размерами коробки. Коробка рисуется с помощью API браузера, которое называется Canvas API. Вам не следует беспокоиться о том, как это работает — просто сосредоточьтесь на математике. Ширина и высота коробки (в пикселях) определяются переменными x и y , которые изначально равны 50.
В коде сверху, который вы можете изменять, под комментарием есть две строчки, с помощью которых вы можете увеличивать/уменьшать размеры коробки. Мы хотим, чтобы вы выполнили несколько заданий:
- Поменяйте строчку с размером x так, чтобы коробка была шириной 50px, причём 50 должно быть вычислено с помощью чисел 43 и 7 и арифметического оператора.
- Поменяйте строчку с размером y так, чтобы коробка была высотой 75px, причём 75 должно быть вычислено с помощью чисел 25 и 3 и арифметического оператора.
- Поменяйте строчку с размером y так, чтобы коробка была высотой 250, при этом 250 вычислено с помощью двух чисел и оператором взятия остатка (модуль).
- Поменяйте строчку с размером y так, чтобы коробка была высотой 150px, причём 150 вычислено с помощью трёх чисел и операторов вычитания и деления.
- Поменяйте строчку с размером x так, чтобы коробка была шириной 200px, при этом 200 вычислено с помощью числа 4 и оператора присваивания.
- Поменяйте строчку с размером y так, чтобы коробка была высотой 200px, причём 200 вычислено с помощью чисел 50 и 3 и операторов умножения и присваивания сложения.
Не расстраивайтесь, если вы не поняли код сверху. Нажмите кнопку Reset для запуска программы снова. Если вы смогли ответить верно на все вопросы, попробуйте поэкспериментировать с кодом ещё (или, например, предложить друзьям несколько заданий).
Операторы сравнения
Иногда нам может понадобиться проверить какое-либо условие, а затем поступить в зависимости от результата — для этого мы используем операторы сравнения.
| Оператор | Имя | Назначение | Пример |
|---|---|---|---|
| === | Строгое равенство | Проверяет левое и правое значения на идентичность | 5 === 2 + 4 |
| !== | Строгое неравенство | Проверяет левое и правое значения на неидентичность | 5 !== 2 + 3 |
| < | Меньше | Проверяет, меньше ли левое значение правого | 10 < 6 |
| > | Больше | Проверяет, больше ли левое значение правого | 10 > 20 |
| <= | Меньше или равно | Проверят, меньше ли левое значение правому (или равно ему) | 3 <= 2 |
| >= | Больше или равно | Проверят, больше ли левое значение левого (или равно ему) | 5 >= 4 |
Примечание: вы можете заметить, что некоторые люди используют == и != в их программах для сравнения на равенство и неравенство — это валидные JavaScript-операторы, но они отличаются от === / !== — первая пара проверяет на равенство/неравенство значений, не рассматривая их типы. Вторая пара — строгая версия первой, которая проверяет типы операндов. При использовании строгой версии выявляется больше ошибок, поэтому мы рекомендуем использовать именно её.
Если вы попробуете использовать эти операторы в консоли, вы увидите, что все они возвращают значения true / false — о типе данных boolean мы писали в прошлой статье. С их помощью мы можем принимать решения в нашей программе, например:
- Порождать текст на кнопке в зависимости от того, нажата она или нет.
- Высвечивать сообщение о поражении при проигрыше или поздравление при победе в игре.
- Показывать пользователю верное окно приветствия в зависимости от времени года.
- Увеличивать или уменьшать карту при выборе одной из двух опций.
Мы взглянем на то, как реализовать такую логику после знакомства с условными выражениями в следующей статье. Сейчас мы рассмотрим небольшой пример:
Мы использовали оператор равенства внутри функции updateBtn() . В этом случае мы не проверяем пару математических выражений на равенство значений — мы просто смотрим, является ли текст на кнопке определённой строкой — что по сути является тем же самым. Если кнопка при нажатии содержит «Start machine», мы меняем содержимое метки на «Stop machine» и обновляем метку. Если же текст кнопки — «Stop machine», при нажатии мы возвращаем все обратно.
Примечание: Такой элемент управления, который переключается между двумя состояниями, обычно называется тумблером. Он переключается между одним состоянием и другим: свет включён, свет выключен и т. д.
Итого
В этой статье мы привели основную информацию, необходимую для работы с числами в JavaScript. Вы постоянно будете использовать числа в процессе обучения языку, поэтому желательно разобраться в этом сейчас. Если вам действительно не нравится математика, пусть вас утешит, что эта статья была сравнительно короткой.
В следующей статье мы изучим текст и то, как мы работаем с ним в JavaScript.
Примечание: если вам хочется узнать подробнее о том, как математика реализуется в JavaScript, вы можете посмотреть главный раздел JavaScript MDN. Статьи Числа и даты и Выражения и операторы — хороший вариант для начала.
Арифметические операторы в JavaScript
Математические операции являются одними из самых базовых и универсальных функций любого языка программирования. В JavaScript числа часто используются в общих задачах, таких как определение размеров окна браузера, вычисление окончательной цены денежной транзакции или расстояния между элементами в документе сайта.
Чтобы быть хорошим разработчиком, иметь высокие навыки в математике не обязательно, однако для этого важно знать, какие типы операций доступны в JavaScript и как использовать их для выполнения практических задач.
В отличие от других языков программирования, JavaScript имеет только один числовой тип данных; он не разделяет целые числа и числа с плавающей точкой.
Это руководство расскажет об арифметических операторах, операторах присваивания и порядке операций с числовыми данными JavaScript.
Арифметические операторы
Арифметические операторы – это символы, которые определяют математические операции и возвращают результат. К примеру, в 3 + 7 = 10 символ + определяет синтаксис операции сложения.
Многие операторы JavaScript знакомы вам из базовой математики, но есть также и несколько дополнительных операторов.
Все арифметические операторы JavaScript представлены в следующей таблице.
| Оператор | Синтаксис | Пример | Определение |
| Сложение | + | x + y | Сумма x и y |
| Вычитание | – | x – y | Разница между x и y |
| Умножение | * | x * y | Производное x и y |
| Деление | / | x / y | Частное x и y |
| Модуль | % | x % y | Остаток x / y |
| Возведение в степень | ** | x ** y | x в степени y |
| Инкремент | ++ | x++ | x плюс один |
| Декремент | — | x– | x минус один |
Сложение и вычитание
Операторы сложения и вычитания доступны в JavaScript и могут использоваться для нахождения суммы и разности числовых значений. JavaScript имеет встроенный калькулятор, а математические операции могут выполняться непосредственно в консоли.
Знак плюса позволяет складывать числа, например:
Помимо операций с простыми числами JavaScript позволяет присваивать числа переменным и выполнять с ними вычисления. Для примера можно присвоить числовые значения переменным x и y, а результат поместить в z.
// Assign values to x and y
let x = 10;
let y = 20;
// Add x and y and assign the sum to z
let z = x + y;
console.log(z);
30
Символ минус позволяет вычитать числа или выполнять операции с переменными:
// Assign values to x and y
let x = 10;
let y = 20;
// Subtract x from y and assign the difference to z
let z = y — x;
console.log(z);
10
Также можно складывать и вычитать отрицательные числа и числа с плавающей запятой.
// Assign values to x and y
let x = -5.2;
let y = 2.5;
// Subtract y from x and assign the difference to z
let z = x — y;
console.log(z);
-7.7
В JavaScript есть одна интересная особенность, которую следует учитывать и знать, – это результат сложения числа и строки. Мы знаем, что 1 + 1 должно равняться 2, но это уравнение выдаст неожиданный результат.
let x = 1 + «1»;
console.log(x);
typeof x;
11
‘string’
Вместо сложения чисел JavaScript преобразует все выражение в строки и объединяет их. Важно быть осторожным с динамической типизацией JavaScript, поскольку она может иметь нежелательные результаты.
Сложение и вычитание в JavaScript часто используются для прокрутки панели навигации.
function scrollToId() <
const navHeight = 60;
window.scrollTo(0, window.pageYOffset — navHeight);
>
window.addEventListener(‘hashchange’, scrollToId);
В этом случае панель будет прокручиваться на 60 пикселей от id.
Умножение и деление
Операторы умножения и деления JavaScript используются для поиска производного и частного числовых значений.
Звездочка является оператором умножения.
// Assign values to x and y
let x = 20;
let y = 5;
// Multiply x by y to get the product
let z = x * y;
console.log(z);
100
Умножение можно использовать для расчета цены товара после введения налога с продаж.
const price = 26.5; // Price of item before tax
const taxRate = 0.082; // 8.2% tax rate
// Calculate total after tax to two decimal places
let totalPrice = price + (price * taxRate);
totalPrice.toFixed(2);
console.log(«Total:», totalPrice);
Total: 28.67
Слеш – оператор деления.
// Assign values to x and y
let x = 20;
let y = 5;
// Divide y into x to get the quotient
let z = x / y;
console.log(z);
4
Деление особенно полезно при расчете времени, например, при вычислении количества часов или процента правильных ответов в тесте.
Модуль числа
Модуль – еще один арифметический оператор, менее популярный, чем предыдущие. Представлен символом %. Он возвращает остаток при делении первого числа на второе.
К примеру, мы знаем, что 9 делится на 3 без остатка:
Модуль числа позволяет определить четное или нечетное число, например:
// Initialize function to test if a number is even
const isEven = x => <
// If the remainder after dividing by two is 0, return true
if (x % 2 === 0) <
return true;
>
// If the number is odd, return false
return false;
>
// Test the number
isEven(12);
true
В этом примере 12 делится на 2, следовательно, это четное число.
В программировании модуль числа часто используется в сочетании с условными операторами.
Возведение в степень
Возведение в степень – один из самых новых операторов JavaScript. Синтаксис возведения в степень – две звездочки подряд (**).
К примеру, 10 в пятой степени (10^5) записывается так:
Операция 10 ** 5 имеет тот же результат, что 10 * 10, повторенная 5 раз.
10 * 10 * 10 * 10 * 10;
Также эту операцию можно записать с помощью метода Math.pow().
Math.pow(10, 5);
100000
Использование оператора возведения в степень – быстрый способ определить степень заданного числа, но, как обычно, при выборе между методом и оператором важно быть последовательными и писать код в одном стиле.
Инкремент и декремент
Операторы инкремента и декремента увеличивают или уменьшают числовое значение переменной на единицу. Они представлены двумя плюсами (++) или двумя минусами (–) и часто используются в циклах.
Обратите внимание: операторы инкремента и декремента могут использоваться только с переменными. Попытка использовать их с простыми числами приведет к ошибке.
7++
Uncaught ReferenceError: Invalid left-hand side expression in postfix operation
Операторы инкремента и декремента можно классифицировать как префиксные и постфиксные операции, в зависимости от того, где по отношению к переменной размещен оператор.
Префиксный инкремент записывается как ++х.
// Set a variable
let x = 7;
// Use the prefix increment operation
let prefix = ++x;
console.log(prefix);
8
Значение х увеличилось на 1. Постфиксный инкремент пишется как у++.
// Set a variable
let y = 7;
// Use the prefix increment operation
let postfix = y++;
console.log(postfix);
7
Постфиксная операция не увеличила значение. Это значение не будет увеличиваться до тех пор, пока выражение не будет оценено. Для этого нужно запустить операцию дважды:
Чаще всего эти операторы встречаются в циклах. В данном цикле for оператор запускается 10 раз, начиная с 0.
// Run a loop ten times
for (let i = 0; i < 10; i++) <
console.log(i);
>
0
1
2
3
4
5
6
7
8
9
В этом примере итерация цикла выполняется с помощью оператора инкремента.
Проще говоря, х++ можно воспринимать как сокращение от х = х + 1, а х—как сокращение от х = х – 1.
Операторы присваивания
Одним из наиболее часто используемых операторов является оператор присваивания, который уже встречался в этом мануале. Он представлен знаком равенства (=). Символ = используется для присвоения значения справа переменной слева.
// Assign 27 to age variable
let age = 27;
Помимо стандартного оператора присваивания JavaScript имеет составные операторы присваивания, которые комбинируют арифметический оператор с оператором =.
К примеру, оператор добавления начнет с исходного значения и добавит к нему новое значение.
// Assign 27 to age variable
let age = 27;
age += 3;
console.log(age);
30
По сути, age += 3 – то же самое, что и age = age + 3.
Все арифметические операторы можно объединять с оператором присваивания. Ниже приведена справочная таблица операторов присваивания в JavaScript.
| Оператор | Синтаксис |
| Присваивание | = |
| Присваивание со сложением | += |
| Присваивание с вычитанием | -= |
| Присваивание с умножением | *= |
| Присваивание с делением | /= |
| Присваивание по модулю | %= |
| Присваивание с возведением в степень | **= |
Составные операторы присваивания часто используются в циклах, как инкременты и декременты.
Приоритет операторов
Операторы выполняются в порядке приоритетности, как и в обычной математике.
К примеру, умножение имеет более высокий приоритет, чем сложение.
// First multiply 3 by 5, then add 10
10 + 3 * 5;
25
Если сначала нужно выполнить операцию сложения, возьмите ее в круглые скобки – такие операции всегда имеют наивысший приоритет.
// First add 10 and 3, then multiply by 5
(10 + 3) * 5;
65
Ниже вы найдете таблицу приоритета арифметических операторов в JavaScript. Для инкремента и декремента постфикс имеет более высокий приоритет, чем префикс.
Инкремент/декремент, умножение/деление и сложение/вычитание имеют одинаковый уровень приоритета.
| Оператор | Синтаксис |
| Круглые скобки | () |
| Инкремент | ++ |
| Декремент | — |
| Возведение в степень | ** |
| Умножение | * |
| Деление | / |
| Сложение | + |
| Вычитание | – |
Приоритет имеют не только арифметические операторы, но и операторы присваивания, логические операторы, условные операторы и т. д. Полный список можно посмотреть здесь.