JavaScript+jQuery交互式Web前端开发（第2版）最新章节_黑马程序员著

1.4　变量

在程序中，变量可以作为存储数据的容器，用于保存临时数据，并在需要时可以设置、更新或读取变量中的内容。此外，变量还可以保存用户输入的数据或运算结果。本节将讲解变量的相关内容。

1.4.1　什么是变量

变量是指程序在内存中申请的一块用来存放数据的空间，用于存储程序运行过程中产生的临时数据。

变量由变量名和变量值组成，通过变量名可以访问变量值。假设把内存想象成一列火车，变量相当于火车的车厢，变量名相当于火车车厢的座位号，变量值相当于乘客。乘务员通过火车车厢的座位号就可以找到对应的乘客。例如，程序在内存中保存名为 seat01、seat02和seat03的3个变量，变量值分别为小明、小智和小华，如图1-15所示。

图1-15　3个变量

图1-15中，通过变量名seat01可以访问变量值“小明”，通过变量名seat02可以访问变量值“小智”，通过变量名seat03可以访问变量值“小华”。

1.4.2　变量的命名规则

在程序中，使用规范的变量名有助于代码阅读者更好地理解和阅读代码。在JavaScript中，变量的命名需要遵循相关规则，从而避免代码编写出错。

JavaScript中变量的命名规则如下。

●不能以数字开头，且不能包含+、-等运算符，如01user、02-user是非法的变量名。

●严格区分大小写，如apple和Apple是两个不相同的变量名。

●不能使用JavaScript中的关键字命名。关键字是指在JavaScript中被事先定义并赋予特殊含义的单词，如if、this就是JavaScript中的关键字。

为了提高代码的可读性，在对变量命名时应遵循以下建议。

●使用字母、下画线或美元符号（$）命名，如score、set_name、$a、user01。

●尽量做到“见其名知其义”，如age表示年龄、sex表示性别、num表示数字等。

●用下画线分隔多个单词，如 show_message；或采用驼峰命名法，变量的第1个单词首字母小写，后面的单词首字母大写，如leftHand、myFirstName等。

需要说明的是，只要程序不报错，其他字符（如中文字符）也能作为变量名使用，但是不推荐这种命名方式。

在实际开发中，我们在命名变量时不仅要遵循变量的命名规则，而且要注意变量的命名是否有意义、是否易于理解。同样，在现实生活中，我们也要遵守规则，例如交通规则、安全生产规则等，只有遵守规则，才能让社会更加和谐稳定。

多学一招：JavaScript中常见的关键字

在JavaScript 中，关键字分为保留关键字和未来保留关键字。保留关键字是指目前已经生效的关键字。常见的保留关键字如表1-4所示。

表1-4　常见的保留关键字

在表1-4中，每个关键字都有特殊的含义和作用。例如，var关键字用于声明变量、const关键字用于声明常量、while关键字用于实现语句的循环、typeof关键字用于检测数据类型等。

未来保留关键字是指ECMAScript 规范中预留的关键字，目前它们没有特殊的作用，但是在未来的某个时间可能会具有一定的作用。未来保留关键字如表1-5所示。

表1-5　未来保留关键字

在命名变量时，不建议使用表1-5中列举的未来保留关键字，以免未来它们转换为保留关键字时程序出错。

1.4.3　变量的声明与赋值

在程序中，经常需要使用变量来保存数据。例如，将两个数字相乘的结果保存到变量中，以便在后面的计算中使用。在使用变量时，需要先声明变量，类似于坐火车时需要先预订火车票。声明变量后，就可以为变量赋值，从而完成数据的存储。

JavaScript中变量的声明与赋值有两种方式：第1种方式是先声明变量后赋值；第2种方式是声明变量的同时赋值。下面分别讲解这两种方式。

1.先声明变量后赋值

JavaScript 中通常使用 var 关键字声明变量，声明变量后，变量值默认会被设定为undefined，表示未定义。如果需要使用变量保存具体的值就需要在声明变量后为其赋值。

先声明变量后赋值的示例代码如下。

1 // 声明变量
2 var username;               // 声明一个名称为username的变量
3 var age, sex, height;       // 同时声明3个变量
4 // 为变量赋值
5 username = ＇小智＇;           // 为变量赋值＇小智＇
6 age = 20;                   // 为变量赋值20
7 sex = ＇男＇;                 // 为变量赋值＇男＇
8 height = 180;               // 为变量赋值180

上述示例代码已经完成变量的声明和赋值，其中，’小智’和’男’属于字符串型数据，需要使用单引号标注。

当变量的值是数字型数据时，不需要将其写在单引号中，如果将数字型数据写到单引号中，则表示该数据为字符串型数据，而不是数字型数据。

如果想要查看变量的值，则可以使用console.log()语句将变量的值输出到控制台。例如，在上述代码的下方继续编写如下代码。

console.log（username）;      // 输出变量username的值
console.log（age）;           // 输出变量age的值
console.log（sex）;           // 输出变量sex的值
console.log（height）;        // 输出变量height的值

运行上述代码，输出结果如图1-16所示。

由图1-16可知，控制台显示了“小智”“20”“男”“180”，说明已经将变量的值输出到控制台。

小提示：ECMAScript 6.0新增了let关键字，用于声明变量，它的用法类似于var，但是let所声明的变量只在它所在的块级作用域内有效。

图1-16　输出结果

2.声明变量的同时赋值

在声明变量的同时为变量赋值，这个过程又称为定义变量或初始化变量，示例代码如下。

var username = ＇小智＇;            // 声明username变量并赋值为＇小智＇
var age = 20;                    // 声明age变量并赋值为20
var sex = ＇男＇;                  // 声明sex变量并赋值为＇男＇
var height = 180;                // 声明height变量并赋值为180

多学一招：使用变量的语法细节

在JavaScript中使用变量时，还有一些语法细节，具体介绍如下。

（1）更新变量的值

当声明一个变量并赋值后，如果重新为该变量赋值，则原来的值会被覆盖，示例代码如下。

var age = 20;

console.log（age）;

age = 22;

console.log（age）;

// 输出结果为：20

// 更新变量的值

// 输出结果为：22

（2）同时声明多个变量

在 var 关键字后面可以同时声明多个变量，多个变量名之间使用英文逗号隔开，示例代码如下。

// 同时声明多个变量，没有赋值
var username, password, phone;
// 同时声明多个变量，并赋值
var username = ＇小智＇, password = ＇123456＇, phone = ＇13012345678＇;

如果只声明变量没有赋值，则输出结果为undefined。如果不声明变量，直接输出变量的值，则程序会报错。

1.4.4　【案例】使用变量保存商品信息

使用变量可以保存各种各样的数据。下面将通过一个案例演示如何使用变量保存商品信息。其中，商品名称为衬衫，商品颜色为白色，商品价格为50，商品尺寸为均码，具体代码如例1-2所示。

例1-2 Example2.html

1 <!DOCTYPE html>
2 <html>
3 <head>
4   <meta charset=＂UTF-8＂>

5   <title>Document</title>
6 </head>
7 <body>
8   <script>
9     var goods = ＇衬衫＇;    // 商品名称
10    var color = ＇白色＇;    // 商品颜色
11    var price = 50;       // 商品价格
12    var size = ＇均码＇;     // 商品尺寸
13    console.log（goods）;    // 输出goods的值
14    console.log（color）;    // 输出color的值
15    console.log（price）;    // 输出price的值
16    console.log（size）;    // 输出size的值
17  </script>
18 </body>
19 </html>

例1-2中，第9～12行代码用于声明变量并赋值；第13～16行代码用于在控制台输出变量的值。

保存代码，在浏览器中进行测试，例1-2的运行结果如图1-17所示。

图1-17　例1-2的运行结果

由图1-17可知，控制台显示了“衬衫”“白色”“50”“均码”，说明通过变量成功保存了商品的信息。

1.4.5　【案例】使用变量保存用户输入的值

在1.3.3小节中讲解了使用prompt()语句可以在页面中弹出一个输入框，提示用户输入内容。当用户输入内容后，使用变量就可以保存用户输入的内容。

下面演示如何使用变量保存用户输入的值。声明一个email变量，当用户打开页面时提示用户输入邮箱，用户输入邮箱并单击“确定”按钮后，页面将显示用户的邮箱，具体代码如例1-3所示。

例1-3 Example3.html

1 <!DOCTYPE html>
2 <html>
3 <head>
4   <meta charset=＂UTF-8＂>
5   <title>Document</title>
6 </head>

7 <body>
8   <script>
9     var email = prompt（＇请输入您的邮箱：＇）;
10    alert（email）;
11  </script>
12 </body>
13 </html>

上述代码中，第9行的email变量用于保存用户在输入框中输入的值，第10行代码用于显示用户输入的值。

保存代码，在浏览器中进行测试，例1-3的运行结果如图1-18所示。

图1-18　例1-3的运行结果

在图1-18所示的页面中弹出的输入框中输入“123456@qq.com”并单击“确定”按钮后，页面的显示信息如图1-19所示。

图1-19　页面的显示信息

图1-19中，页面显示了“123456@qq.com”，说明变量成功保存了用户输入的值。

1.4.6　【案例】交换两个变量的值

学习JavaScript的变量后，下面通过一个案例来练习变量的使用。本案例将实现交换两个变量的值。

首先定义两个变量apple1和apple2，其中，变量apple1的值为红苹果，变量apple2的值为青苹果，然后定义第3个变量temp来保存临时数据，用于实现红苹果和青苹果的交换。

在实现红苹果和青苹果交换的过程中，我们可以想象成左手拿着红苹果（apple1），右手拿着青苹果（apple2），前面有一张桌子（temp）。为了将左手的红苹果和右手的青苹果交换，首先需要将左手的红苹果放到桌子上，然后将右手的青苹果给左手，最后右手从桌子上拿起红苹果，这样就完成了交换。

下面编写代码实现红苹果和青苹果的交换，具体代码如例1-4所示。

例1-4 Example4.html

1 <!DOCTYPE html>
2 <html>
3 <head>

4   <meta charset=＂UTF-8＂>
5   <title>Document</title>
6 </head>
7 <body>
8   <script>
9     var apple1 = ＇红苹果＇;
10    var apple2 = ＇青苹果＇;
11    var temp = apple1;
12    apple1 = apple2;
13    apple2 = temp;
14    console.log（apple1）;
15    console.log（apple2）;
16  </script>
17 </body>
18 </html>

例1-4中，第9行代码用于声明变量apple1并赋值为“红苹果”；第10行代码用于声明变量apple2并赋值为“青苹果”；第11～13行代码实现了apple1变量值和apple2变量值的交换，其中第11行代码用于声明temp变量，并赋值为变量apple1的值；第14～15行代码用于在控制台输出变量apple1和变量apple2交换后的值。

保存代码，在浏览器中进行测试，例1-4的运行结果如图1-20所示。

图1-20　例1-4的运行结果

由图1-20可知，控制台分别输出了“青苹果”“红苹果”，说明成功交换了两个变量的值。

1.4 变量

1.4.1 什么是变量

1.4.2 变量的命名规则

1.4.3 变量的声明与赋值