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

我们将讨论JavaScript中的数学-如何使用运算符和其他功能来成功操纵数字来进行出价。ANF码友部落

先决条件: 基本的计算机知识,对HTML和CSS的基本理解,对JavaScript的理解。
目的: 熟悉JavaScript中的数学基础。

每个人都喜欢数学

好吧,也许不行。我们中的有些人喜欢数学,自从我们不得不在学校学习乘法表和长除法以来,我们中的一些人就讨厌数学,而我们中的一些人则介于两者之间。但是,我们谁也不能否认数学是生活的基本组成部分,离我们不远。当我们正在学习编程JavaScript(或与此有关的任何其他语言)时,尤其如此-我们所做的大部分工作都依赖于处理数字数据,计算新值等,因此您不会感到惊讶JavaScript具有一组功能齐全的数学函数。ANF码友部落

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

数字类型

在编程中,即使众所周知的谦虚十进制数字系统也比您想象的要复杂。我们使用不同的术语来描述不同类型的十进制数字,例如:ANF码友部落

  • 整数整数,例如10、400或-5。
  • 浮点数(float)具有小数点和小数位,例如12.5和56.7786543。
  • 精度是一种特殊类型的浮点数,其精度比标准浮点数高(这意味着它们可以精确到小数点后的位数)。

我们甚至有不同类型的号码系统!十进制以10为底(意味着每列使用0–9),但是我们也有类似的东西:ANF码友部落

  • 二进制-计算机的最低级语言;0和1。
  • 八进制—以8为底,每列使用0–7。
  • 十六进制—以16为底,在每列中使用0–9,然后使用a–f。在CSS中设置颜色之前,您可能已经遇到过这些数字

在开始担心大脑融化之前,就停在这里!首先,我们将在整个过程中坚持使用十进制数;如果有的话,您很少会想到其他类型的需求。ANF码友部落

好消息的第二点是,与其他一些编程语言不同,JavaScript仅具有一种数字类型的数据类型,包括整数和小数,您猜对了Number这意味着无论您使用JavaScript处理哪种类型的数字,都以完全相同的方式处理它们。ANF码友部落

注意:实际上,JavaScript具有第二个数字类型BigInt,用于非常大的整数。但是出于本课程的目的,我们将只考虑Number价值。ANF码友部落

对我来说都是数字

让我们快速处理一些数字,以重新了解所需的基本语法。在开发人员工具JavaScript控制台中输入下面列出的命令。ANF码友部落

  1. 首先,让我们声明几个变量,分别使用整数和浮点数对其进行初始化,然后再次键入变量名称以检查是否一切正常:
    let myInt = 5;
    let myFloat = 6.667;
    myInt;
    myFloat;
  2. 输入的数字值不带引号-继续进行操作之前,请声明并初始化另外两个包含数字的变量。
  3. 现在,让我们检查两个原始变量是否具有相同的数据类型。typeof在JavaScript中有一个调用功能的运算符输入以下两行,如下所示:
    typeof myInt;
    typeof myFloat;
    "number"在这两种情况下, 您都应该返回–与不同的数字具有不同的数据类型,而我们不得不以不同的方式进行处理相比,这使我们容易得多。

有用的数字方法

Number对象的实例代表您将在JavaScript中使用的所有标准数字,对象具有许多有用的方法供您操纵数字。我们不会在本文中详细介绍这些内容,因为我们希望将其作为简单的介绍进行介绍,而现在仅涵盖真正的基本要点。但是,一旦您通读了本模块几次,就值得去对象参考页并了解更多可用信息。ANF码友部落

例如,要将您的数字四舍五入到固定的小数位数,请使用toFixed()方法。在浏览器的控制台中输入以下几行:ANF码友部落

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

转换为数字数据类型

有时您可能会以存储为字符串类型的数字结尾,这使得使用它执行计算变得困难。这最常见的情况是在将数据输入到表单输入中并且输入类型为text时发生的。有一种解决此问题的方法-将字符串值传递到Number()构造函数中以返回相同值的数字版本。ANF码友部落

例如,尝试在控制台中输入以下行:ANF码友部落

let myNumber = '74';
myNumber + 3;

您最终得到的结果是743,而不是77,因为myNumber它实际上定义为字符串。您可以通过输入以下内容进行测试:ANF码友部落

typeof myNumber;

要修正计算,您可以执行以下操作:ANF码友部落

Number(myNumber) + 3;

算术运算符

算术运算符是我们用于在JavaScript中进行求和的基本运算符:ANF码友部落

操作员 名称 目的
+ 加成 将两个数字相加。 6 + 9
- 减法 从左边减去右边的数字。 20 - 15
* 乘法 将两个数字相乘。 3 * 7
/ 用左边的数字除以右边的数字。 10 / 5
% 余数(有时称为模数)

将左数划分为等于右数的整数部分后,返回剩余的余数。ANF码友部落

8 % 3 (返回2,因为三个两次变成8,剩下2个留在后面)。ANF码友部落

** 指数 将一个base数字 exponent 幂,即该base数字乘以自身乘以exponent倍数。它最初是在EcmaScript 2016中引入的。 5 ** 2(返回25,与相同5 * 5)。

注意:有时您会看到算术中涉及的数字称为操作数。ANF码友部落

注意:有时您可能会看到使用较旧Math.pow()方法表示的指数,该方法的工作方式非常相似。例如,在Math.pow(7, 3)7是底座和3是指数的,所以表达式的结果是343Math.pow(7, 3)等价于7**3ANF码友部落

我们可能不需要教您如何进行基本数学运算,但是我们想测试您对所涉及语法的理解。尝试将以下示例输入到开发人员工具JavaScript控制台中,以熟悉语法。ANF码友部落

  1. 首先尝试输入您自己的一些简单示例,例如
    10 + 7
    9 * 8
    60 % 3
  2. 您还可以尝试声明和初始化变量中的一些数字,并尝试在求和中使用这些数字-变量的行为将与它们为求和而持有的值完全相同。例如:
    let num1 = 10;
    let num2 = 50;
    9 * num1;
    num1 ** 3;
    num2 / num1;
  3. 本节最后,尝试输入一些更复杂的表达式,例如:
    5 + 10 * 3;
    num2 % 9 * num1;
    num2 + num1 / 8 + 2;

最后一组计算中的某些结果可能无法完全满足您的预期。以下部分很可能会给出答案。ANF码友部落

运算符优先级

让我们从上方看最后一个示例,假设该示例num2保留值50并num1保留值10(如上所述):ANF码友部落

num2 + num1 / 8 + 2;

作为人类,您可能会读为“ 50加10等于60”,然后是“ 8加2等于10”,最后是“ 60除以10等于6”ANF码友部落

但是浏览器执行“ 10除以8等于1.25”,然后“ 50加1.25加2等于53.25”ANF码友部落

这是由于运算符优先级的缘故-在计算计算结果时(在编程中称为表达式)某些运算符会先于其他运算符应用JavaScript中的运算符优先级与学校数学课程中的运算符优先级相同-始终先进行相乘和除法,然后再进行加法和减法(计算始终从左到右进行评估)。ANF码友部落

如果要覆盖运算符优先级,可以将括号放在要首先明确处理的部分周围。因此,要得到结果6,我们可以这样做:ANF码友部落

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

试试看。ANF码友部落

注意:可以在表达式和运算符中找到所有JavaScript运算符及其优先级的完整列表。ANF码友部落

增量和减量运算符

有时,您可能想在数字变量值中重复加减。使用增量(++)和减量(--)运算符可以方便地完成此操作。我们用++我们的“猜数字”游戏早在我们的第一溅入JavaScript的文章中,我们添加1到我们的guessCount变量来跟踪用户有多少猜测每个回合后离开。ANF码友部落

guessCount++;

注意:这些运算符最常在循环中使用,您将在本课程的后面部分中进行了解。例如,假设您要遍历价格清单,并为每个清单增加营业税。您将使用循环依次遍历每个值,并进行必要的计算以增加每种情况下的营业税。增量器用于在需要时移至下一个值。实际上,我们提供了一个简单的示例来演示如何完成此操作-现场检查并查看源代码以查看是否可以发现增量器!在本课程的后面,我们将详细介绍循环。ANF码友部落

让我们尝试在控制台中使用它们。首先,请注意,您不能将它们直接应用于数字,这似乎很奇怪,但是我们正在为变量分配一个新的更新值,而不是对该值本身进行运算。以下将返回错误:ANF码友部落

3++;

因此,您只能增加一个现有变量。尝试这个:ANF码友部落

let num1 = 4;
num1++;

好吧,陌生号码2!当您执行此操作时,您将看到返回的值4-这是因为浏览器返回了当前值,然后使变量递增。如果再次返回变量值,则可以看到它已经增加:ANF码友部落

num1;

同样是这样--:尝试以下方法ANF码友部落

let num2 = 6;
num2--;
num2;

注意:您可以通过将运算符放在变量的开头而不是结尾,使浏览器执行相反的操作(递增/递减变量,然后返回值)。再次尝试上述示例,但这一次使用++num1--num2ANF码友部落

赋值运算符

赋值运算符是将值分配给变量的运算符。我们已经使用了最基本的=加载时间-它为左侧的变量分配了右侧所示的值:ANF码友部落

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

但是,还有一些更复杂的类型,它们提供了有用的快捷方式来使您的代码更整洁,更高效。下面列出了最常见的:ANF码友部落

操作员 名称 目的 的快捷方式
+= 加法分配 将右侧的值添加到左侧的变量值,然后返回新的变量值 x += 4; x = x + 4;
-= 减法分配 从左侧的变量值中减去右侧的值,然后返回新的变量值 x -= 3; x = x - 3;
*= 乘法分配 将左侧的变量值乘以右侧的值,然后返回新的变量值 x *= 3; x = x * 3;
/= 部门分配 将左侧的变量值除以右侧的值,然后返回新的变量值 x /= 5; x = x / 5;

尝试在控制台中输入上述一些示例,以了解它们的工作原理。在每种情况下,在键入第二行之前,请查看是否可以猜测值是多少。ANF码友部落

请注意,您可以非常高兴地在每个表达式的右侧使用其他变量,例如:ANF码友部落

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

注意:还有许多其他赋值运算符可用,但是这些是您现在应该学习的基本知识。ANF码友部落

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

在本练习中,您将操纵一些数字和运算符来更改盒子的大小。该框是使用称为Canvas API的浏览器API绘制的。无需担心它是如何工作的-现在只需专注于数学即可。框的宽度和高度(以像素为单位)由变量x定义,变量y最初都指定为50。ANF码友部落

ANF码友部落

在新窗口中打开ANF码友部落

在上方的可编辑代码框中,有两行标有注释,我们希望您对其进行更新,以使该框在每种情况下都使用某些运算符和/或值来增大/缩小为特定大小。让我们尝试以下方法:ANF码友部落

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

如果您完全弄乱了代码,请不要担心。您始终可以按“重置”按钮使事情再次起作用。在正确回答了上述所有问题之后,请随意使用一些代码或创建您自己的挑战。ANF码友部落

比较运算符

有时,我们将要运行true / false测试,然后根据该测试的结果采取相应的行动-为此,我们使用比较运算符ANF码友部落

操作员 名称 目的
=== 严格平等 测试左右值是否彼此相同 5 === 2 + 4
!== 严格不平等 测试的左,右值是否相同,彼此 5 !== 2 + 3
< 少于 测试左边的值是否小于右边的值。 10 < 6
> 比...更棒 测试左边的值是否大于右边的值。 10 > 20
<= 小于或等于 测试左值是否小于或等于右值。 3 <= 2
>= 大于或等于 测试左边的值是否大于或等于右边的值。 5 >= 4

注意:您可以使用看到一些人==,并!=在他们的测试平等和不相等。这些是JavaScript中的有效运算符,但不同于===!==以前的版本测试值是否相同,但测试值的数据类型是否相同。后者的严格版本测试值及其数据类型的相等性。严格的版本通常会导致更少的错误,因此我们建议您使用它们。ANF码友部落

如果尝试在控制台中输入其中一些值,您会看到它们全部返回true/false值-我们在上一篇文章中提到的布尔值。这些非常有用,因为它们使我们能够在代码中做出决策,并且每次我们要进行某种选择时都会使用它们。例如,布尔值可用于:ANF码友部落

  • 根据功能是否打开,在按钮上显示正确的文本标签
  • 如果游戏结束,则显示游戏结束消息;如果游戏获胜,则显示胜利消息
  • 根据正确的假期显示正确的季节性问候
  • 根据选择的缩放级别放大或缩小地图

在以后的文章中,我们将研究如何对条件逻辑进行编码。现在,让我们看一个简单的例子:ANF码友部落

<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.';
  }
}

ANF码友部落

在新窗口中打开ANF码友部落

您可以看到仅在updateBtn()函数内部使用了相等运算符在这种情况下,我们不会测试两个数学表达式是否具有相同的值-我们正在测试按钮的文本内容是否包含某个字符串-但这仍然是相同的原理。如果按下按钮时当前说的是“启动机器”,则我们将其标签更改为“停止机器”,并适当地更新标签。如果当前按下该按钮时说“停止机器”,则我们将显示再次调回。ANF码友部落

注意:这种在两个状态之间交换的控件通常称为切换它可以在一种状态与另一种状态之间切换-点亮,熄灭等。ANF码友部落

测试你的技能!

您已经到了本文的结尾,但是您还记得最重要的信息吗?在继续进行之前,您可以找到一些其他测试来验证您是否保留了此信息—请参阅测试您的技能:数学。ANF码友部落

概要

在本文中,我们暂时涵盖了您需要了解的有关JavaScript中数字的基本信息。在您学习JavaScript的过程中,您会一次又一次地看到数字,因此,现在就将其消除是个好主意。如果您是不喜欢数学的人之一,那么本章很短,您可以放心。ANF码友部落

在下一篇文章中,我们将探讨文本以及JavaScript如何允许我们对其进行操作。ANF码友部落

注意:如果您喜欢数学并且想阅读更多有关如何在JavaScript中实现的信息,则可以在MDN的主要JavaScript部分中找到更多详细信息。最好的起点是我们的数字和日期以及表达式和运算符文章。ANF码友部落