1.let命令
所声明的变量命令所在代码块有效:
{
let a=10;
var b=1;
}
a;// ReferenceError: a is not defined.
b;//1
for循环的计数器,就很适合let命令
for (let i = 0; i < arr.length; i++) {}
console.log(i);
//ReferenceError: i is not defined
使用var,最后输出10
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10
变量i是var声明的,在全局范围内都有效。所以每一次循环,新的i值都会覆盖旧值,导致最后输出的是最后一轮的i的值。
如果使用let,声明的变量仅在块级作用域内有效,最后输出6
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6
i是let声明的,当前i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是6。
不存在变量提升:
let不像var那样会发生变量提升,所以变量一定要在声明后使用。
console.log(foo); // 输出undefined
console.log(bar); // 报错ReferenceError
var foo = 2;
let bar = 2;
变量foo用var命令声明,会发生变量提升,即脚本开始运行时,已经存在了,但是没有值,所以输出undefined。变量bar用let命令声明,不会发生变量提升,表示在声明它之前,变量bar是不存在的,这是如果用到它,就会抛出一个错误。
暂时性死区
只要块级作用域内存在let命令,它所声明的变量就“绑定”这个区域,不在受外部的影响。
var tmp = 123;
if (true) {
tmp = 'abc'; // ReferenceError
let tmp;
}
存在全局变量tmp,但是块级作用域内let又声明了一个局部变量tmp,导致后者绑定这个块级作用域,所以let声明变量前,对tmp赋值会报错。
ES6明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。
总之在代码块内,使用let命令声明变量之前,该变量是不可用的,称为“暂时性死区”(temporal dead zone,简称TDZ)。
if (true) {
// TDZ开始
tmp = 'abc'; // ReferenceError
console.log(tmp); // ReferenceError
let tmp; // TDZ结束
console.log(tmp); // undefined
tmp = 123;
console.log(tmp); // 123
}
暂时性死区也意味着typeof不再是一个安全的操作
typeof x; // ReferenceError
let x;
如果一个变量根本没有被声明,使用typeof反而不会报错
typeof undeclared_variable // "undefined"
有些死区比较隐蔽,不太容易被发现:
function bar(x = y, y = 2) {
return [x, y];
}
bar(); // 报错
因为参数x默认值等于另一个参数y,而此时y还没有声明,属于死区。如果y的默认值是x,就不会报错,因为此时x已经声明了。
function bar(x = 2, y = x) {
return [x, y];
}
bar(); // [2, 2]
ES6规定暂时性死区和不存在变量提升,主要是为了减少运行时错误,防止在变量声明前就使用这个变量,从而导致意料之外的行为。
不允许重复声明
let不允许在相同作用域内,重复声明同一个变量
// 报错
function () {
let a = 10;
var a = 1;
}
// 报错
function () {
let a = 10;
let a = 1;
}
因此,不能再函数内部重新声明参数
function func(arg) {
let arg; // 报错
}
function func(arg) {
{
let arg; // 不报错
}
}
块级作用域
只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。
第一种场景,内层变量可能会覆盖外层变量
var tmp = new Date();
function f() {
console.log(tmp);
if (false) {
var tmp = "hello world";
}
}
f(); // undefined
函数f执行后,输出undefined,原因在于变量提升,导致内层的temp变量覆盖了外层的tmp变量。
第二种场景,用来计数的循环变量泄露为全局变量
var s = 'hello';
for (var i = 0; i < s.length; i++) {
console.log(s[i]);
}
console.log(i); // 5
变量i用来控制循环,但是循环结束后,它没有显示,泄露成了全局变量。
ES6块级作用域
function f1() {
let n = 5;
if (true) {
let n = 10;
}
console.log(n); // 5
}
上面的两个代码块中,都声明了变量n,运行后输出5.外层代码块不受内层外码块的影响
因此可以在内层作用域和外层作用域定义同名的变量。
{{{{
let insane = 'Hello World';
{let insane = 'Hello World'}
}}}};
ES6引入了块级作用域,明确允许在块级作用域之中声明函数。
2 const命令
const声明一个只读的常量。一旦声明,常量的值就不能改变。const声明的值不能改变,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。
const的作用域与let命令相同:只在声明所在的块级作用域内有效。
const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。
if (true) {
console.log(MAX); // ReferenceError
const MAX = 5;
}
const声明的常量,也与let一样不可重复声明。
const命令只是保证变量名指向的地址不变,并不保证该地址的数据不变,所以将一个对象声明为常量必须非常小心。
const foo = {};
foo.prop = 123;
foo.prop
// 123
foo = {}; // TypeError: "foo" is read-only