数学运算是任何编程语言最基本和通用的功能之一。在 JavaScript 中,数字经常用于常见任务,例如查找浏览器窗口大小、获取货币交易的最终价格以及计算网站文档中元素之间的距离。
尽管对数学的高度理解并不是成为一名有能力的开发人员的先决条件,但了解 JavaScript 中可用的操作类型以及如何使用数学作为工具来完成实际任务非常重要。
与其他编程语言不同,JavaScript 只有一种数字数据类型;例如,整数(正整数或负整数)和浮点数(带小数点的数字)之间没有区别。
在本教程中,我们将介绍算术运算符、赋值运算符以及与 JavaScript 数字数据类型一起使用的运算顺序。
算术运算符是指示数学运算并返回值的符号。在等式中3 + 7 = 10
, the +
是代表加法的语法。
JavaScript 有许多熟悉的基础数学运算符,以及一些特定于编程的附加运算符。
这是 JavaScript 算术运算符的参考表。
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 and 减法JavaScript 中提供了运算符,可用于求数值的和与差。 JavaScript有一个内置的计算器,可以直接在控制台中完成数学运算。
我们可以对数字进行一些简单的加法,例如相加10
and 20
,使用加号 (+
).
Output
30
除了使用普通数字进行数学运算之外,我们还可以将数字分配给变量并执行相同的计算。在这种情况下,我们将把数值分配给x
and 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);
Output
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);
Output
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);
Output
-7.7
在 JavaScript 中需要注意的一件有趣的事情是添加一个数字和一个string。我们知道1 + 1
应该等于2
,但是这个方程会产生意想不到的结果。
let x = 1 + "1";
console.log(x);
typeof x;
Output
11
'string'
JavaScript 不会将两个数字相加,而是将整个语句转换为字符串并连接他们在一起。请务必小心 JavaScript 的动态类型特性,因为它可能会产生不良结果。
在 JavaScript 中使用加法或减法的一个常见原因是滚动到 id 减去固定导航栏的高度(以像素为单位)。
function scrollToId() {
const navHeight = 60;
window.scrollTo(0, window.pageYOffset - navHeight);
}
window.addEventListener('hashchange', scrollToId);
在上面的示例中,单击 id 将滚动到 id 上方 60 像素。
加法和减法是 JavaScript 中最常用的两个数学方程。
乘法 and divisionJavaScript 中也提供了运算符,用于求数值的乘积和商。
一个星号(*
) 用于表示乘法运算符。
// 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);
Output
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);
let fixedPrice = totalPrice.toFixed(2);
console.log("Total:", fixedPrice);
Output
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);
Output
4
除法在计算时间时特别有用,例如计算分钟数中的小时数,或者计算测试中完成的正确答案的百分比时。
一种不太熟悉的算术运算符是模(有时称为模)运算符,它计算除法后商的余数。模数由百分号表示(%
).
举个例子,我们知道3
进入9
正好三遍,没有余数。
Output
0
我们可以使用模运算符来确定数字是偶数还是奇数,如以下函数所示:
// 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);
Output
true
在上面的例子中,12
均匀地分为2
,因此它是偶数。
在编程中,模数通常与条件语句结合使用以进行流程控制。
求幂是 JavaScript 中较新的运算符之一,它允许我们通过指数计算数字的幂。求幂的语法是两个连续的星号 (**
).
10 的五次方,即 10^5,可以这样写:
Output
100000
10 ** 5
代表相同10
乘以10
五次:
另一种写法是用Math.pow()
method.
Output
100000
使用求幂运算符是求给定数字幂的一种简洁方法,但与往常一样,在方法和运算符之间进行选择时,保持与代码库的风格一致很重要。
增量 and 递减运算符将变量的数值加一或减一。它们由两个加号表示(++
) 或两个减号 (--
),并且经常与loops.
请注意,自增和自减运算符只能用于变量;尝试在原始数字上使用它们将导致错误。
Output
Uncaught 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);
Output
8
的价值x
增加了 1。为了查看差异,我们将测试后缀增量,其中y++
.
// Set a variable
let y = 7;
// Use the prefix increment operation
let postfix = y++;
console.log(postfix);
Output
7
的价值y
并没有在postfix操作中增加。这是因为在计算表达式之后该值才会递增。
递增或递减运算符最常出现在循环中。在这个for
循环示例,我们将运行该操作十次,从0
,并增加值1
每次迭代。
// Run a loop ten times
for (let i = 0; i < 10; i++) {
console.log(i);
}
Output
0
1
2
3
4
5
6
7
8
9
上面的代码显示了通过使用增量运算符实现的循环迭代。
我们可以想到x++
作为简写x = x + 1
, and 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);
Output
30
在这种情况下,age += 3
和写作一样age = age + 3
.
所有算术运算符都可以与赋值组合以创建复合赋值运算符。下面是 JavaScript 中赋值运算符的参考表。
Operator |
Syntax |
Assignment |
= |
Addition assignment |
+= |
Subtraction assignment |
-= |
Multiplication assignment |
*= |
Division assignment |
/= |
Remainder assignment |
%= |
Exponentiation assignment |
**= |
复合赋值运算符通常与循环一起使用,类似于递增和递减,并且在需要重复或自动化方程时使用。
尽管我们从左到右阅读,但运算符将按优先级顺序求值,就像常规数学中一样。
在以下示例中,乘法的优先级高于加法,这决定了方程的结果。
// First multiply 3 by 5, then add 10
10 + 3 * 5;
Output
25
相反,如果我们想首先运行加法运算,则应将其分组在括号中,括号始终具有最高优先级。
// First add 10 and 3, then multiply by 5
(10 + 3) * 5;
Output
65
下面是 JavaScript 中算术运算符的运算符优先级参考表,从最高到最低。对于递增和递减,后缀的优先级高于前缀。
递增/递减、乘法/除法和加法/减法具有相同的优先级。
Operator |
Syntax |
Parentheses |
() |
Incrementation |
++ |
Decrementation |
-- |
Exponentiation |
** |
Multiplication |
* |
Division |
/ |
Addition |
+ |
Subtraction |
- |
运算符优先级不仅包括算术运算符,还包括赋值运算符、逻辑运算符、条件运算符等。如需完整列表,请查看Mozilla 开发者网络 (MDN) 上的运算符优先级.
在本文中,我们介绍了算术运算符和语法,包括许多熟悉的数学运算符和一些特定于编程的运算符。
此外,我们还学习了如何结合算术和赋值来创建复合赋值运算符,以及 JavaScript 中的运算顺序。