閱讀(1.7k) 書簽贊(0) 我要糾錯(cuò)

如何存儲(chǔ)你需要的信息 — 變量

2018-05-15 17:26 更新

預(yù)備知識(shí):	電腦基礎(chǔ)知識(shí)，了解基本的 HTML 和 CSS，了解JavaScript是什么。
目標(biāo):	熟悉JavaScript的變量使用

需要的工具

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

當(dāng)然，我們也提供了一個(gè)簡(jiǎn)單的JavaScript終端，嵌入在下文的頁(yè)面中，以便你更容易的輸入和測(cè)試這些代碼。

變量是什么?

一個(gè)變量，就是一個(gè)用于存放數(shù)值的容器。這個(gè)數(shù)值可能是一個(gè)用于累加計(jì)算的數(shù)字，或者是一個(gè)句子中的字符串。變量的獨(dú)特之處在于它存放的數(shù)值是可以改變的。讓我們看一個(gè)簡(jiǎn)單的例子:

<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!');
}

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

為了理解變量的作用，我們可以思考一下，如果不使用變量，我們實(shí)現(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 ...

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

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

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

聲明變量

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

var myName;
var myAge;

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

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中，所有代碼指令都會(huì)以分號(hào)結(jié)尾?(;) — 如果忘記加分號(hào)，你的單行代碼可能執(zhí)行正常，但是在多行代碼在一起的時(shí)候就可能出錯(cuò)。所以，最好是養(yǎng)成主動(dòng)以分號(hào)作為代碼結(jié)尾的習(xí)慣。

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

myName;
myAge;

以上這兩個(gè)變量并沒有數(shù)值，他們是空的容器。當(dāng)你使用他們時(shí)，你會(huì)得到一個(gè)undefined的值。如果他們并不存在的話，那你就會(huì)得到一個(gè)報(bào)錯(cuò)信息。不信的話，可以嘗試使用下面的變量，

scoobyDoo;

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

初始化變量

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

myName = 'Chris';
myAge = 37;

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

myName;
myAge;

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

var myName = 'Chris';

這可能是你大多數(shù)時(shí)候都會(huì)做的，因?yàn)樗仍趦蓚€(gè)單獨(dú)的行上執(zhí)行兩個(gè)動(dòng)作更快。

注意:如果您編寫了一個(gè)聲明和初始化變量的多行JavaScript程序，您可以在初始化之后實(shí)際聲明它，它仍然可以工作。這是因?yàn)樽兞柯暶魍ǔＴ趫?zhí)行其余代碼之前先完成。這稱為提升 - 請(qǐng)閱讀 var hoisting / a>有關(guān)主題的更多詳細(xì)信息。

更新變量

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

myName = 'Bob';
myAge = 40;

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

你可以調(diào)用一個(gè)變量幾乎任何你喜歡，但有限制。通常你應(yīng)該堅(jiān)持只使用拉丁字符(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">詞法語法 - 關(guān)鍵字。

好名稱示例:

age
myAge
init
initialColor
finalOutputValue
audio1
audio2

錯(cuò)誤名稱示例:

1
a
_12
myage
MYAGE
var
Document
skjfndskjfnbdskjfb
thisisareallylongstupidvariablenameman

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

變量類型

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

到目前為止，我們已經(jīng)看過前兩個(gè)，但還有其他。

數(shù)字

您可以在變量中存儲(chǔ)數(shù)字，例如30(也稱為整數(shù))或像2.456這樣的十進(jìn)制數(shù)字(也稱為浮點(diǎn)數(shù)或浮點(diǎn)數(shù))。對(duì)于不同的數(shù)字類型，JavaScript沒有不同的數(shù)據(jù)類型，例如一些編程語言。當(dāng)給一個(gè)變量一個(gè)數(shù)字值，你不包括引號(hào):

var myAge = 17;

字符串

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

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

布爾

布爾值是true / false值 - 它們可以有兩個(gè)值， true 或 false 。這些通常用于測(cè)試條件，之后適當(dāng)?shù)剡\(yùn)行代碼。例如，一個(gè)簡(jiǎn)單的情況是:

var iAmAlive = true;

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

var test = 6 < 3;

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

數(shù)組

數(shù)組是單個(gè)對(duì)象，包含用方括號(hào)括起來并用逗號(hào)分隔的多個(gè)值。嘗試在控制臺(tái)中輸入以下行:

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

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

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

這里的方括號(hào)包含一個(gè)索引值，用于指定要返回的值的位置。你可能已經(jīng)注意到，計(jì)算機(jī)從0計(jì)數(shù)，而不是像我們?nèi)祟愐粯印?/span>

在將來的文章中，您將學(xué)到更多關(guān)于數(shù)組的內(nèi)容。

對(duì)象

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

嘗試在您的控制臺(tái)輸入以下行:

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

要檢索存儲(chǔ)在對(duì)象中的信息，可以使用以下語法:

dog.name

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

松散鍵入

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

例如，如果你聲明一個(gè)變量并給它一個(gè)帶引號(hào)的值，那么瀏覽器就會(huì)知道它是一個(gè)字符串:

var myString = 'Hello';

它仍然是一個(gè)字符串，即使它包含數(shù)字，所以要小心:

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

嘗試輸入上面的四行到控制臺(tái)一個(gè)一個(gè)，看看什么結(jié)果(不要輸入評(píng)論)。你會(huì)注意到，我們使用一個(gè)特殊的函數(shù) typeof() - 這會(huì)返回你傳遞給它的變量的數(shù)據(jù)類型。第一次在上面的序列中調(diào)用它，它應(yīng)該返回 string ，因?yàn)樵谶@一點(diǎn) myNumber 變量包含一個(gè)字符串\'500\' >。看看，看看它返回的第二次你叫它。

概要

現(xiàn)在，您應(yīng)該知道有關(guān)JavaScript變量的合理金額以及如何創(chuàng)建它們。在下一篇文章中，我們將更詳細(xì)地討論數(shù)字，看看如何在JavaScript中做基本的數(shù)學(xué)。

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

← 什么地方出了錯(cuò)？

Basic math in JavaScript — numbers and operators →

寫筆記

我要補(bǔ)充