JavaScript变量
JavaScript变量
- 1. 变量声明规则
- 2. var
-
- 2.1 var声明变量
- 2.2 var变量作用域
- 2.3 var变量提升
- 3. let
-
- 3.1 let的区别
- 4. const
-
- 4.1 const的区别
- 5. 用var还是let还是const？
变量用来存储数据，在JavaScript中，变量是松散类型的，所以变量可以用来保存任何类型的数据。
有3个关键字可以用来声明变量： var、let、const。
1. 变量声明规则
- 区分大小写，也就是说name和Name是2个不同的变量。
- 变量名第一个字符必须是字母、下划线( _ )、美元符号( $ )，首字符不能为数字。
- 变量名不能为关键字、保留字，如do、in、if等等。
2. var
在ES6之前，都是使用var来声明变量
2.1 var声明变量
要声明变量需要在var后面跟上一个变量名，如：
var a;
这段代码通过var声明了一个名字为a的变量，它可以保存任意的数据类型，因为没有给他赋值，他的值默认为undefined。
可以在声明变量的时候直接赋值，如：
var a = 123;
var b = '你好';
这段代码声明了变量a，赋值为Number类型的123和声明了变量b赋值为String类型的你好。
2.2 var变量作用域
1. 全局变量
通过var声明的全局变量，是在window对象中的，如：
var a = 1;
console.log(a); // 1
console.log(window.a); // 1
2. 局部变量
也可以在函数内部中声明变量，这样他就会成为函数的局部变量，在函数退出时变量会被销毁，如：
function a() {
var b = 123;
console.log(b); // 123
}
a();
console.log(b); // 出错，会提示b没有定义。
在上面代码中，在a函数内部中声明了一个变量b，在执行完函数后，变量b会被销毁，所以最后一句代码会报错，提示b没有定义。
3. 其他
在函数内，是可以访问全局变量的，如：
var num = 123;
function a() {
console.log(num); // 123
}
a();
在全局变量和局部变量名相同的情况下，会优先使用最近作用域当中的局部变量，如果当前作用域中没有这个变量，那么它会向上一层层的作用域中寻找，直到找到变量为止，如果到了window对象还没有这个变量，那么会报错，如：
var num = 123; // 全局变量
function a() {
var num = 222; // 局部变量
console.log(num); // 222 输出的局部变量
}
function b() {
console.log(num); // 123 输出的全局变量
}
function c() {
console.log(xx); // 报错 没有找到这个变量
}
a();
b();
c();
上面代码，有一个全局变量num，函数a中，因为也声明了局部变量名叫num，所以函数a中输出的是222。函数b中，没有名为num的局部变量，所以向上寻找，直到在全局变量中找到了num，输出为123。函数c中，并没有声明局部变量xx，向上寻找也未寻找到名为xx的变量，所以会报错，提示变量xx未定义。
2.3 var变量提升
function a() {
console.log(b);
var b = 123;
console.log(b);
}
a();
看到这段代码，第一反应是，函数a中的第一句console.log(b);肯定会报错，因为变量b是在这一句的下面才声明的，而且全局变量中也没有b，其实并不是这样的，因为通过var声明的变量会自动把声明都放在作用域的最顶部，同等于以下代码：
function a() {
var b;
console.log(b); // undefined
b = 123;
console.log(b); // 123
}
a();
函数a中，第一句就直接声明了变量b，没有给他赋值，所以第一句输出语句输出的值是undefined，在下面才给它赋值为123，所以第二句输出语句输出的值为123。
3. let
let是es6中新出的声明变量的关键字，他和var基本上一样，但是也有一些区别。
3.1 let的区别
- let是块级作用域，而var是函数作用域。
- let没有变量提升。
- let声明的全局变量不在window对象中。
这是一个块级作用域的例子：
if (true) {
var a = 11;
let b = 22;
console.log(a); // 11
console.log(b); // 22
}
console.log(a); // 11
console.log(b); // 报错 没有定义
首先可以看到，if代码块中通过var和let各声明了一个变量a和b。
a因为是通过var声明的，是函数作用域，然而if并不是函数，所以a会成为全局变量，所以if中和下面的代码输出a的值都为11。
b通过let声明，在if代码块中属于局部变量，作用域只在if代码块中，所以if代码块中输出b的值为22，最下面输出b的值会报错。
再看一个let没有变量提升的例子：
function a() {
console.log(b); // Cannot access 'b' before initialization
let b = 11;
}
a();
a函数中，在声明b之前输出b值，报错提示不能在声明b之前使用b，代表了let声明的变量是没有变量提升的。
let声明的全局变量不在window对象中例子：
var a = 1;
let b = 2;
console.log(window.a); // 1
console.log(window.b); // undefined
可以看到，通过var声明的变量是在window对象中的，通过let声明的变量不在window中，所以输出结果为undefined。
4. const
const也是es6新出的一种声明变量的关键字，它和let基本上一样，但是也有一些区别。
4.1 const的区别
- 通过const声明变量的时候必须赋值。
- 不能修改const的值。
通过const声明变量的时候必须赋值，看一个例子:
const a; // 报错 Missing initializer in const declaration
const a = 1; // 正确
不能修改const的值，例子：
const a = 1;
a = 2; // 报错 Assignment to constant variable.
注意、注意、注意、 不能修改const的值是指的不修改他的指向的变量的引用，如果你的值是一个对象，那么是可以修改这个对象的内部属性的，因为他的指向没有变，例如：
const a = {
b: 2,
}
a.b = 3
const c = {
}
c = {
} // 报错 Assignment to constant variable.
这个例子声明了一个对象a，并且修改了它的内部属性b，a的指向没有变，这样并不违反const的规则。
下面还声明了一个对象c，并且重新给他赋值了一个对象，这样指向会改变，违反了const规则并报错。
5. 用var还是let还是const？
有些人可能会懵了，3个到底要用哪一个？
根据现在的开发者普遍的情况，总结如下：
- 不再使用var。
因为新出的let和const，有明确的作用域，声明位置等，为了提高代码的可读性，稳定性，推荐不要再使用var。 - 优先使用const，其次使用let。
使用const会更有信心的知道这个值不会变，有利于提高代码的稳定性，预防一些不可预测的问题出现，如果你知道某个值在未来会被修改，那么使用let。