阅读(1.8k) 书签赞(0) 我要纠错

Basic math in JavaScript — numbers and operators

2018-05-15 17:26 更新

先决条件:	基本的计算机素养，基本了解HTML和CSS，了解JavaScript是什么。
目的:	熟悉JavaScript中的数学基础。

每个人都喜欢数学

好吧，也许不是。我们中的一些人喜欢数学，我们中的一些人已经讨厌数学，因为我们必须学习乘法表和在学校长时间分裂，我们中的一些人坐在两者之间的某个地方。但我们没有人能否认数学是生活的一个基本组成部分，我们不能远离没有。当我们学习编程JavaScript(或任何其他语言)时，尤其如此，我们所做的很多工作都依赖于处理数值数据，计算新的值等，你不会惊讶地学到JavaScript具有全功能的数学函数集。

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

数字类型

在编程中，即使是我们都知道的谦卑的十进制数字系统比你想象的更复杂。我们使用不同的术语来描述不同类型的十进制数，例如:

整数是整数，例如10,400或-5。
浮点数(浮点数)具有小数点和小数位，例如12.5和56.7786543。
双打是具有比标准浮点数精度更高的特定类型浮点数(意思是它们是精确到小数位的更大的数)。

我们甚至有不同类型的数字系统！小数是10的基数(意味着它在每一列中使用0-9)，但我们也有类似的东西:

二进制 - 计算机的最低级语言; 0s和1s。
八进制 - 基地8，每列使用0-7。
十六进制 - 基本16，在每列中使用0-9，然后a-f。在CSS中设置颜色时，可能会遇到这些数字。

在你开始担心你的大脑融化之前，停在那里！首先，我们将在本课程中坚持使用十进制数字; 你很少会遇到需要开始思考其他类型，如果有。

第二个好消息是，与其他一些编程语言不同，JavaScript只有一种数据类型，你猜测它，{{jsxref("Number")}}。这意味着，无论在JavaScript中处理什么类型的数字，都以完全相同的方式处理它们。

这是我的所有数字

让我们快速播放一些数字来重新获取我们需要的基本语法。在开发者工具JavaScript控制台中输入以下列出的命令，或者如果您愿意，可以使用下面所示的简单内置控制台。

隐藏代码

<！DOCTYPE html>
<html>
  <head>
    <meta charset ="utf-8">
    <title> JavaScript控制台</ title>
    <style>
      * {
        box-sizing:border-box;
      }}

      html {
        background-color:#0C323D;
        颜色:#809089;
        font-family:monospace;
      }}

      身体 {
        max-width:700px;
      }}

      p {
        margin:0;
        width:1％;
        填充:0 1％;
        font-size:16px;
        line-height:1.5;
        float:left;
      }}

      .input p {
        利润率:1％;
      }}

      .output p {
        width:100％;
      }}

      .input input {
        宽度:96％;
        float:left;
        border:none;
        font-size:16px;
        line-height:1.5;
        font-family:monospace;
        padding:0;
        背景:#0C323D;
        颜色:#809089;
      }}

      div {
        清除:
      }}

    </ style>
  </ head>
  <body>

    
  </ body>

  <script>
    var geval = eval;
    function createInput(){
      var inputDiv = document.createElement('div');
      var inputPara = document.createElement('p');
      var inputForm = document.createElement('input');

      inputDiv.setAttribute('class'，'input');
      inputPara.textContent ='>';
      inputDiv.appendChild(inputPara);
      inputDiv.appendChild(inputForm);
      document.body.appendChild(inputDiv);

      inputForm.addEventListener('change'，executeCode);
    }}

    function executeCode(e){
      尝试{
        var result = geval(e.target.value);
      } catch(e){
        var result ='error  - '+ e.message;
      }}

      var outputDiv = document.createElement('div');
      var outputPara = document.createElement('p');

      outputDiv.setAttribute('class'，'output');
      outputPara.textContent ='Result:'+ result;
      outputDiv.appendChild(outputPara);
      document.body.appendChild(outputDiv);

      e.target.disabled = true;
      e.target.parentNode.style.opacity ='0.5';

      createInput()
    }}
    
    createInput();

  </ script>
</ html>

首先，让我们声明几个变量，并分别用一个整数和一个float来初始化它们，然后输入变量名，检查一切是否正常:
```
var myInt = 5;
var myFloat = 6.667;
myInt;
myFloat;
```
数字值输入时没有引号 - 尝试声明和初始化几个包含数字的变量。在你继续前。
现在让我们检查两个我们的原始变量是相同的数据类型。在JavaScript中有一个名为{{jsxref("Operators / typeof"，"typeof")}}的运算符。输入以下两行如图所示:
```
typeof myInt;
typeof myFloat;
```
你应该"number"在两种情况下都返回 - 这使得事情比我们更容易，如果不同的数字有不同的数据类型，我们不得不以不同的方式处理它们。！！

算术运算符

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

操作员	名称	目的	例
`+`	加成	将两个数字添加在一起。	`6 + 9`
`-`	减法	从左边减去右边的数字。	`20 - 15`
`*`	乘法	将两个数字相乘。	`3 * 7`
`/`	师	用左边的数字除以右边的数字。	`10 / 5`
`%`	剩余(有时称为模)	返回在您将左侧数字共享为等于正确数目的多个整数部分后剩余的剩余部分。	`8 % 3` (返回2，因为三次进入8次，剩下2次。)

注意:有时您会看到称为{{Glossary("Operand"，"operands")}}的sum中涉及的数字。

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

首先尝试输入一些你自己的简单例子，如
```
10 + 7
9 * 8
60％3
```
您还可以尝试声明和初始化变量中的一些数字，并尝试使用sums中的那些 - 变量将表现得完全像它们为了总和目的所持有的值。例如:
```
var num1 = 10;
var num2 = 50;
9 * num1;
num2 / num1;
```
最后，请尝试输入一些更复杂的表达式，例如:
```
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运算符及其优先级的完整列表可以在表达式和运算符中找到。

递增和递减运算符

有时你会想要从一个数值变量值重复增加或减去一个。这可以方便地使用increment(++)和decrement(--)运算符。我们++在我们的"猜数字"游戏中使用我们的第一个飞溅到JavaScript文章中，当我们添加1到我们的guessCount变量，以跟踪用户在每个回合后剩下多少猜测。

guessCount ++;

注意:它们最常用于循环中，稍后您将在课程中学到。例如，假设您想循环浏览价格表，并为每个价格添加销售税。您可以使用循环来依次浏览每个值，并在每种情况下都添加销售税进行必要的计算。增量器用于在需要时移动到下一个值。我们实际上提供了一个简单的例子来展示这是如何做的 - 检查它的实时，看看源代码，看看是否可以发现增量器！我们将在课程的后面详细讨论循环。

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

3 ++;

因此，您只能增加现有变量。尝试这个:

var num1 = 4;
num1 ++;

好吧，陌生的数字2！执行此操作时，您将看到返回的值4 - 这是因为浏览器返回当前值，然后增加变量。你可以看到，如果你再次返回变量值，它已经增加:

num1;

同样如此--:尝试以下

var num2 = 6;
num2--;
num2;

注意:您可以使浏览器以相反的方式执行 - 递增/递减变量，然后返回值 - 通过将操作符放在变量的开始而不是结束。再次尝试上面的例子，但这次使用++num1和--num2。

分配操作符

赋值运算符是为变量赋值的运算符。我们已经使用最基本的=，负载次数 - 它只是分配左边的变量右边的值:

var x = 3; // x包含值3
var y = 4; // y包含值4
x = y; x现在包含相同的值y包含，4

但有一些更复杂的类型，它们提供有用的快捷方式，以保持您的代码更整洁，更高效。最常见的如下:

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

尝试在控制台中键入一些上述示例，以了解它们如何工作。在每种情况下，在输入第二行之前，看看是否可以猜出该值。

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

var x = 3; // x包含值3
var y = 4; // y包含值4
x * = y; x现在包含值12

注意:有很多其他赋值运算符可用，但这些是你现在应该学习的基本知识。

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

在本练习中，我们将让您填写一些数字和运算符来操纵框的大小。该框使用称为{{domxref("Canvas API"，""，""，"true")}}的浏览器API绘制。没有必要担心这是如何工作的 - 现在只专注于数学。(像素)的框的宽度和高度由变量定义x和y，这是最初两个给定值50。

可播放代码

<canvas id ="canvas"width ="400"height ="250"class ="playable-canvas"> </ canvas>
<p>矩形的宽度为50像素，高度为50像素。</ p>
<textarea id ="code"class ="playable-code"style ="height:150px;">
var x = 50;
var y = 50;

//在这里只编辑这两行
x = 50;
y = 50;

ctx.fillStyle ='green';
ctx.fillRect(10，10，x，y);
</ textarea>

<div class ="playable-buttons">
  <input id ="reset"type ="button"value ="Reset"/>
</ div>

var canvas = document.getElementById('canvas');
var para = document.querySelector('p');
var ctx = canvas.getContext('2d');
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var edit = document.getElementById('edit');
var code = textarea.value;

function drawCanvas(){
  ctx.clearRect(0，0，canvas.width，canvas.height);
  eval(textarea.value);
  para.textContent ='矩形是'+ x +'px宽和'+ y +'px高。
}}

reset.addEventListener('click'，function(){
  textarea.value = code;
  drawCanvas();
});

textarea.addEventListener('input'，drawCanvas);
window.addEventListener('load'，drawCanvas);

在上面的可编辑代码框中，有两行标记清楚地注释一个注释，我们希望你更新，使框增长/收缩到一定的大小，在每种情况下使用某些运算符和/或值。我们希望您回答以下问题:

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

不要担心，如果你完全混乱的代码。您可以随时按下重置按钮，让事情再次工作。在您正确回答了所有上述问题后，您可以随意使用代码，或者为您的朋友/同学设置一些挑战。

比较运算符

有时我们想要运行true / false测试，然后根据测试的结果相应地执行 - 为此我们使用比较运算符。

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

注意:您可能会看到一些人在他们的代码中使用==和!=在等号和不等号 - 这些是JavaScript中的有效运算符，但它们不同于===/ !==- 前者测试值是否相同，但数据类型可以不同，而后面的严格版本测试如果值和dataype是相同的。严格的版本往往导致更少的错误未被发现，因此我们建议您使用它们。

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

在按钮上显示正确的文本标签，具体取决于功能是打开还是关闭。
如果游戏结束则显示消息，或者如果游戏已经赢得则显示胜利消息。
显示正确的季节性问候，取决于什么节日的季节。
根据选择的缩放级别缩放地图。

我们将在未来的文章中讨论如何编写这样的逻辑。现在，让我们来看一个简单的例子:

<！DOCTYPE html>
<html>
  <head>
    <meta charset ="utf-8">
    <title>第一个条件示例</ title>
  </ head>
  <body>
    <button>启动机</ button>
    <p>机器已停止。</ p>

  <script>
    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 ='机器已经开始！';
      } else {
        btn.textContent ='启动机';
        txt.textContent ='机器停止。
      }}
    }}
  </ script>
</ html>

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

注意:这种在两个状态之间交换的控制通常被称为切换。它在一个状态和另一个状态之间切换 - 点亮，熄灭等。

概要

在本文中，我们已经涵盖了您需要了解的关于JavaScript中的数字的基本信息，现在。你会看到数字一次又一次地使用，一直通过你的JavaScript学习，所以这是一个好主意，现在解决这个问题。如果你是那些不喜欢数学的人之一，你可以安慰这个事实，这一章很短。

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

注意:如果你喜欢数学，想阅读更多关于它如何在JavaScript中实现，你可以在MDN的主要JavaScript部分找到更多的细节。开始的好地方是我们的数字和日期，表达式和运算符的文章。

{{PreviousNext("Learn / JavaScript / First Steps / Variables"，"Learn / JavaScript / First Steps / Strings"，"Learn / JavaScript / First_steps")}}

以上内容是否对您有帮助：

← 如何存储你需要的信息 — 变量

Handling text — strings in JavaScript →

写笔记

我要补充