Learn web development

JavaScript中的基础数学 — 数字和操作符

翻译正在进行中。

在本次课程中,我们讨论 JavaScript 中的数学 — 我们如何使用 operators 和其他功能来成功地操作数字来完成我们的请求。

前提: 基本的计算机知识,对HTML和CSS初步了解,知道JavaScript是什么。
目标: 熟悉 JavaScript 中 Math 的基础知识。

人人都爱数学

好吧,可能不是。有些人喜欢数学,有些人可能从在学校必须学习乘法表和除法就讨厌数学,还有人介于两者之间。但我们都不能否认,数学是生活的基本组成部分,我们离不了它。尤其如此,当我们学习编写 JavaScript 程序(或任何其他语言),我们所做的很多事情都依赖于处理数值数据,计算新值等。你将不会惊讶地认识到 JavaScript 有一套可用的全功能的数学功能。

本文仅讨论您现在需要了解的基本部分。

数字类型

在编程时,即使是我们都知道的最普遍的十进制数,也比你想象的要复杂的多。我们使用不同的术语来描述不同类型的十进制数,例如:

  • 整数 就是整数,例如 10, 400, 或者 -5.
  • 浮点数 (浮点) 有小数点或小数位,例如 12.5,和 56.7786543。
  • 双精度双精度是一种特定类型的浮点数,它们具有比标准浮点数更高的精度(这意味着它们精确到更大的小数位数)。

我们甚至有不同类型的数字系统! 十进制是基数10(意味着它在每列使用0-9),但是我们也有这样的东西:

  • 二进制 — 电脑的最基础语言; 0s and 1s
  • 八进制 - 基数8,每列使用0-7
  • 十六进制 - 基数16,每列使用0-9,然后使用a-f。 在CSS中设置颜色时,可能会遇到这些数字。

在你开始担心你的大脑混乱之前,先停下来吧! 一开始,我们将在本课程中坚持十进制数; 你很少会遇到需要开始考虑其他类型,如果有的话。

第二个好消息是,与其他一些编程语言不同,JavaScript只有一个数据类型,您猜测到,Number。 这意味着,你在JavaScript中处理的任何类型的数字,都以完全相同的方式处理它们。

这是我们的全部数字

让我们快点玩一些数字,以重新定义我们所需要的基本语法。 在您的开发工具JavaScript控制台中输入下面列出的命令,或者如果您愿意,请使用下面简单的内置控制台。

在新窗口中打开

  1. 首先,我们先声明一对变量,并分别用一个整数和一个浮点数来初始化它们,然后再输入变量名来检查是否正确:
    var myInt = 5;
    var myFloat = 6.667;
    myInt;
    myFloat;
  2. 数值键入不带引号 - 在继续之前尝试声明和初始化更多包含数字的变量。
  3. 现在我们来看看我们的原始变量是否是相同的数据类型。 在JavaScript中有一个称为typeof的运算符。 输入如下所示的两行:
    typeof myInt;
    typeof myFloat;
    在这两种情况下,您应该获得“数字” - 这使得事情对我们更容易,如果不同的数字具有不同的数据类型,我们必须以不同的方式处理它们。呦!

算数运算符

算术运算符是我们用来做和的基本运算符:

Operator Name Purpose Example
+ 加法 两个数相加。 6 + 9
- 减法 从左边减去右边的数。 20 - 15
* 乘法 两个数相乘。 3 * 7
/ 除法 用右边的数除左边的数 10 / 5
% 求余(有时候也叫取模)

在你将左边的数分成一些右边数字个数的整数部分,返回剩下余数

8 % 3 (返回 2,将8分成3份,余下2 。)

Note: 你以后有时候会看到一些数字涉及求和被称为 operands

我们可能不需要教你如何做基础数学,但我们想测试你对所涉及的语法的理解。 尝试将下面的示例输入到开发者工具JavaScript控制台中,或者如果你愿意,请使用前面提到的简单内置控制台来熟悉语法。

  1. 首先尝试输入一些简单的例子,例如
    10 + 7
    9 * 8
    60 % 3
  2. 您还可以尝试在变量中声明和初始化一些数字,并尝试使用总和中的数字 - 变量的行为与其持有的值完全一样。 例如:
    var num1 = 10;
    var num2 = 50;
    9 * num1;
    num2 / num1;
  3. 最后在本节中,尝试输入一些更复杂的表达式,如:
    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);

尝试看看。

Note: 注意:可以在表达式和运算符中找到所有JavaScript运算符的完整列表及其优先级。Expressions and operators.

递增和递减运算符

有时候,您需要反复添加或从数字变量值中减去一个。 这可以方便地使用增量(++)和递减( - )运算符来完成。 我们在我们的“猜数字”游戏中使用了++,当我们添加1到我们的guessCount变量来跟踪用户在每次转动之后剩下的猜测时,我们首先进入了JavaScript文章。

guessCount++;

Note: 它们最常用于循环中,您将在以后的课程中了解。 例如,假设您想循环查看价格表,并为每个价格增加销售税。 您可以使用循环依次查看每个值,并在每种情况下进行必要的计算,以添加销售税。 当需要时,增量器用于移动到下一个值。 我们实际上提供了一个简单的例子,显示了如何完成 - 检查它,并查看源代码,看看是否可以发现增量器! 我们稍后将会详细介绍循环。

我们来试试看你们的控制台。 首先,请注意,您不能将这些直接应用于一个数字,这可能看起来很奇怪,但是我们为变量赋值一个新的更新值,而不是对该值进行操作。 以下将返回错误:

3++;

所以,你只能增加一个现有的变量。 尝试这个:

var num1 = 4;
num1++;

好的,奇怪的数字2! 执行此操作时,您会看到返回值为4,这是因为浏览器返回当前值,然后增加变量。 如果您再次返回变量值,则可以看到它已经递增:

num1;

- 同样如此 - 尝试以下操作

var num2 = 6;
num2--;
num2;

Note: 您可以使浏览器以其他方式进行操作 - 递增/递减变量,然后返回值 - 将操作符放在变量的开头,而不是结束。 再次尝试上面的例子,但这次使用++ num1和--num2。

操作运算符

赋值运算符是向变量分配值的运算符。 我们已经使用了最基本的一个,=,负载次数,它只需在左边分配右边的值,即:

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

但是还有一些更复杂的类型,它们提供了有用的快捷方式,可以使您的代码更加清洁和高效。 最常见的如下:

Operator Name Purpose Example Shortcut for
+= Addition assignment Adds the value on the right to the variable value on the left, then returns the new variable value x = 3;
x += 4;
x = 3;
x = x + 4;
-= Subtraction assignment Subtracts the value on the right from the variable value on the left, and returns the new variable value x = 6;
x -= 3;
x = 6;
x = x - 3;
*= Multiplication assignment Multiples the variable value on the left by the value on the right, and returns the new variable value x = 2;
x *= 3;
x = 2;
x = x * 3;
/= Division assignment Divides the variable value on the left by the value on the right, and returns the new variable value x = 10;
x /= 5;
x = 10;
x = x / 5;

尝试在你的控制台中输入上面的一些示例,以了解它们的工作原理。 在每种情况下,你是否可以猜出在输入第二行之前的值。

请注意,您可以愉快地使用每个表达式右侧的其他变量,例如:

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

Note: 虽然有很多可用的赋值运算符, 但是这些是你现在应该学习的基本的一类。

主动学习:调整画布框的大小

在这个练习中,我们将让你填写一些数字和操作符来操纵一个框的大小。 该框使用称为true的浏览器API绘制。 没有必要担心这是如何工作的 - 现在只关注数学。 盒子的宽度和高度(以像素为单位)由变量x和y定义,变量x和y最初都被赋值为50。

Open in new window

在上面的可编辑代码框中,有两行标有清晰的注释,我们希望你更新以使框增长/缩小到某些大小,在每种情况下使用某些操作符和/或值。 我们希望你回答以下问题:

  • 更改计算x的行,使框仍然是50px宽,并且使用数字43和7以及算术运算符计算50。
  • 更改计算y的行,使框为高75像素,使用数字25和3计算75,以及算术运算符。
  • 更改计算x的行,使框为250px宽,250是使用两个数字和余数(模)运算符计算的。
  • 更改计算y的行,使框为150px高,150是使用三个数字计算的,以及减法和除数运算符。
  • 更改计算x的行,因此该框为200px宽,并且使用数字4和赋值运算符计算200。
  • 更改计算y的行,使框为200px高,使用数字50和3,乘法运算符和加法运算符计算200。

如果你完全混淆了代码,别担心。 您可以随时按“重置”按钮,使事情恢复正常。 在您正确回答了上述所有问题后,可以自由地使用代码或创建自己的挑战。

比较运算符

有时,我们将要运行真/假测试,然后根据该测试的结果进行相应的操作 - 为此,我们使用比较运算符。

Operator Name Purpose Example
=== 严格等于 测试左右值是否相同 5 === 2 + 4
!== 严格不等于 测试左右值是否相同 5 !== 2 + 3
< 小于 测试左值是否小于右值。 10 < 6
> 大于 测试左值是否大于右值 10 > 20
<= 小于或等于 测试左值是否小于或等于右值。 3 <= 2
>= 大于或等于 测试左值是否大于或等于正确值。 5 >= 4

Note: 您可能会看到有些人在他们的代码中使用==!=来平等和不相等,这些都是JavaScript中的有效运算符,但它们与===/!==不同,前者测试值是否相同, 但是数据类型可能不同,而后者的严格版本测试值和数据类型是否相同。 严格的版本往往导致更少的错误,所以我们建议您使用这些严格的版本。

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

  • 根据功能是打开还是关闭,在按钮上显示正确的文本标签。
  • 如果游戏结束,则显示游戏消息,或者如果游戏已经获胜,则显示胜利消息。
  • 显示正确的季节性问候,取决于假期季节。
  • 根据选择的缩放级别缩小或缩小地图。

当我们在以后的的文章中查看条件语句时,我们将介绍如何编写这样的逻辑。 现在,我们来看一个简单的例子:

<button>Start machine</button>
<p>The machine is stopped.</p>
var btn = document.querySelector('button');
var 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.';
  }
}

Open in new window

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

Note: 这种在两个状态之间来回交换的行为通常被称为切换。它在一个状态和另一个状态之间切换 - 点亮,熄灭等

总结

在本文中,我们已经介绍了现在需要了解JavaScript中数字的基本信息。 你会看到数字一再使用,一直通过你的JavaScript学习,所以这是一个好主意,让这个现在的方式。 如果你是那些不喜欢数学的人之一,你可以很安慰这一章很简短。

在下一篇文章中,我们将探讨文本,以及JavaScript如何让我们操纵它。

Note:  如果您喜欢数学,并希望阅读更多关于它如何在JavaScript中实现的, 那么你可以在 MDN's main JavaScript 部分读到更多关于它的内容。对于学习Numbers and dates and Expressions and operators 来说,那是一个不错的地方。

文档标签和贡献者

 最后编辑者: wubinbin0403,