如何在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 内置计算器，可以直接在控制台中进行数学运算。

我们可以对数字进行一些简单的加法，例如使用加号 (+) 将 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 中需要注意和注意的一件有趣的事情是添加一个数字和一个 字符串 的结果。 我们知道 1 + 1 应该等于 2，但是这个方程会有意想不到的结果。

let x = 1 + "1";

console.log(x);
typeof x;

Output11
'string'

JavaScript 不会将这两个数字相加，而是将整个语句转换为字符串，然后 将它们连接在一起 。 注意 JavaScript 的动态类型特性很重要，因为它可能会产生不希望的结果。

在 JavaScript 中使用加法或减法的一个常见原因是滚动到 id 减去固定导航栏的像素高度。

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

window.addEventListener('hashchange', scrollToId);

在上面的示例中，单击 id 将滚动到 id 上方 60 像素。

加法和减法是您将在 JavaScript 中使用的两个最常见的数学方程式。

乘法和除法

Multiplication 和 division 运算符在 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);
let fixedPrice = totalPrice.toFixed(2);

console.log("Total:", fixedPrice);

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 3 次，并且没有余数。

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，因此它是一个偶数。

通常在编程中，模数与条件语句一起用于流控制。

求幂

Exponentiation 是 JavaScript 中较新的运算符之一，它允许我们通过指数计算数字的幂。 求幂的语法是一行中的两个星号 (**)。

10 的五次方，或 10^5，写成这样：

10 ** 5;

Output100000

10 ** 5 表示等于 10 乘以 10 五次：

10 * 10 * 10 * 10 * 10;

另一种写法是使用 Math.pow() 方法。

Math.pow(10, 5);

Output100000

使用求幂运算符是求给定数的幂的一种简洁方法，但像往常一样，在方法和运算符之间进行选择时，与代码库的风格保持一致很重要。

递增和递减

Increment 和 decrement 运算符将变量的数值加一或减一。 它们由两个加号 (++) 或两个减号 (--) 表示，通常与 loops 一起使用。

请注意，增量和减量运算符只能用于变量； 尝试在原始数字上使用它们将导致错误。

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 的值增加了 1。 为了看到差异，我们将使用 y++ 测试后缀增量。

// Set a variable
let y = 7;

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

console.log(postfix);

Output7

y 的值在后缀操作中没有增加。 这是因为在计算表达式之前，该值不会增加。

递增或递减运算符最常出现在循环中。 在这个 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 的简写。

赋值运算符

最常用的运算符之一是 assignment 运算符，我们已经看到并用等号 (=) 表示。 我们使用 = 将右侧的值赋给左侧的变量。

// 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 中赋值运算符的参考表。

操作员	句法
任务	=
加法赋值	+=
减法赋值	-=
乘法赋值	*=
部门分配	/=
剩余分配	%=
幂赋值	**=

复合赋值运算符通常与循环一起使用，类似于递增和递减，并且在需要重复或自动化方程时使用。

运算符优先级

尽管我们从左到右阅读，运算符将按优先顺序进行计算，就像在常规数学中一样。

在以下示例中，乘法的优先级高于加法，这决定了等式的结果。

// 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 中算术运算符的运算符优先级参考表，从高到低。 对于递增和递减，后缀的优先级高于前缀。

递增/递减、乘法/除法和加法/减法具有相同的优先级。

操作员	句法
括弧	()
增量	++
递减	--
求幂	**
乘法	*
分配	/
添加	+
减法	-

运算符优先级不仅包括算术运算符，还包括赋值运算符、逻辑运算符、条件运算符等。 有关完整列表，请查看 Mozilla Developer Network (MDN) 上的 运算符优先级。

结论

在本文中，我们介绍了算术运算符和语法，包括许多熟悉的数学运算符和一些特定于编程的运算符。

此外，我们还学习了如何结合算术和赋值来创建复合赋值运算符，以及 JavaScript 中的运算顺序。