如何存储你需要的信息 — 变量

在本文章中

需要的工具
变量是什么?
声明变量
初始化变量
更新变量
1. 关于变量命名的规则
变量类型
松散类型
总结

在读完之前的一些文章之后，你现在应该大概知道了JavaScript是什么，你能用它干什么，它是怎么跟其他web技术（HTML，CSS）协同工作的，以及它有哪些主要特性。在本章节，我们将开始学习JavaScript的基础，了解如何使用 -- 变量。

预备知识:	电脑基础知识，了解基本的 HTML 和 CSS，了解JavaScript是什么。
目标:	熟悉JavaScript的变量使用

需要的工具

在本章中，你将要输入一些代码来测试你对相关内容的理解。如果你是用的桌面浏览器，输入这些代码最好的地方是浏览器的JavaScript终端，(参考什么是浏览器开发工具查看如何使用这些工具)。

当然，我们也提供了一个简单的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!');
}

在上面的例子中，点击按钮之后，第一行代码会在屏幕上弹出一个对话框，让你输入名字，然后存储输入的名字到一个变量。第二行代码将会显示包含你名字的欢迎信息，你的名字就是从之前的变量里面读取的。

为了理解变量的作用，我们可以思考一下，如果不使用变量，我们实现上述功能的代码将是这样的：

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

你可能暂时还没有完全理解这些代码和语法，但是你应该能够理解到 -- 如果我们没有变量，我们就不得不写大量的代码去枚举和检查输入的名字，然后去显示它们。这样做显然是低效率和不可行的 -- 你没有办法列举出所有可能的输入。

变量的另一个特性就是它们能够存储任何的东西 -- 不只是字符串和数字。变量可以存储更复杂的数据，甚至是函数。你将在后续的内容中体验到这些用法。

我们说，变量是用来存储数值的，那么有一个重要的概念需要区分。变量不是数值本身，它们仅仅是一个用于存储数值的容器。你可以把变量想象成一个个用来装东西的纸箱子。

声明变量

要想使用变量，你需要做的第一步就是创建它 -- 更准确的说，是声明一个变量。声明一个变量的语法是在var关键字之后加上这个变量的名字：

var myName;
var myAge;

在这里我们声明了两个变量 myName 和 myAge. 那么现在尝试输入这些代码到你的浏览器终端或者下面提供的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中，所有代码指令都会以分号结尾 (;) — 如果忘记加分号，你的单行代码可能执行正常，但是在多行代码在一起的时候就可能出错。所以，最好是养成主动以分号作为代码结尾的习惯。

你可以通过使用变量的方式来验证这个变量的数值是否在执行环境中已经存在。例如，

myName;
myAge;

以上这两个变量并没有数值，他们是空的容器。当你使用他们时，你会得到一个undefined的值。如果他们并不存在的话，那你就会得到一个报错信息。不信的话，可以尝试使用下面的变量，

scoobyDoo;

提示: 千万不要把两个概念弄混淆了，“一个变量存在，但是没有数值”和“一个变量并不存在” — 他们完全是两回事.

初始化变量

一旦你定义了一个变量，你就能够初始化它. 方法如下，在变量名之后跟上一个“=”，然后是数值:

myName = 'Chris';
myAge = 37;

现在回到控制台并且尝试输入这几行。每输入一条你都应该确认一下控制台输出的变量是不是你刚赋的值。同样，你可以通过在控制台中输入变量的名称来返回该变量的值 — 再次尝试下这些:

myName;
myAge;

你可以像这样在声明变量的时候给变量初始化:

var myName = 'Chris';

这可能是大多数时间你都会使用的方式，因为它要比在单独的两行上做两次操作要快。

Note: 如果你写一个声明和初始化变量的多行JavaScript代码的程序，你可以在初始化变量之后再实际声明它，并且它仍然可以工作。这是因为变量的声明通常在在其余的代码执行之前完成。这叫做顶置—阅读var hoisting来了解更多细节。

更新变量

一旦变量赋值，您可以通过简单地给它一个不同的值来更新它。试试在你的控制台中输入下面几行:

myName = 'Bob';
myAge = 40;

关于变量命名的规则

你可以给你的变量赋任何你喜欢的名字，但有一些限制。一般你应当坚持使用拉丁字符(0-9,a-z,A-Z)和下划线字符。

你不应当使用规则之外的其他字符，因为它们可能引发错误或者对国际用户来说难以理解。
变量名不要以下划线开头—— 以下划线开头的被某些JavaScript设计为特殊的含义，因此可能让人迷惑。
变量名不要以数字开头。这种行为是不被允许的，并且将引发一个错误。
一个可靠的命名约定叫做 "小写驼峰命名法"，用来将多个单词组在一起，小写整个命名的第一个字母然后大写剩下单词的首字符。我们已经在文章中使用了这种命名方法。
让变量名直观，它们描述了所包含的数据。不要只使用单一的字母/数字，或者长句。
变量名大小写敏感——因此myage与myAge是2个不同的变量。
最后也是最重要的一点—— 你应当避免使用JavaScript的保留字给变量命名。保留字，即是组成JavaScript的实际语法的单词！因此诸如 var, function, let和 for等，都不能被作为变量名使用。浏览器将把它们识别为不同的代码项，因此你将得到错误。

Note: 你能从词汇语法—关键字找到一个相当完整的保留关键字列表来避免使用关键字当作变量。

好的命名示例:

age
myAge
init
initialColor
finalOutputValue
audio1
audio2

差的命名示例:

1
a
_12
myage
MYAGE
var
Document
skjfndskjfnbdskjfb
thisisareallylongstupidvariablenameman

现在尝试创建更多的变量，请将上面的指导泯记于心。

变量类型

可以为变量设置不同的数据类型。本节我们将对其进行简短的介绍，在以后的文章中，你会更详细地了解它们。

到目前为止我们已经认识了前2个，但是还有其他的。

Number

你可以在变量中存储数字，不论这些数字是像30（也叫整数）这样，或者像2.456这样的小数（也叫做浮点数）。与其他编程语言不同，在JavaScriptYou中你不需要声明一个变量的类型。当你给一个变量数字赋值时，不需要用引号括起来。

var myAge = 17;

String

字符串是文本的一部分。当你给一个变量赋值为字符串时，你需要用单引号或者双引号把值给包起来，否则JavaScript将会把这个字符串值理解成别的变量名。

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

Boolean

Boolean 的值有2种：true或false。它们通常被用于在适当的代码之后，测试条件是否成立。举个例子，一个简单的示例如下：

var iAmAlive = true;

然而实际上通常是以下用法：

var test = 6 < 3;

这是使用“小于”操作符（<）来测试6小于3。正如你所料的，将会返回false，因为6并不小于3！在这个课程中，以后你将会学到许多有关操作符的知识。

Array

数组是一个单个对象，其中包含很多值，方括号括起来，并用逗号分隔。尝试在您的控制台输入以下行:

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

当数组被定义后，您可以使用如下所示的语法来访问各自的值，例如下行:

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

此处的方括号包含一个索引值，该值指定要返回的值的位置。您可能已经注意到，计算机从0开始计数，而不是像我们人类那样的1。

在以后的文章，你将更多地了解数组。

Object

在编程中，对象是现实生活中的模型的一种代码结构。您可以有一个简单的对象，代表一个停车场，并包含有关其宽度和长度的信息，或者您可以有一个代表一个人的对象，并包含有关他们的名字，身高，体重，他们说什么语言，如何说你好，他们，等等。

尝试在您的控制台输入以下行:

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

要检索存储在对象中的信息，可以使用以下语法:

dog.name

我们现在不会看对象了 - 您可以在将来的模块中了解更多关于这些对象的信息.

松散类型

JavaScript是一种“松散类型语言”，这意味着不同于其他一些语言(译者注：如C、JAVA)，您不需要指定变量将包含什么数据类型（例如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'。看看它第二次将返回什么。

总结

到目前为止，您应该了解了适量的JavaScript以及如何创建它们。在下一篇文章中，我们将更详细地关注Math，了解如何在JavaScript中使用基本Math。

上一页 Overview: First steps 下一页

文档标签和贡献者

另见