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

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

2018-05-15 17:26 更新

預備知識:	電腦基礎知識，了解基本的 HTML 和 CSS，了解JavaScript是什么。
目標:	熟悉JavaScript的變量使用

需要的工具

在本章中，你將要輸入一些代碼來測試你對相關內容的理解。如果你是用的桌面瀏覽器，輸入這些代碼最好的地方是瀏覽器的JavaScript終端，(參考 What are browser developer tools?查看如何使用這些工具)。

當然，我們也提供了一個簡單的JavaScript終端，嵌入在下文的頁面中，以便你更容易的輸入和測試這些代碼。

變量是什么?

一個變量，就是一個用于存放數值的容器。這個數值可能是一個用于累加計算的數字，或者是一個句子中的字符串。變量的獨特之處在于它存放的數值是可以改變的。讓我們看一個簡單的例子:

<button>Press me</button>

var button = document.querySelector('button');

button.onclick = function() {
  var name = prompt('What is your name?');
  alert('Hello ' + name + ', nice to see you!');
}

在上面的例子中，點擊按鈕之后，第一行代碼會在屏幕上彈出一個對話框，讓你輸入名字，然后存儲輸入的名字到一個變量。第二行代碼將會顯示包含你名字的歡迎信息，你的名字就是從之前的變量里面讀取的。

為了理解變量的作用，我們可以思考一下，如果不使用變量，我們實現(xiàn)上述功能的代碼將是這樣的:

var name = prompt('What is your name?');

if (name === 'Adam') {
  alert('Hello Adam, nice to see you!');
} else if (name === 'Alan') {
  alert('Hello Alan, nice to see you!');
} else if (name === 'Bella') {
  alert('Hello Bella, nice to see you!');
} else if (name === 'Bianca') {
  alert('Hello Bianca, nice to see you!');
} else if (name === 'Chris') {
  alert('Hello Chris, nice to see you!');
}

// ... and so on ...

你可能暫時還沒有完全理解這些代碼和語法，但是你應該能夠理解到 -- 如果我們沒有變量，我們就不得不寫大量的代碼去枚舉和檢查輸入的名字，然后去顯示它們。這樣做顯然是低效率和不可行的 -- 你沒有辦法列舉出所有可能的輸入。

變量的另一個特性就是它們能夠存儲任何的東西 -- 不只是字符串和數字。變量可以存儲更復雜的數據，甚至是函數。你將在后續(xù)的內容中體驗到這些用法。

我們說，變量是用來存儲數值的，那么有一個重要的概念需要區(qū)分。變量不是數值本身，它們僅僅是一個用于存儲數值的容器。你可以把變量想象成一個個用來裝東西的紙箱子。

聲明變量

要想使用變量，你需要做的第一步就是創(chuàng)建它 -- 更準確的說，是聲明一個變量。聲明一個變量的語法是在var關鍵字之后加上這個變量的名字:

var myName;
var myAge;

在這里我們聲明了兩個變量?myName 和 myAge. 那么現(xiàn)在嘗試輸入這些代碼到你的瀏覽器終端或者下面提供的JavaScript終端?(你也可以在另一個獨立的標簽頁或窗口 open this consol ). 此外，你也可以多聲明幾個變量.

Hidden code

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

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

      body {
        max-width: 700px;
      }

      p {
        margin: 0;
        width: 1%;
        padding: 0 1%;
        font-size: 16px;
        line-height: 1.5;
        float: left;
      }

      .input p {
        margin-right: 1%;
      }

      .output p {
        width: 100%;
      }

      .input input {
        width: 96%;
        float: left;
        border: none;
        font-size: 16px;
        line-height: 1.5;
        font-family: monospace;
        padding: 0;
        background: #0C323D;
        color: #809089;
      }

      div {
        clear: both;
      }

    </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) {
      try {
        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>

提示: 在JavaScript中，所有代碼指令都會以分號結尾?(;) — 如果忘記加分號，你的單行代碼可能執(zhí)行正常，但是在多行代碼在一起的時候就可能出錯。所以，最好是養(yǎng)成主動以分號作為代碼結尾的習慣。

你可以通過使用變量的方式來驗證這個變量的數值是否在執(zhí)行環(huán)境中已經存在。例如，

myName;
myAge;

以上這兩個變量并沒有數值，他們是空的容器。當你使用他們時，你會得到一個undefined的值。如果他們并不存在的話，那你就會得到一個報錯信息。不信的話，可以嘗試使用下面的變量，

scoobyDoo;

提示: 千萬不要把兩個概念弄混淆了，"一個變量存在，但是沒有數值"和"一個變量并不存在"?— 他們完全是兩回事.

初始化變量

一旦你定義了一個變量，你就能夠初始化它. 方法如下，在變量名之后跟上一個"="，然后是數值:

myName = 'Chris';
myAge = 37;

嘗試回到控制臺現(xiàn)在，輸入這些行。在每種情況下，您都應該看到您分配給控制臺中返回的變量的值以進行確認。同樣，您可以通過在控制臺中簡單輸入變量值來返回變量值 - 再次嘗試:

myName;
myAge;

您可以同時聲明和初始化變量，如下所示:

var myName = 'Chris';

這可能是你大多數時候都會做的，因為它比在兩個單獨的行上執(zhí)行兩個動作更快。

注意:如果您編寫了一個聲明和初始化變量的多行JavaScript程序，您可以在初始化之后實際聲明它，它仍然可以工作。這是因為變量聲明通常在執(zhí)行其余代碼之前先完成。這稱為提升 - 請閱讀 var hoisting / a>有關主題的更多詳細信息。

更新變量

一旦變量具有分配的值，您可以通過簡單地給它一個不同的值來更新該值。嘗試在控制臺中輸入以下行:

myName = 'Bob';
myAge = 40;

除了可變命名規(guī)則

你可以調用一個變量幾乎任何你喜歡，但有限制。通常你應該堅持只使用拉丁字符(0-9，a-z，A-Z)和下劃線字符。

You shouldn't use other characters because they may cause errors or be hard to understand by an international audience.
Don't use underscores at the start of variable names — this is used in certain JavaScript constructs to mean specific things, so may get confusing.
Don't use numbers at the start of variables. This isn't allowed and will cause an error.
A safe convention to stick to is so-called "lower camel case", where you stick together multiple words, using lower case for the whole first word and then capitalize subsequent words. We've been using this for our variable names in the article so far.
Make variable names intuitive, so they describe the data they contain. Don't just use single letters/numbers, or big long phrases.
Variables are case sensitive — so myage is a different variable to myAge.
One last point — you also need to avoid using JavaScript reserved words as your variable names — by this, we mean the words that make up the actual syntax of JavaScript! So you can't use words like var, function, let, and for as variable names. Browsers will recognize them as different code items, and so you'll get errors.

注意:您可以在 #Keywords">詞法語法 - 關鍵字。

好名稱示例:

age
myAge
init
initialColor
finalOutputValue
audio1
audio2

錯誤名稱示例:

1
a
_12
myage
MYAGE
var
Document
skjfndskjfnbdskjfb
thisisareallylongstupidvariablenameman

現(xiàn)在嘗試創(chuàng)建一些更多的變量，上面的指導。

變量類型

有幾種不同類型的數據可以存儲在變量(數據類型)中。在本節(jié)中，我們將簡要介紹這些，然后在以后的文章中，您將更詳細地了解它們。

到目前為止，我們已經看過前兩個，但還有其他。

數字

您可以在變量中存儲數字，例如30(也稱為整數)或像2.456這樣的十進制數字(也稱為浮點數或浮點數)。對于不同的數字類型，JavaScript沒有不同的數據類型，例如一些編程語言。當給一個變量一個數字值，你不包括引號:

var myAge = 17;

字符串

字符串是文本片段。當你給一個變量一個字符串值，你需要將它包裝在單引號或雙引號中，否則JavaScript將嘗試將它作為另一個變量名。

var dolphinGoodbye = 'So long and thanks for all the fish';

布爾

布爾值是true / false值 - 它們可以有兩個值， true 或 false 。這些通常用于測試條件，之后適當地運行代碼。例如，一個簡單的情況是:

var iAmAlive = true;

而在現(xiàn)實中，它將被更多地使用:

var test = 6 < 3;

這是使用"小于"運算符(< )來測試6是否小于3.如你所料，它將返回 false ，因為6不是小于3！你將在課程中學到更多關于這樣的操作員。

數組

數組是單個對象，包含用方括號括起來并用逗號分隔的多個值。嘗試在控制臺中輸入以下行:

var myNameArray = ['Chris', 'Bob', 'Jim'];
var myNumberArray = [10,15,40];

定義這些數組后，您可以使用如下所示的語法訪問它們各自的值。嘗試這些行:

myNameArray[0]; // should return 'Chris'
myNumberArray[2]; // should return 40

這里的方括號包含一個索引值，用于指定要返回的值的位置。你可能已經注意到，計算機從0計數，而不是像我們人類一樣。

在將來的文章中，您將學到更多關于數組的內容。

對象

在編程中，對象是對現(xiàn)實生活對象進行建模的代碼結構。你可以有一個簡單的對象代表一個停車場，并包含關于它的寬度和長度的信息，或者你可以有一個對象代表一個人，并包含關于他們的名字，身高，體重，他們說什么語言，如何說你好，他們，等等。

嘗試在您的控制臺輸入以下行:

var dog = { name : 'Spot', breed : 'Dalmatian' };

要檢索存儲在對象中的信息，可以使用以下語法:

dog.name

我們現(xiàn)在不會再查看對象了 - 您可以在未來的模塊中了解更多信息。

松散鍵入

JavaScript是一種"寬松類型語言"，這意味著，與其他一些語言不同，您不需要指定變量將包含什么數據類型(例如number？string？)。

例如，如果你聲明一個變量并給它一個帶引號的值，那么瀏覽器就會知道它是一個字符串:

var myString = 'Hello';

它仍然是一個字符串，即使它包含數字，所以要小心:

var myNumber = '500'; // oops, this is still a string
typeof(myNumber);
myNumber = 500; // much better — now this is a number
typeof(myNumber)

嘗試輸入上面的四行到控制臺一個一個，看看什么結果(不要輸入評論)。你會注意到，我們使用一個特殊的函數 typeof() - 這會返回你傳遞給它的變量的數據類型。第一次在上面的序列中調用它，它應該返回 string ，因為在這一點 myNumber 變量包含一個字符串\'500\' >。看看，看看它返回的第二次你叫它。