JavaScript, как и другие языки программирования, позволяет производить различные арифметические операции над переменными, т.к. расчеты - это одна из неотъемлемых задач программирования. Для этого в нем существует ряд операторов. В этой статье мы рассмотрим арифметические операторы в JavaScript, инкремент и декремент, а также арифметические операторы присваивания.
Поскольку все операторы предполагают, что действия выполняются над переменными и/или числами, то нужно понимать, что в выражении оператор, как правило ставится между двумя переменными, которые называются операндами.
Арифметические операторы в JavaScript
Арифметические операторы в JavaScript в большинстве своем повторяют арифметические действия в математике, а именно:
- Сложение
+, например, 3+4 = 7; - Вычитание
-, 92-14 = 78; - Умножение
*, 30*4 = 120; - Деление
/, 120/6 = 2; - Взятие остатка от деления
%, 10%3 = 1; - Возведение в степень
**. 5**2 = 25.
Только последние 2 оператора вызывают обычно проблемы, т.к. зачем, казалось бы, нам остаток от деления, если все числа можно разделить, получив десятичную дробь? Тем не менее такой оператор очень удобен для определения четности или нечетности числа. Оператор же возведения в степень просто непривычно выглядит.
Давайте посмотрим на примеры в таблице:
| Оператор | Название | Описание | Пример для let a = 10, b = 3, res; |
|---|---|---|---|
| Сложение | Возвращает сумму двух операндов. | res = a + b | 13 |
| Вычитание | Возвращает разность двух операндов. | res = a + b | 7 |
| Умножение | Возвращает произведение двух операндов. | res = a * b | 30 |
| Деление | Возвращает частное двух операндов. | res = a / b | 3.3333333336 |
| Остаток от деления | Возвращает остаток от частного двух операндов. | res = a % b | 1 |
| Возведение в степень | Возвращает результат возведения первого операнда в степень в виде второго операнда. | res = a ** b | 1000 |
Примечание: деление на ноль возвращает бесконечность Infinity.
В качестве примера для использования арифметических операторов рассмотрим пример, в котором нужно решить задачу из школьного учебника математики: некий турист 2 дня бродил по тайге. В первый день он прошел 24 км, во второй - на 12 км больше. Всего в дороге он находился 15 часов. Требуется узнать, сколько времени шел турист в каждый из дней.
Решение задачи предполагает использование 2-х операторов - сложения и деления.
| 1 2 3 4 5 6 7 8 9 | let path1 = 24, time = 15, // известные данные path2 = path1 + 12, // путь, пройденный во второй день allPath = path1 + path2; //весь пройденный путь console.log(path2, allPath); //36 (км) 60 (км) let velocity = allPath/time; //скорость движения туриста console.log(velocity); // 4 (км/ч) let time1 = path1 / velocity, // время в пути за 1-й день time2 = path2 / velocity; // время в пути за 2-й день console.log(time1, time2); // 6(ч) 9(ч) |
Здесь мы используем объявление достаточно большого числа переменных, в которые сразу же при инициализации записываем расчеты на основе арифметических операций.
Давайте рассмотрим более сложную задачу, где все эти действия будут выполняться на примере калькулятора.
Конкатенация строк
Дело в том, что в JavaScript вы, скорей всего столкнетесь с одним неприятным моментом, связанным с расчетами данных, которые получаются в результате сложения чисел, взятых из полей формы или из диалогового окна prompt(). В обоих случаях возвращаются строки, а не числа. Оператор сложения + в этом случае выступает, как "склеиватель", или соединитель строк. В английском языке для определения этого действия существует глагол concatenate, от которого и произошло наименование операции по склеиванию строк - конкатенация.
Давайте введем в диалоговом окне prompt() 2 числа и выведем результат их сложения:
| 1 2 3 4 5 6 | var number1 = prompt("Введите первое число", "100"), number2 = prompt("Введите второе число", "55"); alert(number1 + number2); alert(number1 - number2); alert(number1 * number2); alert(number1 / number2); |
Тестируем код:
В том случае, если вы нажали клавишу Enter или кнопку "Ок" оба раза, то вместо ожидаемых 155 получили число 10055, т.к. строки просто соединились. Причем такая ситуация характерна только для сложения строк. При вычитании, умножении делении и других операциях происходит автоматическое преобразование типов данных (это видно из примера), а вот для сложения стрОки нужно явно преобразовывать в числа. Способы для таких преобразований вы найдете в статье "Преобразования типов данных в JavaScript", а здесь мы разберем только один из них с помощью оператора "унарный плюс":
| 1 2 3 4 5 6 | var number1 = +prompt("Введите первое число", "100"), number2 = +prompt("Введите второе число", "55"); alert(number1 + number2); alert(number1 - number2); alert(number1 * number2); alert(number1 / number2); |
Тестируем пример повторно:
Есть только одно НО - при введении строк, а не чисел вы получите NaN - Not a Number - специальный тип данных, который фактически сообщает вам, что арифметические операции над строками невозможны, как и преобразования их в числа.
Инкремент и декремент
Отдельно хочется выделить два оператора, которые отвечают за увеличение или уменьшение значения переменной на единицу. Инкремент (от англ. increase - увеличивать) ++ увеличивает значение переменной на 1, а декремент (от англ. decrease - уменьшать) -- уменьшает значение переменной на 1. Это унарные операторы, то есть такие, которые предусматривают наличие всего одной, а не двух переменных-операндов для выполнения неких действий.
Чаще всего они используются в циклах для изменения значения счетчиков, но могут также использоваться и в других конструкциях JavaScript.
Механизм их использования обычно такой:
| 1 2 3 4 5 6 7 8 9 10 11 | let num1 = 95; //уменьшаем с помощью декремента num1--; console.log(num1); //94 --num1; console.log(num1); //93 //увеличиваем с помощью инкремента num1++; console.log(num1); //94 ++num1; console.log(num1); //95 |
Здесь мы видим, что операции по уменьшению или увеличению переменной на 1 записываются в одну строку без использования других операторов. Однако все не так просто, если у нас появится необходимость сложить нашу увеличенную (уменьшенную) на 1 переменную с другой переменной или числом. Тут важна форма записи операторов: префиксная (до переменной) или постфиксная (после переменной).
Смотрим на особенности использования инкрементов и декрементов в выражениях:
| 1 2 3 4 5 6 7 8 9 10 | let first = 1, second = 2, res; res = second + first++; console.log( 'res = '+ res, "first = "+ first, "second = "+second); //res = 3 first = 2 second = 2 res = second + ++first; console.log( 'res = '+ res, "first = "+ first, "second = "+second); //res = 5 first = 3 second = 2 console.log(--res); //4 console.log(res--); //4 console.log(res); //3 |
Обратите внимания на результаты в комментариях. Когда мы складывали переменные с постфиксной записью (строка 2), то переменная first на момент выполнения операции сложения имела значение 1, и только потом выполнилось ее увеличение с помощью инкремента (first++), поэтому в консоли мы видим, что она имеет значение 2. Это говорит о том, что приоритет выполнения операторов (иными словами, последовательность выполнения операторов) больше для сложения, чем для инкремента с постфиксной записью.
Когда используется префиксная запись ++first, то сначала увеличивается значение переменной first, а уже потом выполняется сложение second+first.
Такая же ситуация при использовании декремента для res. При использовании префиксной формы в строке 8 мы видим сразу уменьшенный результат (вместо 5 значение 4). Однако вывод в консоль декремента с постфиксной записью в виде console.log(res--); дает нам такой же результат (4), и только на следующей строке console.log(res) мы видим, что переменная теперь имеет значение 3.
Пример использования инкремента
Допустим, перед нами стоит задача нарисовать линии (html-элемент <hr>) с постоянно увеличивающейся длиной с определенным шагом, например, в 20px. То есть каждая следующая линия должна быть длиннее предыдущей на 20px, причем одна у нас уже есть. Нажимайте на кнопку, чтобы посмотреть на результат.
Код примера:
| 1 2 3 4 5 6 7 8 9 10 11 | <div id="forLine"> <hr style="width: 20px"> </div> <button type="button" onclick="paintLine()">Рисуем линии нужной длины</button> <script> let w = 20, k = 2; function paintLine(){ forLine.innerHTML+='<hr style="width: '+k*w+'px">'; k++; } </script |
Примечание: использовать инкремент и декремент можно только для переменных. Для чисел вы это сделать не сможете, т.к. такая запись вызовет ошибку:
| 1 | 99++; // Uncaught SyntaxError: invalid increment/decrement operand |
Операторы арифметического присваивания
Что значит "операторы арифметического присваивания"? Оператор присваивания - это знак "=", который позволяет занести некое значение в переменную, или "присвоить значение переменной", если использовать правильную терминологию.
Операторы арифметического присваивания позволяют сделать практически то же самое, т.е. занести новое значение в переменную, но при этом еще позволяют сначала произвести некие арифметические действия с этой переменной. У них есть аналоги, когда для выполнения неких арифметических действий используется эта переменная и число или другая числовая переменная, например:
| 1 2 3 4 5 6 | let a = 10, b = 12; //действие справа с помощью арифметического оператора, //а затем присваивание нового значения в переменную a a = a+b; //результат 22 // замена на арифметический оператор присваивания: a += b; //результат 22 |
Здесь запись a=a+b равнозначна записи a+=b, но последнее действие выполняется несколько быстрее, потому что вместо того, чтобы взять из памяти значение переменной a, затем добавить к ней значение переменной b, а потом результат перезаписать в ячейку памяти с именем a, можно просто в переменную a добавить значение переменной b с сохранением результата.
Внимательно прочитали текст выше? Второй раз перечитывали? Смысл арифметического присваивания в начале освоения любого языка программирования далеко не всегда понятен сразу. Но есть простой способ прояснить механизм его действия, знакомый всем и каждому. Мы будем делать это на примере ... кошелька.
Представьте, что у вас есть кошелек с двумя долларами. Разве вам нужно вытаскивать эти 2 доллара, чтобы добавить к ним еще один? Неужели, если вы положите добавочный доллар в свой кошелек, то не поймете, что их стало 3, просто глядя внутрь?
Если же понадобится потом отдать 2 доллара, то опять-таки, неужели вы будете вытаскивать все деньги, вместо того, чтобы достать только требуемые 2 доллара и быстро подсчитать, что же осталось в кошельке?
Так вот кошелек - это ячейка памяти, содержащая некое число, с которым вам нужно сделать ряд арифметических операций (сложить, вычесть, разделить, умножить, возвести в степень или посчитать остаток от деления, используя другое число). Значительно быстрее это выполнить с помощью операторов арифметического присваивания, которые есть в таблице ниже. После таблицы вы найдете кнопку, нажав на которую, получите результат в последнем столбце таблицы, рассчитанный для переменных x=100 и y=8. Однако, перед тем как сделать это, попробуйте самостоятельно вписать результаты в 4-м столбце таблице, а потом уже проверять свои расчеты и то, что вычислил JS-интерпретатор браузера.
| Имя | Сокращённый оператор | Аналог (Смысл действий) | Попробовать самому при x=100, y=8 | Результат при x=100, y=8 |
|---|---|---|---|---|
| Присваивание | x = y | x = y | ||
| Присваивание со сложением | x += y | x = x + y | ||
| Присваивание с вычитанием | x -= y | x = x - y | ||
| Присваивание с умножением | x *= y | x = x * y | ||
| Присваивание с делением | x /= y | x = x / y | ||
| Присваивание по модулю (остаток от деления) | x %= y | x = x % y | ||
| Присваивание с возведением в степень | x **= y | x = x ** y |
Примером задачи, которую мы решим с помощью операторов арифметического присваивания, является расчет добавления годовых процентов в размере 10% по вкладу, например, из 1000 условных денег, а затем отчисление с полученной суммы налога на депозит в размере 1.5%.
| 1 2 3 4 5 | let deposit = 1000; deposit *= 1.1; //10% - это 0.1 от любого числа. 110% - коэффициент 1.1 для числа console.log(deposit, deposit*1.5/100); // сумма с процентами - 1100, 1.5% от полученной суммы - 16.5 deposit -= deposit*1.5/100; //-1.5% от суммы депозита с добавленными процентами по вкладу console.log(deposit); // 1083.5 |
Попробуйте решить задачи 2 и 3 в статье "Простые задачи по JavaScript", используя операторы арифметического присваивания.
