变量

发表于 | 分类于

任何程序的运行的都离不开数据。同理，任何程序的开发也离不开数据。不管是日常的代码练习还是实际的项目开发，都会涉及到数据的操作（例如：数据的增删改查）。为了能够更方便的去操作数据，开发者们对数据进行了命名保存，即把需要操作的数据保存在一个有名字的容器中。

在 JavaScript 中，变量就可以看做是“有名字的保存数据的容器”。

变量的声明

想要保存数据，首先需要将容器创建出来。我们将创建容器的过程称之为“变量的声明”。

变量的声明方式总共分为两种：

  1. var：ES6 出来之前最常用的声明变量的方式。
  2. let：ES6 中新增的声明变量的方式。

两种声明方式的语法结构如下：

1
2
var 变量名;
let 变量名;

例如，我们要通过var声明一个名字叫做num的变量，代码如下：

1
var num;

同理，如果我们要通过let声明一个名字叫做username的变量，代码如下：

1
let username;

变量的赋值

容器创建好之后，就可以将数据保存到容器里了。我们把数据保存进容器的过程称之为“变量的赋值”。

var和let的赋值方式一样，语法结构如下：

1
变量名 = 数据;

注意：JavaScript 中的=和数学中的=含义并不相同。在 JavaScript 中，=叫做赋值符，表示将=右边的数据赋值给=左边的变量。

例如：我们要将数字100赋值给变量num。代码如下：

1
2
var num;
num = 100;

又例如：我们要将姓名John赋值给变量name。代码如下：

1
2
let username;
username = 'John';

同一个变量可以进行多次赋值，后面赋值的数据会将前面赋值的数据覆盖掉，以此来实现变量值的修改。例如：

1
2
3
let username;
username = 'John';   // 第一次赋值
username = 'Lucy';   // 第二次赋值

上面代码中，变量username最终保存的数据为Lucy。

变量的初始化

我们可以先创建容器，再保存数据。也可以在创建容器的同时就将数据保存进去。即声明变量的同时就对变量进行赋值，我们将这个声明和赋值同时进行的过程称之为“变量的初始化”。

我们将上面两个例子改写成变量初始化的代码：

1
2
var num = 100;
let username = 'John';

let 和 var 的区别

作用域

“作用域”是指变量的作用范围。也就是说，变量只在声明时所在范围内有效。

  • var 声明的变量，作用域通过函数来划分。
  • let 声明的变量，作用域通过大括号来划分。
1
2
3
4
5
6
7
8
9
10
11
function foo() {
    var a = 1;    // a 的作用范围在函数内部
}
console.log(a);   // 报错
{
    var b = 3;    // b 的作用范围是全局（大括号并不能限制 var 的范围）
    let c = 2;    // c 的作用范围在大括号内部
}
console.log(b);    // 3
console.log(c);    // 报错

重复声明

“重复声明”是指在同一个作用域内，对同一个变量名进行多次声明。

  • var 语法上允许重复声明，但后面的变量会覆盖掉前面。
  • let 语法上不允许重复声明。

例：

1
2
3
4
5
var num = 100;
var num = 200;
console.log(num);   // 200
let num = 300;      // 程序报错

变量提升

“变量提升”是指在代码运行之前，会有一个预解析的过程。在这个过程中，会将所有var的变量声明提升到代码头部（变量赋值留在原位置）。

  • var 声明的变量会发生“变量提升”。
  • let 声明的变量不会发生“变量提升”。
1
2
3
4
console.log(a);     // undefined
console.log(b);     // 报错
var a = 1;
let b = 2;

常量

除了可以用var和let来保存数据以外，ES6 中还新增了一种方式const，用来保存不可变的数据，我们将其称之为“常量”。

声明常量的方式只有一种，就是通过关键字const。常量的使用要求在声明的同时必须赋值，否则程序会报错。

1
2
3
4
5
// 错误语法
const num;
num = 10;
// 正确语法
const num = 10;

注意：常量一旦被初始化，值就不能被改变。常量的使用只能进行读取操作。

1
2
const num = 10;
num = 20;   // 报错，常量不允许修改
我 秦始皇 打钱