JavaScript 中的基本数学运算 - 数字和运算符

好吧，也许不是。我们中有些人喜欢数学，有些人从小学乘法表和长除法开始就讨厌数学，有些人则介于两者之间。但我们都不能否认数学是生活中不可或缺的一部分，没有它我们就走不了多远。当我们学习用 JavaScript（或任何其他语言）编程时，这一点尤其重要——我们所做的大部分工作都依赖于处理数值数据、计算新值等等，所以你不会惊讶地发现 JavaScript 提供了一整套完整的数学函数。

本文只讨论你现在需要了解的基本部分。

在编程中，即使是我们所熟知的简陋的十进制系统也比你想象的要复杂。我们使用不同的术语来描述不同类型的十进制数，例如

• 整数是没有小数部分的数字。它们可以是正数也可以是负数，例如 10、400 或 -5。
• 浮点数（浮点数）有小数点和小数位，例如 12.5 和 56.7786543。

我们甚至有不同的数字系统类型！十进制是十进制（意味着它在每个数字中使用 0-9），但我们还有：

• 二进制——计算机的最低级语言；0 和 1。
• 八进制——八进制，每个数字中使用 0-7。
• 十六进制——十六进制，每个数字中使用 0-9 和 a-f。你可能在设置 CSS 中的颜色 时遇到过这些数字。

在你开始担心你的大脑要融化之前，停下来！首先，在本课程中，我们将坚持使用十进制数；你很少会遇到需要开始考虑其他类型的数字，即使有也是如此。

第二个好消息是，与其他一些编程语言不同，JavaScript 只有一个用于数字的数据类型，包括整数和小数——你猜对了，就是 Number。这意味着无论你在 JavaScript 中处理的是哪种类型的数字，你都以完全相同的方式处理它们。

让我们快速玩一些数字，以重新熟悉我们需要的基本语法。将下面列出的命令输入你的 开发者工具 JavaScript 控制台 中。

1. 首先，让我们声明几个变量，并分别用一个整数和一个浮点数初始化它们，然后输入变量名来检查一切是否正常
   js

   const myInt = 5;
   const myFloat = 6.667;
   myInt;
   myFloat;
   

2. 数字值不带引号输入——在你继续之前，尝试声明和初始化几个包含数字的变量。
3. 现在让我们检查一下我们最初的两个变量是否属于相同的数据类型。JavaScript 中有一个名为 typeof 的运算符可以做到这一点。按照如下所示输入下面两行
   js

   typeof myInt;
   typeof myFloat;
   

   你应该在两种情况下都得到 "number" 返回——这比不同的数字有不同的数据类型，我们需要用不同的方式处理它们，要容易得多。谢天谢地！

Number 对象，它表示你在 JavaScript 中使用的所有标准数字的实例，它有许多有用的方法可供你使用来操作数字。我们不会在本文中详细介绍这些方法，因为我们希望把它作为一个简单的介绍，现在只涵盖最基本的东西；但是，当你阅读完本模块几次后，值得去查看对象引用页面，了解更多可用的内容。

例如，要将你的数字四舍五入到固定的小数位数，请使用 toFixed() 方法。将以下几行输入浏览器的 控制台 中

const lotsOfDecimal = 1.766584958675746364;
lotsOfDecimal;
const twoDecimalPlaces = lotsOfDecimal.toFixed(2);
twoDecimalPlaces;

有时你可能会得到一个存储为字符串类型的数字，这使得很难用它进行计算。这种情况最常发生在数据输入到 表单 输入框时，并且 输入类型为文本 时。有一个方法可以解决这个问题——将字符串值传递到 Number() 构造函数中，返回该值的数字版本。

例如，尝试将这些行输入到你的控制台中

let myNumber = "74";
myNumber += 3;

你最终得到的结果是 743，而不是 77，因为 myNumber 实际上被定义为一个字符串。你可以通过输入以下内容来测试这一点

typeof myNumber;

要修复计算，你可以这样做

let myNumber = "74";
myNumber = Number(myNumber) + 3;

然后结果就是 77，与最初预期的一样。

算术运算符用于在 JavaScript 中执行数学运算

我们可能不需要教你如何做基本的数学运算，但我们想测试你对语法方面的理解。尝试将下面的例子输入你的 开发者工具 JavaScript 控制台 中，以熟悉语法。

1. 首先尝试输入一些简单的例子，例如
   js

   10 + 7;
   9 * 8;
   60 % 3;
   

2. 你也可以尝试在变量中声明和初始化一些数字，然后尝试在求和中使用它们——变量的行为与它们所保存的值在求和方面完全相同。例如
   js

   const num1 = 10;
   const num2 = 50;
   9 * num1;
   num1 ** 3;
   num2 / num1;
   

3. 本节的最后一个，尝试输入一些更复杂的表达式，例如
   js

   5 + 10 * 3;
   (num2 % 9) * num1;
   num2 + num1 / 8 + 2;
   

这组计算的某些部分可能不会给你你预期的结果；下面的部分可能会给出答案，说明为什么。

让我们看一下上面的最后一个例子，假设 num2 的值为 50，num1 的值为 10（如上面最初所述）

num2 + num1 / 8 + 2;

作为一个普通人，你可能会读成“50 加 10 等于 60”，然后是“8 加 2 等于 10”，最后是“60 除以 10 等于 6”。

但浏览器做的是“10 除以 8 等于 1.25”，然后是“50 加 1.25 加 2 等于 53.25”。

这是因为运算符优先级——在计算表达式（在编程中称为表达式）的结果时，某些运算符先于其他运算符应用。JavaScript 中的运算符优先级与学校里教授的数学课相同——乘法和除法总是先做，然后是加法和减法（计算总是从左到右进行）。

如果你想覆盖运算符优先级，你可以在你想先明确处理的部分周围加上括号。所以要得到 6 的结果，我们可以这样做

(num2 + num1) / (8 + 2);

试试看。

有时你可能想对一个数值变量的值反复加一或减一。这可以通过使用增量（++）和减量（--）运算符方便地完成。我们在之前 第一次接触 JavaScript 的文章中使用的 "猜数字" 游戏中使用过 ++，当时我们在 guessCount 变量中加 1，以跟踪用户每次尝试后还剩下多少次猜测。

guessCount++;

让我们尝试在你的控制台中玩玩这些。首先，请注意，你不能直接将这些运算符应用于数字，这可能看起来很奇怪，但我们是在为变量分配一个新的更新值，而不是对值本身进行运算。以下将返回错误

3++;

所以，你只能增加现有的变量。试试这个

let num1 = 4;
num1++;

好的，第二个奇怪之处！当你这样做时，你会看到返回的值是 4——这是因为浏览器返回当前值，然后增加变量。如果你再次返回变量值，你就可以看到它已经被增加了

num1;

-- 也是一样：试试以下操作

let num2 = 6;
num2--;
num2;

赋值运算符是将值赋给变量的运算符。我们已经多次使用了最基本的 =——它将左边的变量分配给右边给定的值

let x = 3; // x contains the value 3
let y = 4; // y contains the value 4
x = y; // x now contains the same value y contains, 4

但还有一些更复杂的类型，它们提供了有用的快捷方式，使你的代码更简洁、更高效。最常见的是下面列出的

尝试在你的控制台中输入上面的几个例子，以了解它们是如何工作的。在每种情况下，看看你是否能在输入第二行之前猜出值是多少。

请注意，你可以在每个表达式的右边使用其他变量，例如

let x = 3; // x contains the value 3
let y = 4; // y contains the value 4
x *= y; // x now contains the value 12

在本练习中，您将操作一些数字和运算符以更改框的大小。框是使用名为Canvas API的浏览器 API 绘制的。无需担心它是如何工作的 - 现在只需关注数学运算。框的宽度和高度（以像素为单位）由变量x和y定义，它们最初都设置为 50。

在新窗口中打开

在上面的可编辑代码框中，有两行用注释标记，我们希望您更新它们，使用某些运算符和/或值在每种情况下使框增大/缩小到特定大小。让我们尝试以下操作

• 更改计算 x 的行，使框仍然为 50 像素宽，但 50 使用数字 43 和 7 以及算术运算符计算。
• 更改计算 y 的行，使框为 75 像素高，但 75 使用数字 25 和 3 以及算术运算符计算。
• 更改计算 x 的行，使框为 250 像素宽，但 250 使用两个数字和余数（模）运算符计算。
• 更改计算 y 的行，使框为 150 像素高，但 150 使用三个数字以及减法和除法运算符计算。
• 更改计算 x 的行，使框为 200 像素宽，但 200 使用数字 4 和赋值运算符计算。
• 更改计算 y 的行，使框为 200 像素高，但 200 使用数字 50 和 3、乘法运算符和加法赋值运算符计算。

不用担心代码完全搞乱。您可以随时按“重置”按钮使代码恢复正常。回答完以上所有问题后，您可以随意玩弄代码或创建自己的挑战。

有时我们希望进行真/假测试，然后根据测试结果采取相应措施 - 为此，我们使用比较运算符。

如果您尝试在控制台中输入其中一些值，您将看到它们都返回true/false值 - 我们在上一篇文章中提到的那些布尔值。这些非常有用，因为它们允许我们在代码中做出决策，并且每次我们想要做出某种选择时都会使用它们。例如，布尔值可用于

• 根据功能是开启还是关闭在按钮上显示正确的文本标签
• 如果游戏结束则显示游戏结束消息，如果游戏获胜则显示胜利消息
• 根据当前的节日季显示正确的季节性问候
• 根据选择的缩放级别放大或缩小地图

我们将在以后的文章中介绍如何编写此类逻辑，以介绍条件语句。现在，让我们看一下一个简单的示例

<button>Start machine</button>
<p>The machine is stopped.</p>

const btn = document.querySelector("button");
const txt = document.querySelector("p");

btn.addEventListener("click", updateBtn);

function updateBtn() {
  if (btn.textContent === "Start machine") {
    btn.textContent = "Stop machine";
    txt.textContent = "The machine has started!";
  } else {
    btn.textContent = "Start machine";
    txt.textContent = "The machine is stopped.";
  }
}

在新窗口中打开

您可以在updateBtn()函数中看到正在使用相等运算符。在这种情况下，我们不是测试两个数学表达式是否具有相同的值 - 我们正在测试按钮的文本内容是否包含某个字符串 - 但它仍然是相同的原理。如果按钮当前显示“启动机器”，当按下它时，我们将它的标签更改为“停止机器”，并根据需要更新标签。如果按钮当前显示“停止机器”，当按下它时，我们将切换回显示。

您已阅读完本文，但您是否能记住最重要的信息？您可以在继续之前找到一些额外的测试来验证您是否保留了这些信息 - 请参阅测试您的技能：数学。

在本文中，我们涵盖了您目前需要了解的关于 JavaScript 中数字的基本信息。您将在整个 JavaScript 学习过程中反复看到数字，因此现在先将其弄清楚是个好主意。如果您是那些不喜欢数学的人，您可以从本章很短的事实中得到安慰。

在下一篇文章中，我们将探索文本以及 JavaScript 如何让我们操作文本。

• 前一个
• 概述：JavaScript 入门
• 下一个