儲存所需資訊 — 變數

所需工具

在本文中，您將被要求輸入程式碼行以測試您對內容的理解。如果您使用的是桌面瀏覽器，輸入示例程式碼的最佳位置是瀏覽器的 JavaScript 控制檯（有關如何訪問此工具的更多資訊，請參閱什麼是瀏覽器開發工具）。

什麼是變數？

變數是值的容器，例如我們可能在求和中使用的數字，或者我們可能用作句子一部分的字串。

變數示例

我們來看一個例子

<button id="button_A">Press me</button>
<h3 id="heading_A"></h3>

const buttonA = document.querySelector("#button_A");
const headingA = document.querySelector("#heading_A");

let count = 1;

buttonA.onclick = () => {
  buttonA.textContent = "Try again!";
  headingA.textContent = `${count} clicks so far`;
  count += 1;
};

在此示例中，按下按鈕會執行一些程式碼。首先，它會更改按鈕本身的文字。其次，它會顯示按鈕被按下次數的訊息。該數字儲存在一個變數中。每次使用者按下按鈕時，變數中的數字將遞增一。

沒有變數

為了理解為什麼這如此有用，讓我們思考一下如何在不使用變數儲存計數的情況下編寫此示例。它最終會是這樣的

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

const buttonB = document.querySelector("#button_B");
const headingB = document.querySelector("#heading_B");

buttonB.onclick = () => {
  buttonB.textContent = "Try again!";
  headingB.textContent = "1 click so far";
};

您可能尚未完全理解我們正在使用的語法（！）但是您應該能夠理解。沒有變數，我們就無法知道按鈕被點選了多少次。當無法記住任何資訊時，給使用者的訊息將很快變得無關緊要。

變數很有意義，隨著您對 JavaScript 的瞭解越來越多，它們將開始變得駕輕就熟。

變數的一個特殊之處在於它們幾乎可以包含任何東西——不僅僅是字串和數字。變數還可以包含複雜資料甚至整個函式來完成驚人的事情。您會隨著學習的深入瞭解更多資訊。

宣告變數

要使用變數，您首先必須建立它——更準確地說，我們稱之為宣告變數。為此，我們輸入關鍵字 let，後跟您想要給變數命名的名稱

let myName;
let myAge;

這裡我們建立了兩個變數，名為 myName 和 myAge。嘗試將這些行輸入到您的 Web 瀏覽器控制檯中。之後，嘗試使用您自己的名稱選擇建立一個或兩個變數。

您可以透過僅輸入變數名稱來測試這些值現在是否存在於執行環境中，例如

myName;
myAge;

它們目前沒有值；它們是空容器。當您輸入變數名時，您應該會得到一個返回值為 undefined。如果它們不存在，您將收到錯誤訊息——嘗試輸入

scoobyDoo;

初始化變數

宣告變數後，您可以使用值對其進行初始化。您可以透過輸入變數名稱，後跟等號 (=)，再後跟您想要賦予它的值來完成此操作。例如

myName = "Chris";
myAge = 37;

現在嘗試回到控制檯並輸入這些行。在每種情況下，您都應該在控制檯中看到您分配給變數的值，以確認它。同樣，您可以透過在控制檯中輸入變數名稱來返回變數值——再次嘗試這些操作

myName;
myAge;

您可以同時宣告和初始化變數，如下所示

let myDog = "Rover";

這可能是您大部分時間都會做的事情，因為它比在兩個單獨的行上執行兩個操作更快。

關於 var 的說明

您可能還會看到另一種宣告變數的方式，使用 var 關鍵字

var myName;
var myAge;

早在 JavaScript 最初建立時，這是宣告變數的唯一方法。var 的設計令人困惑且容易出錯。因此，在現代 JavaScript 版本中建立了 let，這是一個用於建立變數的新關鍵字，其工作方式與 var 有些不同，從而在此過程中解決了 var 的問題。

下面解釋了一些簡單的區別。我們現在不會深入探討所有區別，但隨著您對 JavaScript 的瞭解越來越多，您將開始發現它們（如果您現在真的想閱讀它們，請隨時檢視我們的let 參考頁面）。

首先，如果您編寫一個宣告和初始化變數的多行 JavaScript 程式，您實際上可以在初始化變數後使用 var 宣告變數，並且它仍然可以工作。例如

myName = "Chris";

function logName() {
  console.log(myName);
}

logName();

var myName;

這之所以有效，是因為變數提升——請閱讀var 變數提升以獲取更多詳細資訊。

變數提升不再適用於 let。如果我們在上面的示例中將 var 更改為 let，它將因錯誤而失敗。這是一件好事——在初始化變數後宣告變數會導致程式碼混亂，難以理解。

其次，當您使用 var 時，您可以根據需要多次宣告同一個變數，但使用 let 則不能。以下程式碼可以工作

var myName = "Chris";
var myName = "Bob";

但以下程式碼將在第二行丟擲錯誤

let myName = "Chris";
let myName = "Bob";

您必須這樣做

let myName = "Chris";
myName = "Bob";

同樣，這是一個明智的語言決定。沒有理由重新宣告變數——這隻會讓事情變得更加混亂。

由於這些原因以及更多原因，我們建議您在程式碼中使用 let，而不是 var。除非您明確為舊版瀏覽器提供支援，否則不再有理由使用 var，因為所有現代瀏覽器自 2015 年以來都支援 let。

> let myName = "Chris";
  let myName = "Bob";
// As one input: SyntaxError: Identifier 'myName' has already been declared

> let myName = "Chris";
> let myName = "Bob";
// As two inputs: both succeed

更新變數

一旦變數用值初始化，您就可以透過賦予它不同的值來更改（或更新）該值。嘗試在控制檯中輸入以下行

myName = "Bob";
myAge = 40;

關於變數命名規則的題外話

您可以隨意命名變數，但也有一些限制。通常，您應該只使用拉丁字元（0-9、a-z、A-Z）和下劃線字元。

• 您不應該使用其他字元，因為它們可能會導致錯誤或難以被國際受眾理解。
• 不要在變數名開頭使用下劃線——這在某些 JavaScript 結構中用於表示特定含義，因此可能會令人困惑。
• 不要在變數開頭使用數字。這是不允許的，會導致錯誤。
• 一個安全的約定是堅持使用小駝峰命名法，即您將多個單詞連在一起，第一個單詞全部小寫，然後後續單詞首字母大寫。到目前為止，我們一直在文章中使用這種命名法來命名變數。
• 使變數名直觀，以便它們描述所包含的資料。不要只使用單個字母/數字或冗長的短語。
• 變數區分大小寫——因此 myage 與 myAge 是不同的變數。
• 最後一點：您還需要避免使用 JavaScript 保留字作為變數名——我們的意思是構成 JavaScript 實際語法的詞！因此，您不能使用像 var、function、let 和 for 這樣的詞作為變數名。瀏覽器會將它們識別為不同的程式碼項，因此您將收到錯誤。

好的命名示例

age
myAge
init
initialColor
finalOutputValue
audio1
audio2

不好的命名示例

1
a
_12
myage
MYAGE
var
Document
skjfndskjfnbdskjfb
thisisareallylongvariablenameman

現在，請牢記以上指導，嘗試建立更多變數。

變數型別

我們可以將幾種不同型別的資料儲存在變數中。在本節中，我們將簡要描述這些型別，然後在未來的文章中，您將更詳細地瞭解它們。

數字

您可以在變數中儲存數字，可以是像 30 這樣的整數（也稱為整型），也可以是像 2.456 這樣的小數（也稱為浮點數）。與某些其他程式語言不同，您不需要在 JavaScript 中宣告變數型別。當您為變數賦予數字值時，您不需要包含引號

let myAge = 17;

字串

字串是文字片段。當您給變數一個字串值時，您需要將其用單引號或雙引號括起來；否則，JavaScript 會嘗試將其解釋為另一個變數名。

let dolphinGoodbye = "So long and thanks for all the fish";

布林值

布林值是真/假值——它們可以有兩個值，true 或 false。它們通常用於測試條件，之後根據情況執行程式碼。例如，一個簡單的用例是

let iAmAlive = true;

而實際上它會更像這樣使用

let test = 6 < 3;

這使用了“小於”運算子（<）來測試 6 是否小於 3。正如您可能預期的那樣，它返回 false，因為 6 不小於 3！您將在本課程的稍後部分學習更多關於此類運算子的知識。

陣列

陣列是一個單一物件，包含多個用方括號括起來並用逗號分隔的值。嘗試在控制檯中輸入以下行

let myNameArray = ["Chris", "Bob", "Jim"];
let myNumberArray = [10, 15, 40];

一旦定義了這些陣列，您就可以透過它們在陣列中的位置訪問每個值。嘗試以下行

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

方括號指定一個索引值，該值對應於您想要返回的值的位置。您可能已經注意到 JavaScript 中的陣列是零索引的：第一個元素位於索引 0。

物件

在程式設計中，物件是一種模擬現實世界物件的程式碼結構。您可以有一個表示盒子幷包含其寬度、長度和高度資訊的物件，或者您可以有一個表示人幷包含其姓名、身高、體重、所說語言、問候方式等資料的物件。

嘗試在控制檯中輸入以下行

let dog = { name: "Spot", breed: "Dalmatian" };

要檢索儲存在物件中的資訊，您可以使用以下語法

dog.name;

動態型別

JavaScript 是一種“動態型別語言”，這意味著，與某些其他語言不同，您無需指定變數將包含什麼資料型別（數字、字串、陣列等）。

例如，如果您宣告一個變數併為其賦予一個用引號括起來的值，瀏覽器會將該變數視為字串

let myString = "Hello";

即使引號中的值只是數字，它仍然是字串——而不是數字——所以要小心

let 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'。看看您第二次呼叫它時它返回什麼。

JavaScript 中的常量

除了變數，您還可以宣告常量。它們類似於變數，只是

• 您必須在宣告它們時初始化它們。
• 初始化後，您不能為它們分配新值。

例如，使用 let，您可以宣告一個變數而不對其進行初始化

let count;

如果您嘗試使用 const 執行此操作，您將看到錯誤

const count;

同樣，使用 let，您可以初始化一個變數，然後為其分配一個新值（這也稱為重新賦值變數）

let count = 1;
count = 2;

如果您嘗試使用 const 執行此操作，您將看到錯誤

const count = 1;
count = 2;

請注意，儘管 JavaScript 中的常量必須始終命名相同的值，但您可以更改它所命名值的內容。這對於數字或布林值等簡單型別來說不是一個有用的區別，但考慮一個物件

const bird = { species: "Kestrel" };
console.log(bird.species); // "Kestrel"

您可以更新、新增或刪除使用 const 宣告的物件的屬性，因為即使物件的內容已更改，常量仍然指向同一個物件

bird.species = "Striated Caracara";
console.log(bird.species); // "Striated Caracara"

何時使用 const，何時使用 let

如果使用 const 能做的事情不如 let 多，為什麼還要優先使用它而不是 let 呢？實際上 const 非常有用。如果您使用 const 來命名一個值，它會告訴任何檢視您程式碼的人，這個名稱永遠不會被賦給不同的值。無論何時他們看到這個名稱，他們都會知道它指的是什麼。

在本課程中，我們遵循以下關於何時使用 let 和何時使用 const 的原則

能用 const 就用 const，需要時才用 let。

這意味著，如果您可以在宣告變數時初始化它，並且以後不需要重新賦值，那麼就將其設為常量。

總結

到目前為止，您應該對 JavaScript 變數以及如何建立它們有了相當多的瞭解。在下一篇文章中，我們將為您提供一些測試，您可以用來檢查您對這些資訊的理解和掌握程度。

• 上一頁
• 概述：使用 JavaScript 進行動態指令碼編寫
• 下一頁