05.JavaScript变量——let、var、变量创建、命名、常量、命名规范

JavaScript变量

---

章节目录
上一篇：《严格模式》
下一篇：《数据类型》

---

变量是数据的“容器”，为了计算方便，我们在编程过程中通常会将数据、信息存放在一个具有特定意义名称的容器中。

我认为一个更加容易理解的概念就是“代数”，就像我们在初高中经常使用的x、y、z、a、b、c，以及一些奇怪的希腊字符。

变量创建

在严格模式（"use strict"）下，使用变量之前，需要先创建变量，这里就涉及到了一个新的关键字：let。

下面的语句就定义、声明、创建了一个名为"perimeter"的变量：

let perimeter;

创建变量后，可以使用赋值运算符=为变量赋值：

let perimeter;
perimeter = 500;

以上代码就成功的将数据500赋值给了变量perimeter，如果我们需要访问这个数据，直接访问这个变量即可。

例如，我们让浏览器弹窗显示这个值：

let perimeter;
perimeter = 500;

alert(perimeter);

更简洁的写法是将变量的创建和赋值写在同一行：

let perimeter = 500;
alert(perimeter);

之所以在前文中将变量比作“代数”
是因为变量的定义和赋值过程像极了求解代数题中的语句：
令 perimeter 为圆的周长，由题意可知perimeter = 500；

也可以在一行中定义多个变量：

let length = 10, width = 20, height = 30;
alert(length*width*height);

虽然这样可以降低代码的行数，但同时也会降低代码的可读性，为了可读起见，一定要一行声明一个变量：

let length = 10;
let width = 20;
let height = 30;
alert(length*width*height);

虽然推荐一行只声明一个变量，但是对于有大量变量的情况，而且这些变量有相似的意义，可以使用一行声明多个变量的方式。总而言之，我们所选则的规则都是以正确执行代码为前提，以高可阅读性为依据。

变量和值之间的关系并非从一而终的，我们可以在使用过程中随时为变量设置新值：

let perimeter =500;
alert(perimeter);
perimeter =  512;
alert(perimeter);

虽然变量可以重复使用，但是不可以重复声明（代数中这样做也是错的）：

let perimeter = 500;
let perimeter = 512;

执行以上代码会得到以下错误：

Uncaught SyntaxError: Identifier 'perimeter' has already been declared

清奇的脑回路

总有一部分思维奇异的勇士，会有特别的想法，如下：

let length = 10, 
    width = 20, 
    height = 30;

甚至是：

let length = 10
    , width = 20
    , height = 30;

亦或是：

let 
length = 10, 
width = 20, 
height = 30;

从正确性上来说，没有任何问题，每个人都可以有自己的编码风格。

这里的脑回路清奇并非贬义，实际上在国外的开源代码中，很常见这些写法，而且编写这些代码的人通常具备高超的技术。

过时的var

在旧版本的JavaScript中，使用关键字var声明变量，而不是let:

var perimeter = 500;

二者实际上没有太大的区别，此处还是推荐使用新的let关键字，在编码中时刻紧追技术变化总是可敬的！

变量命名

JavaScript变量的命名和其他语言稍有不同：

1. 变量名称仅包含字母、数字、符号$、和_。
2. 首字符不能是数字。

以下命名都是有效的：

let merlinsBeard = 999;
let year2022 = 2022;
let _girl;
let $ = 1;
let _;

以下命名都是错误的：

let 2x; // 首字符不能是数字
let your#name; //不允许的特殊符号

命名时区分大小写，例如：Girl和girl是两个不同的变量。

可以使用中文字符，甚至是其他语言的字符，但是强烈不推荐。
这样不仅显得不专业，同时影响编码速度和可读性。
如下：

let 小明 = 'xiaoming';

不能使用关键字命名

例如定义变量的关键字let，定义类的关键字class，亦或者定义函数的关键字function等，都不可以作为变量名称：

let function = 1; //错误
let class = 2;    //错误

不能在未定义变量的情况下使用变量

在旧版本的JavaScript中，变量可以随用随写，不需要提前定义：

//普通模式下，这样写完全没有问题
width = 1;
height = 2;
length = 3;

但是以上代码在严格模式下会出错：

"use strict";
width = 1; //变量未定义错误
height = 2;//变量未定义错误
length = 3;//变量未定义错误

以上错误在上节《严格模式"use strict"》中已经说明。

常量

使用let定义的变量，可以随时更改其值以满足计算的需要，而在实际生活中有许多常量，比如圆周率Π。

当我们定义了存储圆周率的变量后，通常情况下是不希望其他人有意、无意的更改这个值的，这个时候就需要使用常量。

常量的值一经定义赋值，就不可以再次修改，强行修改会发生错误。

定义常量使用关键字const：

const PI = 3.14;

常量不可以二次赋值，以下代码会发生错误：

const PI = 3.14;
PI = 996;

报错内容如下：

Uncaught TypeError: Assignment to constant variable.
    at <anonymous>:3:4

常量遵循的规则

我们使用常量通常是为了方便代码的编写，例如我们不能每次使用圆周率的时候都要敲一遍3.1415926，方便的做法就是使用常量存储类似的值。

此外，常量的命名通常使用大写字母和_下划线组成：

const PI = 3.1415926;
const COLOR_RED = "#F00";
const COLOR_BLUE = "#00F";
const NUM_OF_SUN = 1;

这么做的好处是显而易见的：

1. 统一值的精度
2. 简单易记
3. 容易阅读

推荐的命名规范

1. 一个变量、常量的名称通常要具备清晰、明了的含义；
2. 多个单词变量采用驼峰式命名法（camelCase），例如：carColor、myAge；
3. 和团队风格保持一致，遵循团队共同的规范；
4. 不使用简单的诸如a、b、c之类的没有明确含义的名字。

以上规则看起来简单，但是执行起来往往需要考虑那么一会才能得到你想要的合适的名称。

课后作业

1. 定义两个变量：length和width;
2. 将20和10赋值给变量length和width;
3. 将变量width的值赋值给length;
4. 定义一个变量用于存储用户的地址，应该使用什么名称？
5. 定义一个常量存储美国首都的地址，应该使用什么名字？

---

章节目录
上一篇：《严格模式》
下一篇：《数据类型》

---