存储您需要的信息 - 变量

在本文中，您将被要求输入代码行来测试您对内容的理解。如果您使用的是桌面浏览器，最佳的输入示例代码的地方是浏览器的 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 myName;
var myAge;

在 JavaScript 首次创建时，这是声明变量的唯一方法。var 的设计令人困惑且容易出错。因此，在现代版本的 JavaScript 中创建了 let，这是一种用于创建变量的新关键字，其工作方式与 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 对象 模块。

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'。看看第二次调用它时返回了什么。

除了变量之外，您还可以声明常量。它们类似于变量，只是

• 您必须在声明时初始化它们
• 您不能在初始化后为它们分配新值。

例如，使用 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"

如果您不能像使用 let 那样使用 const，为什么要使用它而不是 let 呢？事实上 const 非常有用。如果您使用 const 来命名一个值，它会告诉任何查看您代码的人，这个名称永远不会被分配给不同的值。他们每次看到这个名称，就会知道它指的是什么。

在本课程中，我们采用以下关于何时使用 let 和何时使用 const 的原则

尽可能使用 const，在必须时使用 let。

这意味着，如果您可以在声明时初始化一个变量，并且以后不需要重新分配它，那么将其设为常量。

您已经到达本文的结尾，但您还记得最重要的信息吗？您可以在继续之前找到一些进一步的测试来验证您是否保留了这些信息——请参阅 测试您的技能：变量。

现在您应该对 JavaScript 变量以及如何创建它们有所了解。在下一篇文章中，我们将更详细地关注数字，探讨如何在 JavaScript 中进行基本数学运算。

• 上一步
• 概述：JavaScript 入门
• 下一步