JavaScript 变量 - 绿叶网

在实际编程中，我们经常要操作各种数据。比如用户登录表单中，我们要记录用户输入的账号和密码；在游戏开发中，我们要记录玩家的分数等。那么这些数据是怎么被 “记下来” 的呢？此时就需要 “变量” 来实现。

变量就像一个贴有标签的盒子，我们可以把数据装进盒子里面（保存数据），然后等需要的时候再拿出来（获取数据）。在 JavaScript 中，我们可以使用变量来存储各种类型的数据，包括数字、字符串、布尔值等。

JavaScript 变量的命名

想要使用变量，我们就肯定得先给它起一个名字（命名），就像每个人都有自己名字一样。当别人喊你的名字时，你就知道别人喊的是你，而不是路人甲。

当 JavaScript 程序需要使用一个变量时，我们只需要使用这个变量的名字就行了，总不能说：“喂，我要用这个变量”。每个程序变量那么多，谁知道你要用哪个变量呢？对吧？”

变量的名字一般是不会变的，但它的值却可以变。这就像人一样，名字一般都是固定下来，但是每个人都会改变，都会从小孩成长为青年，然后从青年慢慢变成老人。

在 JavaScript 中，给一个变量命名，我们需要遵循以下两个方面的原则。

变量名只能包含 “英文字母（a~z、A~Z）、数字（0~9）、下划线（_）、美元符号（$）” ，并且第一个字符必须是 “英文字母、下划线（_）或美元符号（$）”。
变量不能是 JavaScript 关键字和保留字。

上面两句话极其重要，小伙伴们一定要字斟句酌地理解。从第 1 点可以知道，变量只可以包含英文字母（大写小写都行）、数字、下划线（_）或美元符号（$），不能包含除了这 4 种之外的字符（如空格、%、-、*、/ 等）。因为其他很多字符都已经被系统当做运算符。

对于第 2 点，关键字，指的是 JavaScript 本身 “已经在使用” 的名字，因此我们在给变量命名的时候，是不能使用这些名字的（因为系统要用）。保留字，指的是 JavaScript 本身 “还没使用” 的名字，虽然没有使用，但是它们有可能在将来会被使用，所以先保留自己用，不给你用。JavaScript 关键字和保留字如表 1、表 2 和表 3 所示。

表 1 JavaScript 关键字
break	else	new	typeof
case	false	null	let
catch	for	switch	void
continue	function	this	while
default	if	throw	with
delete	in	true
do	instanceof	try

表 2 ECMA-262 标准的保留字
abstract	enum	int	short
boolean	export	interface	static
byte	extends	long	super
char	final	native	synchronized
class	float	package	throws
const	goto	private	transient
debugger	implements	protected	volatile
double	import	public

表 3 浏览器定义的保留字
alert	eval	location	open
array	focus	math	outerHeight
blur	funtion	name	parent
boolean	history	navigator	parseFloat
date	image	number	regExp
document	isNaN	object	status
escape	length	onLoad	string

这里列举了 JavaScript 常见关键字和保留字，只是方便查询，并不是叫大家记忆。小伙伴们可别傻乎乎地一个个去记忆。实际上，对于这些关键字，等学到了后面，自然而然就会认得。就算不认得，等需要的时候再回到这里查一下就行了。

示例 1：正确的变量命名

i
lvye_study
_lvye
$str
n123

示例 2：错误的变量命名

123n         // 不能以数字开头
-study       // 不能以中划线开头
my-title     // 不能包含中划线
continue     // 不能跟系统关键字相同

此外，变量的命名是区分大小写的，例如变量 “age” 与变量 “Age” 在 JavaScript 中就是两个不同的变量。

注意: 虽然在最新的 ECMAScript 标准中，我们可以使用中文来定义一个变量名。但在实际开发中，并不推荐这样去做。

JavaScript 变量的使用

在使用变量之前，我们需要先 “声明” 它，也就是告诉 JavaScript 解释器你要创建一个变量。在 JavaScript 中，有以下 3 种声明变量的方式：

使用 var 关键字：ES5 声明变量的方式。
使用 let 关键字：ES6 用于声明变量的方式。
使用 const 关键字：ES6 用于声明常量的方式。

随着 JavaScript 的发展（尤其是 ES6+ 的推出），不建议在生产环境中使用 var 来定义变量，而是推荐使用 let 或 const 来定义。

提示: 对于 let、const 与 var 的详细区别，我们在后面的 “JavaScript let 和 const” 这一节中会详细介绍。

语法：

let 变量名;         // 声明一个变量，但未赋值
let 变量名 = 值;    // 声明一个变量并赋值

示例 3：使用变量

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        let a = 10;
        document.write(a);
    </script>
</body>
</html>

运行结果如下图所示。

使用变量

分析：

在这个例子中，我们使用 let 来定义一个变量，变量名字为 a，变量的值为 10。然后使用 document.write() 方法输出这个变量的值。

对于变量的命名，我们尽量取一些有意义的英文名或英文缩写。当然，为了讲解方便，本教程有些变量的命名可能比较简单。在实际开发中，我们尽量不要太随便。

此外，一个 let 也可以同时声明多个变量名，其中变量名之间必须用英文逗号（,）隔开。下面 2 种写法是等价的。

// 写法 1
let a=10, b=20, c=30;

// 写法 2
let a=10;
let b=20;
let c=30;

示例 4：修改变量的值

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        let a = 10;
        a = 12;
        document.write(a);
    </script>
</body>
</html>

运行结果如下图所示。

修改变量的值

分析：

咦？a 的值不是 10 吗？怎么输出 12 呢？大家别忘了，a 是一个变量。变量，简单来说就是一个值会变的量。因此 a = 12 会覆盖 a = 10。我们再来看一个例子就会有更深的理解了。

示例 5：变量值的改变

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        let a = 10;
        a = a + 1;
        document.write(a);
    </script>
</body>
</html>

运行结果如下图所示。

变量值的改变

分析：

a = a +1 表示 a 的最终值是在原来 a 的基础上加 1，因此 a 最终值为 11（10+1）。下面代码中，a 的最终值是 5，小伙伴们可以思考一下为什么。

let a = 10;
a = a + 1;
a = a - 6;

打印 JavaScript 变量

在实际开发中，我们需要将变量的值打印（即输出）出来，然后看看结果对不对。在 JavaScript 中，打印 JavaScript 变量的常用方式有以下 3 种（每一种都非常重要）。

document.write()。
alert()。
console.log()。

1. document.write()

在 JavaScript 中，document.write() 用于在页面中直接打印变量，这是最简单的打印变量的方式。但这种方式无法打印复杂类型（如对象），并且也无法查看报错信息。

语法：

document.write(变量)

示例 6：document.write() 打印变量

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        let a = 666;
        document.write(a);
    </script>
</body>
</html>

运行结果如下图所示。

document.write() 打印变量

2. alert()

在 JavaScript 中，alert() 用于弹出一个对话框来打印变量。这种方式弊端也比较大，同样无法打印复杂类型（如对象），并且也无法查看报错信息。

语法：

alert(变量)

示例 7：alert() 打印变量

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        let a = 666;
        alert(a);
    </script>
</body>
</html>

运行结果如下图所示。

alert() 打印变量

3. console.log()

在 JavaScript 中，打印变量最好的方式就是使用 console.log()。console.log() 是在浏览器控制台中打印变量，它可以打印数组、对象等类型数据，并且给出详细报错信息。不过这种方式略微复杂，对完全 0 基础的小伙伴不是那么友好。

语法：

console.log(变量)

示例 8：console.log() 打印变量

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        let a = 666;
        console.log(a);
    </script>
</body>
</html>

浏览器控制台输出如下图所示。

console.log() 打印变量

分析：

咦？怎么页面没有内容呢？小伙伴们先别着急。console.log() 并不是在页面打印变量，而是在浏览器控制台中打印变量。那么应该怎样查看呢？

首先我们在当前页面中点击鼠标右键（以 Edge 浏览器为例），然后选择【检查】，如下图所示。

打开 Edge 浏览器控制台

然后选择上方的【控制台】，就可以看到打印结果了，如下图所示。如果程序报错，也会在这里显示报错信息出来。

Edge 浏览器控制台效果

console.log() 这种方式极其重要，在真实的项目开发中，我们都是使用它来进行数据测试。因此小伙伴们一定要重点掌握。

在后面章节的讲解中，我们也是优先使用 console.log() 来打印变量。