Как сделать математику в JavaScript с операторами

Вступление

Математические операции являются одними из самых фундаментальных и универсальных особенностей любого языка программирования. В JavaScript числа часто используются для общих задач, таких как поиск размеров окна браузера, получение окончательной цены денежной транзакции и вычисление расстояния между элементами в документе веб-сайта.

Хотя понимание математики на высоком уровне не является обязательным условием для того, чтобы быть способным разработчиком, важно знать, какие типы операций доступны в JavaScript, и как использовать математику как инструмент для решения практических задач.

В отличие от других языков программирования, JavaScript имеет только один тип данных number; например, не делается различий между целыми числами (положительными или отрицательными целыми числами) и числами с плавающей точкой (числа с десятичной точкой).

В этом руководстве мы рассмотрим арифметические операторы, операторы присваивания и порядок операций, используемых с типами данных числа JavaScript.

Арифметические Операторы

Арифметические операторы * являются символами, которые указывают математическую операцию и возвращают значение. В уравнении «3 + 7 = 10 +» синтаксис «++» означает сложение.

В JavaScript есть много знакомых операторов из базовой математики, а также несколько дополнительных операторов, специфичных для программирования.

Вот справочная таблица арифметических операторов JavaScript.

Operator Syntax Example Definition

Operator	Syntax	Example	Definition
Addition	`+`	`x + y`	Sum of `x` and `y`
Subtraction	`-`	`x - y`	Difference of `x` and `y`
Multiplication	`*`	`x * y`	Product of `x` and `y`
Division	`/`	`x / y`	Quotient of `x` and `y`
Modulo	`%`	`x % y`	Remainder of `x / y`
Exponentiation	`**`	`x ** y`	`x` to the `y` power
Increment		`x++`	`x` plus one
Decrement	`--`	`x--`	`x` minus one

Addition

+

x + y

Sum of x and y

Subtraction

-

x - y

Difference of x and y

Multiplication

*

x * y

Product of x and y

Division

/

x / y

Quotient of x and y

Modulo

%

x % y

Remainder of x / y

Exponentiation

**

x ** y

x to the y power

Increment

x++

x plus one

Decrement

--

x--

x minus one

Мы подробно рассмотрим каждый из этих операторов в этой статье.

Сложение и вычитание

Операторы * сложения * и * вычитания * доступны в JavaScript и могут использоваться для нахождения суммы и разности числовых значений. В JavaScript есть встроенный калькулятор, и математические операции можно выполнять прямо в консоли.

Мы можем сделать простое сложение с числами, например, добавив + 10 + и + 20 +, используя знак плюс (+).

10 + 20;

Output30

В дополнение к математике с простыми числами, мы также можем назначать числа переменным и выполнять те же вычисления. В этом случае мы присвоим числовые значения для + 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);

Output30

Точно так же мы используем знак минус (+ - +) для вычитания чисел или переменных, представляющих числа.

// 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);

Output10

Мы также можем складывать и вычитать отрицательные числа и числа с плавающей запятой (десятичные дроби).

// 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);

Output-7.7

Одна интересная вещь, которую стоит отметить и знать в JavaScript, - это результат добавления числа и string , Мы знаем, что +1 + 1 + должно равняться + 2 +, но это уравнение будет иметь неожиданные результаты.

let x = 1 + "1";

console.log(x);
typeof x;

Output11
'string'

Вместо добавления двух чисел JavaScript преобразует весь оператор в строку и concatenate их вместе. Важно быть осторожным с динамически типизируемой природой JavaScript, поскольку это может привести к нежелательным последствиям.

Распространенной причиной использования сложения или вычитания в JavaScript является прокрутка до идентификатора минус высота в пикселях фиксированной панели навигации.

function scrollToId() {
   const navHeight = 60;
   window.scrollTo(0, window.pageYOffset - navHeight);
}

window.addEventListener('hashchange', scrollToId);

В приведенном выше примере при нажатии на идентификатор будет прокручиваться до 60 пикселей над идентификатором.

Сложение и вычитание - два наиболее распространенных математических уравнения, которые вы будете использовать в JavaScript.

Умножение и деление

Операторы * умножения * и * деления * также доступны в 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);

Output100

Умножение может быть использовано для расчета цены товара после применения налога с продаж.

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);

OutputTotal: 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);

Output4

Деление особенно полезно при расчете времени, например, при поиске количества часов в количестве минут или при расчете процента правильных ответов, выполненных в тесте.

Модульное

Немного менее знакомым арифметическим оператором является оператор по модулю (иногда известный как модуль), который вычисляет остаток от отношения после деления. Модуль представлен знаком процента (+% +).

В качестве примера мы знаем, что + 3 + входит в + 9 + ровно три раза, а остатка нет.

9 % 3;

Output0

Мы можем использовать оператор по модулю, чтобы определить, является ли число четным или нечетным, как видно из этой функции:

// 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);

Outputtrue

В приведенном выше примере + 12 + делится равномерно на + 2 +, поэтому это четное число.

Часто в программировании модуль используется в сочетании с условными операторами для управления потоком.

Возведение

Экспонентация * - один из более новых операторов в JavaScript, и он позволяет нам вычислить степень числа по его показателю степени. Синтаксис возведения в степень состоит из двух звездочек подряд (+ ** +).

От 10 до пятой степени, или 10 ^ 5, записывается так:

10 ** 5;

Output100000

+10 ** 5 + представляет собой то же самое, что + 10 +, умноженное на + 10 + пять раз:

10 * 10 * 10 * 10 * 10;

Другой способ написать это с помощью метода + Math.pow () +.

Math.pow(10, 5);

Output100000

Использование оператора возведения в степень - это краткий способ определения мощности данного числа, но, как обычно, важно придерживаться стиля вашей кодовой базы при выборе между методом и оператором.

Увеличение и уменьшение

Операторы * увеличения * и * уменьшения * увеличивают или уменьшают числовое значение переменной на единицу. Они представлены двумя знаками плюс () или двумя знаками минус (+ - +) и часто используются с https://www.digitalocean.com/community/tutorials/how-to -construct-для петель-в-JavaScript # для цикла [петель].

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

7++

OutputUncaught ReferenceError: Invalid left-hand side expression in postfix operation

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

Во-первых, мы можем текстовое увеличение префикса с помощью +++ x +.

// Set a variable
let x = 7;

// Use the prefix increment operation
let prefix = ++x;

console.log(prefix);

Output8

Значение + x + было увеличено на единицу. Чтобы увидеть разницу, мы протестируем приращение постфикса с помощью + y +++.

// Set a variable
let y = 7;

// Use the prefix increment operation
let postfix = y++;

console.log(postfix);

Output7

Значение + y + не было увеличено в операции постфикса. Это связано с тем, что значение не будет увеличиваться до тех пор, пока выражение не будет оценено. Повторное выполнение операции приведет к увеличению значения.

let y = 7;

y++;
y++;

console.log(y);

Output8

Оператор увеличения или уменьшения будет виден чаще всего в цикле. В этом примере цикла + for + мы будем запускать операцию десять раз, начиная с + 0 + и увеличивая значение на + 1 + с каждой итерацией.

// Run a loop ten times
for (let i = 0; i < 10; i++) {
 console.log(i);
}

Output0
1
2
3
4
5
6
7
8
9

Приведенный выше код показывает итерацию цикла, которая достигается с помощью оператора приращения.

Мы можем рассматривать + x +++ как сокращение для + x = x + 1 +, а + x - + как сокращение для + x = x - 1 +.

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

Одним из наиболее часто используемых операторов является оператор * присваивания *, который мы уже видели и представлены знаком равенства (+ = +). Мы используем + = +, чтобы присвоить значение справа переменной слева.

// Assign 27 to age variable
let age = 27;

В дополнение к стандартному оператору присваивания в JavaScript есть * составные операторы присваивания *, которые объединяют арифметический оператор с + = +.

Например, оператор сложения начнёт с исходного значения и добавит новое значение.

// Assign 27 to age variable
let age = 27;

age += 3;

console.log(age);

Output30

В этом случае + age + = 3 + совпадает с написанием + age = age + 3 +.

Все арифметические операторы могут быть объединены с присваиванием для создания составных операторов присваивания. Ниже приведена справочная таблица операторов присваивания в JavaScript.

Operator Syntax

Operator	Syntax
Assignment	`=`
Addition assignment	`+=`
Subtraction assignment	`-=`
Multiplication assignment	`*=`
Division assignment	`/=`
Remainder assignment	`%=`
Exponentiation assignment	`**=`

Assignment

=

Addition assignment

+=

Subtraction assignment

-=

Multiplication assignment

*=

Division assignment

/=

Remainder assignment

%=

Exponentiation assignment

**=

Сложные операторы присваивания часто используются с циклами, подобными увеличению и уменьшению, и используются, когда уравнения должны быть повторены или автоматизированы.

Приоритет оператора

Хотя мы читаем слева направо, операторы будут оцениваться в порядке приоритета, как в обычной математике.

В следующем примере умножение имеет более высокий приоритет, чем сложение, которое определяет результат уравнения.

// First multiply 3 by 5, then add 10
10 + 3 * 5;

Output25

Если вместо этого мы хотим сначала выполнить операцию сложения, мы должны сгруппировать ее в скобках, которая всегда имеет самый высокий приоритет.

// First add 10 and 3, then multiply by 5
(10 + 3) * 5;

Output65

Ниже приведена справочная таблица приоритетов операторов арифметических операторов в JavaScript, от самого высокого до самого низкого. Для увеличения и уменьшения постфикс имеет более высокий приоритет, чем префикс.

Увеличение / уменьшение, умножение / деление и сложение / вычитание имеют одинаковый уровень приоритета.

Operator Syntax

Operator	Syntax
Parentheses	`()`
Incrementation
Decrementation	`--`
Exponentiation	`**`
Multiplication	`*`
Division	`/`
Addition	`+`
Subtraction	`-`

Parentheses

()

Incrementation

Decrementation

--

Exponentiation

**

Multiplication

*

Division

/

Addition

+

Subtraction

-

Приоритет оператора включает не только арифметические операторы, но также операторы присваивания, логические операторы, условные операторы и многое другое. Полный список см. На странице operator приоритет в Mozilla Developer Network (MDN).

Заключение

В этой статье мы рассмотрели арифметические операторы и синтаксис, включая многие знакомые математические операторы и некоторые, специфичные для программирования.

Кроме того, мы узнали, как комбинировать арифметику и присваивание для создания составных операторов присваивания и порядок операций в JavaScript.

TOC

Как сделать математику в JavaScript с операторами

Вступление

Арифметические Операторы

Сложение и вычитание

Умножение и деление

Модульное

Возведение

Увеличение и уменьшение

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

Приоритет оператора

Заключение

Related