閱讀(1.9k) 書簽贊(0) 我要糾錯

Basic math in JavaScript — numbers and operators

2018-05-15 17:26 更新

先決條件:	基本的計算機(jī)素養(yǎng)，基本了解HTML和CSS，了解JavaScript是什么。
目的:	熟悉JavaScript中的數(shù)學(xué)基礎(chǔ)。

每個人都喜歡數(shù)學(xué)

好吧，也許不是。我們中的一些人喜歡數(shù)學(xué)，我們中的一些人已經(jīng)討厭數(shù)學(xué)，因為我們必須學(xué)習(xí)乘法表和在學(xué)校長時間分裂，我們中的一些人坐在兩者之間的某個地方。但我們沒有人能否認(rèn)數(shù)學(xué)是生活的一個基本組成部分，我們不能遠(yuǎn)離沒有。當(dāng)我們學(xué)習(xí)編程JavaScript(或任何其他語言)時，尤其如此，我們所做的很多工作都依賴于處理數(shù)值數(shù)據(jù)，計算新的值等，你不會驚訝地學(xué)到JavaScript具有全功能的數(shù)學(xué)函數(shù)集。

本文僅討論您現(xiàn)在需要了解的基本部分。

數(shù)字類型

在編程中，即使是我們都知道的謙卑的十進(jìn)制數(shù)字系統(tǒng)比你想象的更復(fù)雜。我們使用不同的術(shù)語來描述不同類型的十進(jìn)制數(shù)，例如:

整數(shù)是整數(shù)，例如10,400或-5。
浮點數(shù)(浮點數(shù))具有小數(shù)點和小數(shù)位，例如12.5和56.7786543。
雙打是具有比標(biāo)準(zhǔn)浮點數(shù)精度更高的特定類型浮點數(shù)(意思是它們是精確到小數(shù)位的更大的數(shù))。

我們甚至有不同類型的數(shù)字系統(tǒng)！小數(shù)是10的基數(shù)(意味著它在每一列中使用0-9)，但我們也有類似的東西:

二進(jìn)制 - 計算機(jī)的最低級語言; 0s和1s。
八進(jìn)制 - 基地8，每列使用0-7。
十六進(jìn)制 - 基本16，在每列中使用0-9，然后a-f。在CSS中設(shè)置顏色時，可能會遇到這些數(shù)字。

在你開始擔(dān)心你的大腦融化之前，停在那里！首先，我們將在本課程中堅持使用十進(jìn)制數(shù)字; 你很少會遇到需要開始思考其他類型，如果有。

第二個好消息是，與其他一些編程語言不同，JavaScript只有一種數(shù)據(jù)類型，你猜測它，{{jsxref("Number")}}。這意味著，無論在JavaScript中處理什么類型的數(shù)字，都以完全相同的方式處理它們。

這是我的所有數(shù)字

讓我們快速播放一些數(shù)字來重新獲取我們需要的基本語法。在開發(fā)者工具JavaScript控制臺中輸入以下列出的命令，或者如果您愿意，可以使用下面所示的簡單內(nèi)置控制臺。

隱藏代碼

<！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>

首先，讓我們聲明幾個變量，并分別用一個整數(shù)和一個float來初始化它們，然后輸入變量名，檢查一切是否正常:
```
var myInt = 5;
var myFloat = 6.667;
myInt;
myFloat;
```
數(shù)字值輸入時沒有引號 - 嘗試聲明和初始化幾個包含數(shù)字的變量。在你繼續(xù)前。
現(xiàn)在讓我們檢查兩個我們的原始變量是相同的數(shù)據(jù)類型。在JavaScript中有一個名為{{jsxref("Operators / typeof"，"typeof")}}的運算符。輸入以下兩行如圖所示:
```
typeof myInt;
typeof myFloat;
```
你應(yīng)該"number"在兩種情況下都返回 - 這使得事情比我們更容易，如果不同的數(shù)字有不同的數(shù)據(jù)類型，我們不得不以不同的方式處理它們。??！

算術(shù)運算符

算術(shù)運算符是我們用來求和的基本運算符:

操作員	名稱	目的	例
`+`	加成	將兩個數(shù)字添加在一起。	`6 + 9`
`-`	減法	從左邊減去右邊的數(shù)字。	`20 - 15`
`*`	乘法	將兩個數(shù)字相乘。	`3 * 7`
`/`	師	用左邊的數(shù)字除以右邊的數(shù)字。	`10 / 5`
`%`	剩余(有時稱為模)	返回在您將左側(cè)數(shù)字共享為等于正確數(shù)目的多個整數(shù)部分后剩余的剩余部分。	`8 % 3` (返回2，因為三次進(jìn)入8次，剩下2次。)

注意:有時您會看到稱為{{Glossary("Operand"，"operands")}}的sum中涉及的數(shù)字。

我們可能不需要教你如何做基本的數(shù)學(xué)，但我們想測試你對所涉及語法的理解。嘗試將以下示例輸入到開發(fā)者工具JavaScript控制臺中，或者如果您愿意，可以使用前面提到的簡單內(nèi)置控制臺來熟悉語法。

首先嘗試輸入一些你自己的簡單例子，如
```
10 + 7
9 * 8
60％3
```
您還可以嘗試聲明和初始化變量中的一些數(shù)字，并嘗試使用sums中的那些 - 變量將表現(xiàn)得完全像它們?yōu)榱丝偤湍康乃钟械闹怠?/font>例如:
```
var num1 = 10;
var num2 = 50;
9 * num1;
num2 / num1;
```

最后，請嘗試輸入一些更復(fù)雜的表達(dá)式，例如:

5 + 10 * 3;
num2％9 * num1;
num2 + num1 / 8 + 2;

這些最后一組的一些錢可能不會給你相當(dāng)你期望的結(jié)果; 下面的部分可能會給出答案為什么。

運算符優(yōu)先級

讓我們看看上面的最后一個例子，假設(shè)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"。

這是因為運算符優(yōu)先級 - 在計算和的結(jié)果(在編程中稱為表達(dá)式)時，某些運算符將在其他運算符之前應(yīng)用。JavaScript中的運算符優(yōu)先級與學(xué)習(xí)中的數(shù)學(xué)類中的相同 - 乘法和除法總是先進(jìn)行，然后加法和減法(總是從左到右計算)。

如果要覆蓋運算符優(yōu)先級，可以將圓括號放在要首先明確處理的部分四周。所以要得到6的結(jié)果，我們可以這樣做:

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

試試看看。

注意:所有JavaScript運算符及其優(yōu)先級的完整列表可以在表達(dá)式和運算符中找到。

遞增和遞減運算符

有時你會想要從一個數(shù)值變量值重復(fù)增加或減去一個。這可以方便地使用increment(++)和decrement(--)運算符。我們++在我們的"猜數(shù)字"游戲中使用我們的第一個飛濺到JavaScript文章中，當(dāng)我們添加1到我們的guessCount變量，以跟蹤用戶在每個回合后剩下多少猜測。

guessCount ++;

注意:它們最常用于循環(huán)中，稍后您將在課程中學(xué)到。例如，假設(shè)您想循環(huán)瀏覽價格表，并為每個價格添加銷售稅。您可以使用循環(huán)來依次瀏覽每個值，并在每種情況下都添加銷售稅進(jìn)行必要的計算。增量器用于在需要時移動到下一個值。我們實際上提供了一個簡單的例子來展示這是如何做的 - 檢查它的實時，看看源代碼，看看是否可以發(fā)現(xiàn)增量器！我們將在課程的后面詳細(xì)討論循環(huán)。

讓我們試著在你的控制臺玩這些。首先，請注意，您不能將它們直接應(yīng)用于一個數(shù)字，這可能看起來很奇怪，但我們正在為變量分配一個新的更新值，而不是對該值本身進(jìn)行操作。以下將返回錯誤:

3 ++;

因此，您只能增加現(xiàn)有變量。嘗試這個:

var num1 = 4;
num1 ++;

好吧，陌生的數(shù)字2！執(zhí)行此操作時，您將看到返回的值4 - 這是因為瀏覽器返回當(dāng)前值，然后增加變量。你可以看到，如果你再次返回變量值，它已經(jīng)增加:

num1;

同樣如此--:嘗試以下

var num2 = 6;
num2--;
num2;

注意:您可以使瀏覽器以相反的方式執(zhí)行 - 遞增/遞減變量，然后返回值 - 通過將操作符放在變量的開始而不是結(jié)束。再次嘗試上面的例子，但這次使用++num1和--num2。

分配操作符

賦值運算符是為變量賦值的運算符。我們已經(jīng)使用最基本的=，負(fù)載次數(shù) - 它只是分配左邊的變量右邊的值:

var x = 3; // x包含值3
var y = 4; // y包含值4
x = y; x現(xiàn)在包含相同的值y包含，4

但有一些更復(fù)雜的類型，它們提供有用的快捷方式，以保持您的代碼更整潔，更高效。最常見的如下:

操作員	名稱	目的	例	快捷方式
`+=`	加法分配	將右側(cè)的值添加到左側(cè)的變量值，然后返回新的變量值	`x = 3; x += 4;`	`x = 3; x = x + 4;`
`-=`	減法分配	從左側(cè)的變量值中減去右側(cè)的值，并返回新的變量值	`x = 6; x -= 3;`	`x = 6; x = x - 3;`
`*=`	乘法分配	將左側(cè)的變量值乘以右側(cè)的值，并返回新的變量值	`x = 2; x *= 3;`	`x = 2; x = x * 3;`
`/=`	分配分配	將左側(cè)的變量值除以右側(cè)的值，并返回新的變量值	`x = 10; x /= 5;`	`x = 10; x = x / 5;`

嘗試在控制臺中鍵入一些上述示例，以了解它們?nèi)绾喂ぷ鳌?/font>在每種情況下，在輸入第二行之前，看看是否可以猜出該值。

請注意，您可以非常高興地在每個表達(dá)式的右側(cè)使用其他變量，例如:

var x = 3; // x包含值3
var y = 4; // y包含值4
x * = y; x現(xiàn)在包含值12

注意:有很多其他賦值運算符可用，但這些是你現(xiàn)在應(yīng)該學(xué)習(xí)的基本知識。

主動學(xué)習(xí):調(diào)整畫布盒大小

在本練習(xí)中，我們將讓您填寫一些數(shù)字和運算符來操縱框的大小。該框使用稱為{{domxref("Canvas API"，""，""，"true")}}的瀏覽器API繪制。沒有必要擔(dān)心這是如何工作的 - 現(xiàn)在只專注于數(shù)學(xué)。(像素)的框的寬度和高度由變量定義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);

在上面的可編輯代碼框中，有兩行標(biāo)記清楚地注釋一個注釋，我們希望你更新，使框增長/收縮到一定的大小，在每種情況下使用某些運算符和/或值。我們希望您回答以下問題:

更改計算x的行，以使框仍為50像素寬，50使用數(shù)字43和7以及算術(shù)運算符計算。
更改計算y的線，使框為75px高，75使用數(shù)字25和3以及算術(shù)運算符計算。
更改計算x的行，使框?qū)挾葹?50px，使用兩個數(shù)字和余數(shù)(模)運算符計算250。
更改計算y的行，以使框高150像素，150使用三個數(shù)字以及減法和除法運算符計算。
更改計算x的行，使框?qū)挾葹?00px，并使用數(shù)字4和賦值運算符計算200。
更改計算y的行，以使框高度為200px，并使用數(shù)字50和3，乘法運算符和加法分配運算符計算200。

不要擔(dān)心，如果你完全混亂的代碼。您可以隨時按下重置按鈕，讓事情再次工作。在您正確回答了所有上述問題后，您可以隨意使用代碼，或者為您的朋友/同學(xué)設(shè)置一些挑戰(zhàn)。

比較運算符

有時我們想要運行true / false測試，然后根據(jù)測試的結(jié)果相應(yīng)地執(zhí)行 - 為此我們使用比較運算符。

操作員	名稱	目的	例
`===`	嚴(yán)格平等	測試左值和右值是否彼此相同	`5 === 2 + 4`
`!==`	嚴(yán)格不平等	測試左值和右值是否彼此不相同	`5 !== 2 + 3`
`<`	少于	測試左值是否小于右值。	`10 < 6`
`>`	比...更棒	測試左值是否大于右值。	`10 > 20`
<=	小于或等于	測試左值是否小于或等于右值。	`3 <= 2`
＆gt; =	大于或等于	測試左值是否大于或等于右值。	`5 >= 4`

注意:您可能會看到一些人在他們的代碼中使用==和!=在等號和不等號 - 這些是JavaScript中的有效運算符，但它們不同于===/ !==- 前者測試值是否相同，但數(shù)據(jù)類型可以不同，而后面的嚴(yán)格版本測試如果值和dataype是相同的。嚴(yán)格的版本往往導(dǎo)致更少的錯誤未被發(fā)現(xiàn)，因此我們建議您使用它們。

如果你嘗試在控制臺中輸入這些值，你會看到他們都返回true/ false值 - 我們在上一篇文章中提到的布爾值。這些是非常有用的，因為它們允許我們在我們的代碼中做出決策 - 這些都是每次我們想要做出某種選擇時使用，例如:

在按鈕上顯示正確的文本標(biāo)簽，具體取決于功能是打開還是關(guān)閉。
如果游戲結(jié)束則顯示消息，或者如果游戲已經(jīng)贏得則顯示勝利消息。
顯示正確的季節(jié)性問候，取決于什么節(jié)日的季節(jié)。
根據(jù)選擇的縮放級別縮放地圖。

我們將在未來的文章中討論如何編寫這樣的邏輯。現(xiàn)在，讓我們來看一個簡單的例子:

<！DOCTYPE html>
<html>
  <head>
    <meta charset ="utf-8">
    <title>第一個條件示例</ title>
  </ head>
  <body>
    <button>啟動機(jī)</ button>
    <p>機(jī)器已停止。</ 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 ='機(jī)器已經(jīng)開始！';
      } else {
        btn.textContent ='啟動機(jī)';
        txt.textContent ='機(jī)器停止。
      }}
    }}
  </ script>
</ html>

你可以看到在updateBtn()函數(shù)里面使用的相等運算符。在這種情況下，我們不會測試兩個數(shù)學(xué)表達(dá)式是否具有相同的值 - 我們正在測試一個按鈕的文本內(nèi)容是否包含某個字符串 - 但它在工作中仍然是相同的原則。如果按鈕當(dāng)前按下"啟動機(jī)器"，則我們將其標(biāo)簽更改為"停止機(jī)器"，并根據(jù)需要更新標(biāo)簽。如果按鈕當(dāng)前正在說"停止機(jī)器"，則我們再次交換顯示。

注意:這種在兩個狀態(tài)之間交換的控制通常被稱為切換。它在一個狀態(tài)和另一個狀態(tài)之間切換 - 點亮，熄滅等。

概要

在本文中，我們已經(jīng)涵蓋了您需要了解的關(guān)于JavaScript中的數(shù)字的基本信息，現(xiàn)在。你會看到數(shù)字一次又一次地使用，一直通過你的JavaScript學(xué)習(xí)，所以這是一個好主意，現(xiàn)在解決這個問題。如果你是那些不喜歡數(shù)學(xué)的人之一，你可以安慰這個事實，這一章很短。

在下一篇文章中，我們將探討文本，以及JavaScript如何讓我們操作它。

注意:如果你喜歡數(shù)學(xué)，想閱讀更多關(guān)于它如何在JavaScript中實現(xiàn)，你可以在MDN的主要JavaScript部分找到更多的細(xì)節(jié)。開始的好地方是我們的數(shù)字和日期，表達(dá)式和運算符的文章。

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

以上內(nèi)容是否對您有幫助：

← 如何存儲你需要的信息 — 變量

Handling text — strings in JavaScript →

寫筆記

我要補(bǔ)充