【Web前端】JavaScript 数学基础：数字与运算符解析

哈哈哈哈可能不是每个人都喜欢数学。有些人从小就享受解决复杂的数学问题，而另一些人则在学校被迫学习乘法表和长除法时对数学产生了厌恶。尽管如此，数学仍是生活中不可或缺的组成部分。无论我们处在哪里，数学的应用在我们生活中随处可见。在学习编写 JavaScript（或者任何其他编程语言）时，我们所做的很多事情都依赖于处理数值数据、进行计算以及生成新的值。在编程世界里，数学不仅是解决问题的工具，更是推动思维和逻辑的重要力量。 JavaScript 中，我们可以利用一整套功能强大的数学操作来处理数据、计算结果并实现各种复杂的功能。

---

一、数字类型

JavaScript 中，所有数字都被视为一种数据类型，称为“Number”。无论是整数还是浮点数，JavaScript 都将其视为单一的类型。这样的设计使得数字的处理变得更为简单和一致。我们先来看看如何在 JavaScript 中声明和初始化数字变量。

1.1 声明与初始化数字变量

我们可以使用 ​​let​​、​​const​​ 或 ​​var​​​ 来声明数字类型的变量。这里是一些基本的示例：

let integerVar = 42;   // 整数
let floatVar = 3.14;   // 浮点数
let negativeVar = -10;  // 负数
let zeroVar = 0;       // 零

console.log(integerVar); // 输出 42
console.log(floatVar);    // 输出 3.14
console.log(negativeVar); // 输出 -10
console.log(zeroVar);     // 输出 0

JavaScript 中，数字类型的变量可以直接赋值。无论是负数、零还是浮点数，使用 ​​console.log()​​​ 打印变量的值都非常直观。

1.2 检查数字类型

JavaScript 提供了 ​​typeof​​ 运算符，可以用来检查变量的数据类型。在这里，我们可以使用 ​​typeof​​​ 来确认我们的数字变量的类型是否都是 “number”：

console.log(typeof integerVar); // 输出 "number"
console.log(typeof floatVar);    // 输出 "number"
console.log(typeof negativeVar); // 输出 "number"
console.log(typeof zeroVar);     // 输出 "number"

如上所示，无论是整数、浮点数还是负数，​​typeof​​ 运算符都返回 ​​"number"​​​。这使得我们在处理不同类型的数字时，无需担心数据类型的差异。

1.3 特殊数字值

在 JavaScript 中，还有一些特殊的数字值需要注意，例如 ​​NaN​​ 和 ​​Infinity​​。

• NaN（Not a Number）：当某些数学运算无法产生有效数字时，结果将返回 ​​NaN​​。例如，0 除以 0 或对负数取平方根都将返回 ​​NaN​​。

let result = 0 / 0;
console.log(result); // 输出 NaN

let sqrtNegative = Math.sqrt(-1);
console.log(sqrtNegative); // 输出 NaN

• Infinity：在 JavaScript 中，当数值超出可表示的范围时，结果将返回 ​​Infinity​​。例如，正数除以零将返回 ​​Infinity​​。

let infinite = 1 / 0;
console.log(infinite); // 输出 Infinity

1.4 判断 NaN

JavaScript 提供了 ​​isNaN()​​ 函数，用于判断一个值是否为 ​​NaN​​：

console.log(isNaN(result)); // 输出 true
console.log(isNaN(5));      // 输出 false

1.5 数字类型的演变

随着 ECMAScript 的演变，JavaScript 也加入了一些新的特性，例如 ​​BigInt​​，用于处理整数。某些情况下，我们可能需要处理超出 ​​Number​​ 类型的整数，这时可以使用 ​​BigInt​​：

let bigIntVar = BigInt(123456789012345678901234567890);
console.log(bigIntVar); // 输出：123456789012345678901234567890n

---

二、算术运算符

算术运算符是 JavaScript 中用于执行数学运算的重要工具。常见的算术运算符包括：加法 ​​+​减法 ​​-​乘法 ​​*​除法 ​​/​取余 ​​%​​

2.1 基本运算示例

我们来看几个简单的运算示例，帮助你理解这些运算符的用法：

let a = 10;
let b = 5;

console.log(a + b); // 输出 15（加法）
console.log(a - b); // 输出 5（减法）
console.log(a * b); // 输出 50（乘法）
console.log(a / b); // 输出 2（除法）
console.log(a % b); // 输出 0（取余）

2.2 负数与零的处理

JavaScript 能够正确处理负数和零：

let negativeNum = -3;

console.log(a + negativeNum); // 输出 7
console.log(a - negativeNum); // 输出 13
console.log(a * negativeNum); // 输出 -30
console.log(a / negativeNum); // 输出 -3.333...
console.log(a % negativeNum); // 输出 1

2.3 运算符优先级

在复杂的数学表达式中，运算符的优先级决定了哪个运算符先执行。JavaScript 中的运算符优先级从高到低如下：

1. 括号 ​​()​​
2. 自增 ​​++​​ 和自减 ​​--​​
3. 乘法 ​​*​​、除法 ​​/​​ 和取余 ​​%​​
4. 加法 ​​+​​ 和减法 ​​-​​

例如：

let x = 10 + 5 * 2;   // 先乘法再加法，输出 20
let y = (10 + 5) * 2; // 括号优先，输出 30

console.log(x); // 输出 20
console.log(y); // 输出 30

2.4 小数运算

在进行小数运算时，JavaScript 会自动处理精度问题，但需要注意的是，浮点数的计算可能会产生精度误差：

let c = 0.1 + 0.2; 
console.log(c); // 输出 0.30000000000000004

这是因为某些十进制数在二进制中无法精确表示。因此，在需要高精度的计算时，建议使用 ​​toFixed()​​​ 方法格式化输出。

let d = (0.1 + 0.2).toFixed(2);
console.log(d); // 输出 "0.30"

---

三、自增和自减运算符

自增和自减运算符用于快速增加或减少变量的值。它们有两种形式：前缀和后缀。

前缀自增：​​++x​​、后缀自增：​​x++​​、前缀自减：​​--x​​、后缀自减：​​x--​​

自增和自减的示例

让我们看看这些运算符的工作方式：

let z = 5;

console.log(++z); // 前缀自增：输出 6
console.log(z++); // 后缀自增：输出 6 (z 现在是 7)
console.log(z);   // 输出 7

console.log(--z); // 前缀自减：输出 6
console.log(z--); // 后缀自减：输出 6 (z 现在是 5)
console.log(z);   // 输出 5

在这里，前缀自增会先对变量进行自增操作，再返回值；而后缀自增则会先返回当前值，再对变量进行自增操作。

---

四、赋值运算符

赋值运算符用于将值赋给变量。最常用的赋值运算符是 ​​=​​​。此外，JavaScript 还提供了一些复合赋值运算符，使得代码更加简洁。

4.1 常见的赋值运算符

​​=​​：赋值、​​+=​：加并赋值、​​-=​：减并赋值、​​*=​：乘并赋值、​​/=​：除并赋值、​​%=​：取余并赋值

4.2 赋值运算符示例

let num = 10;

num += 5; // 等价于 num = num + 5
console.log(num); // 输出 15

num -= 3; // 等价于 num = num - 3
console.log(num); // 输出 12

num *= 2; // 等价于 num = num * 2
console.log(num); // 输出 24

num /= 4; // 等价于 num = num / 4
console.log(num); // 输出 6

num %= 5; // 等价于 num = num % 5
console.log(num); // 输出 1

五、比较运算符

比较运算符用于比较两个值，并返回布尔值（​​true​​ 或 ​​false​​）。常见比较运算符包括：

相等 ​​==​​、不相等 ​​!=​​、全等 ​​===​​、不全等 ​​!==​​、大于 ​​>​​、大于等于 ​​>=​​、小于 ​​<​​、小于等于 ​​<=​​

5.1 比较运算符示例

let a = 5;
let b = 10;

console.log(a == b); // 输出 false
console.log(a != b); // 输出 true
console.log(a === 5); // 输出 true
console.log(a !== 5); // 输出 false

console.log(a > b);   // 输出 false
console.log(a >= b);  // 输出 false
console.log(a < b);   // 输出 true
console.log(a <= b);  // 输出 true

5.2 类型转换与相等

在 JavaScript 中，​​==​​ 运算符会进行类型转换，而 ​​===​​ 运算符则会严格比较类型。让我们看看这两者的区别：

console.log(5 == '5');   // 输出 true (类型转换)
console.log(5 === '5');  // 输出 false (严格比较)

这就是为什么在进行比较时，使用 ​​===​​​ 更加安全，因为它不会进行隐式的类型转换。

---

六、数学对象

JavaScript 还提供了一个全局 ​​Math​​ 对象，用于执行更复杂的数学运算。​​Math​​​ 对象包含了一系列有用的数学方法和常量。

6.1 常用的 Math 方法

• ​​Math.abs(x)​​：返回 x 的绝对值。
• ​​Math.round(x)​​：返回四舍五入后的值。
• ​​Math.floor(x)​​：返回小于或等于 x 的最大整数。
• ​​Math.ceil(x)​​：返回大于或等于 x 的最小整数。
• ​​Math.sqrt(x)​​：返回 x 的平方根。
• ​​Math.pow(x, y)​​​：返回 x 的 y 次幂。

6.2 Math 对象示例

console.log(Math.abs(-10));        // 输出 10
console.log(Math.round(4.5));      // 输出 5
console.log(Math.floor(4.9));      // 输出 4
console.log(Math.ceil(4.1));       // 输出 5
console.log(Math.sqrt(16));         // 输出 4
console.log(Math.pow(2, 3));        // 输出 8

---

如有表述错误及欠缺之处敬请指正补充。