(一) let的基本用法
let
命令是 ES6 新增的命令,它和 var
一样都用于声明变量。let
与 var
的最大区别是,let
所声明的变量,只在 let
命令所在的代码块内有效。
以下代码可以正常输出 a
的值,因为 var
声明的变量在全局范围内都有效。
{
var a = 2;
}
console.log(a);
而下述代码会报错,ReferenceError: a is not defined
,因为 let
声明的变量只在它所在的代码块内有效。
{
let a = 2;
}
console.log(a);
let
相比于 var
更适合用于 for
循环的计数器,因为用 let
声明的计数器 i
只在 for
循环体内有效,在循环体外引用就会报错,这样可以防止在全局范围内改变 i
的值。
for (let i = 0; i < 4; i++) {
console.log("line");
}
console.log(i); //ReferenceError: i is not defined
如果我们使用 var
声明的变量 i
作为 for
循环的计数器,则可能出现我们不想要的结果。
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function() {
console.log(i);
};
}
a[6](); //10
上面的代码输出的结果是 10
。因为变量 i
是 var
命令声明的,在全局范围内都有效,所以全局只有一个变量 i
。每一次循环,变量 i
的值都会发生改变,而循环内被赋给数组 a
的函数内部的 console.log(i)
,里面的 i
指向的就是全局的那个 i
。换句话说,所有数据 a
的成员里的 i
,指向的都是同一个 i
,导致运行时输出的是最后一轮的 i
的值,也就是 10
。
完整的过程如下:
a
的初始值为空数组,a=[]
.
第一轮循环,i=0
,
a[0] = function() {
console.log(0);
};
i++
之后 i=1
,
全局变量 i
现在变为了 1
,这个改变也同时影响到了 a[0]
,
a[0] = function() {
console.log(i);
};
//所以
a[0] = function() {
console.log(1);
};
i=1
a[1] = function() {
console.log(1);
};
i++
之后 i=2
,
全局变量 i
现在变为了 2
,这个改变也同时影响到了 a[0]
, a[1]
a[0] = function() {
console.log(i);
};
a[1] = function() {
console.log(i);
};
//所以;
a[0] = function() {
console.log(2);
};
a[1] = function() {
console.log(2);
};
i=2
a[2] = function() {
console.log(2);
};
i++
之后 i=3
,
全局变量 i
现在变为了 3
,这个改变也同时影响到了 a[0]
, a[1]
, a[2]
a[0] = function() {
console.log(i);
};
a[1] = function() {
console.log(i);
};
a[2] = function() {
console.log(i);
};
//所以;
a[0] = function() {
console.log(3);
};
a[1] = function() {
console.log(3);
};
a[2] = function() {
console.log(3);
};
...
i=9
a[9] = function() {
console.log(9);
};
i++
之后 i=10
,
全局变量 i
现在变为了 10
,这个改变也同时影响到了 a[0]
, a[1]
,..., a[9]
a[0] = function(){console.log(i);};
a[1] = function(){console.log(i);};
...
a[9] = function(){console.log(i);};
// 所以
a[0] = function(){console.log(10);};
a[1] = function(){console.log(10);};
...
a[9] = function(){console.log(10);};
最终,无论调用以下哪个
a[0]();
a[1]();
...
a[9]();
输出的结果都是 10
。这不是我们想要的结果。
如果我们使用 let
声明的变量 i
作为 for
循环的计数器,则 i
仅在块级作用域内有效,最终输出结果为 6
。
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function() {
console.log(i);
};
}
a[6]();
上面代码中,变量 i
是 let
声明的,当前的 i
只在本轮循环有效,所以每一次循环的 i
其实都是一个新的变量,所以最后输出的是 6
。
完整的过程如下:
a
的初始值为空数组,a=[]
第一轮循环,i=0
a[0] = function() {
console.log(0);
};
i++
之后 i=1
,
因为变量 i
只在本轮循环有效,所以这个改变不影响 a[0]
,
即
a[0] = function() {
console.log(0);
};
i=1
a[1] = function() {
console.log(1);
};
i++
之后 i=2
,
因为变量 i
只在本轮循环有效,所以这个改变不影响 a[0]
, a[1]
,
即
a[0] = function() {
console.log(0);
};
a[1] = function() {
console.log(1);
};
i=2
a[2] = function() {
console.log(2);
};
i++
之后 i=3
,
因为变量 i
只在本轮循环有效,所以这个改变不影响 a[0]
, a[1]
, a[2]
,
即
a[0] = function() {
console.log(0);
};
a[1] = function() {
console.log(1);
};
a[2] = function() {
console.log(2);
};
...
i=9
a[9] = function() {
console.log(9);
};
i++
之后 i=10
,
因为变量 i
只在本轮循环有效,所以这个改变不影响 a[0]
, a[1]
, ... a[9]
,
即
a[0] = function(){console.log(0);};
a[1] = function(){console.log(1);};
...
a[9] = function(){console.log(9);};
最终,调用以下语句,可以让我们得到不同的结果。
a[0]();
a[1]();
...
a[9]();
你可能会问,如果每一轮循环的变量 i
都是重新声明的,那它怎么知道上一轮循环的值,从而计算出本轮循环的值?这是因为 JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量 i
时,就在上一轮循环的基础上进行计算。
另外,for
循环还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。它们不在同一作用域,所以用 let
定义的变量不会互相影响。
for (let i = 0; i < 3; i++) {
let i = "abc";
console.log(i);
}
//abc
//abc
//abc
上述代码没有报错,并输出了三个 abc
。这表明函数内部的变量 i
与循环变量 i
不在同一个作用域,有各自单独的作用域。
由于变量声明(以及其他声明)总是在任意代码执行之前处理的,所以在代码中的任意位置声明变量总是等效于在代码开头声明。这意味着变量可以在声明之前使用,这个行为叫做“hoisting”。“hoisting”就像是把所有的变量声明移动到函数或者全局代码的开头位置。
bla = 2;
var bla;
可以隐式地(implicitly)将以上代码理解为:
var bla;
bla = 2;
var
命令会发生“变量提升”现象,即变量可以在声明之前使用,值为 undefined
。这种现象多多少少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才可以使用。为了纠正这种现象,let
命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。(const
语句也不出现变量提升)
// var 的情况
console.log(foo); // 输出 undefined
var foo = 2;
上面代码中,变量 foo
用 var
命令声明,会发生变量提升,即脚本开始运行时,变量 foo
已经存在了,但是没有值,所以会输出 undefined
。
console.log(bar); // 报错 ReferenceError
let bar = 2;
上面代码中,变量 bar
用 let
命令声明,不会发生变量提升。这表示在声明它之前,变量 bar
是不存在的,这时如果用到它,就会抛出一个错误。
ES6 明确规定,如果区块中存在 let
和 const
命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。
总之,在代码块内,使用 let
命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。
if (true) {
// TDZ 开始
tmp = "abc"; // ReferenceError: tmp is not defined
console.log(tmp); // ReferenceError
let tmp; // TDZ 结束
console.log(tmp); // undefined
tmp = 123;
console.log(tmp); // 123
}
只要块级作用域内存在 let
命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。
var tmp = 123;
if (true) {
tmp = "abc"; //ReferenceError: tmp is not defined
let tmp;
}
上面代码中,存在全局变量 tmp
,但是块级作用域内 let
又声明了一个局部变量 tmp
,导致后者绑定这个块级作用域,所以在 let
声明变量前,对 tmp
赋值会报错。
“暂时性死区”也意味着 typeof
不再是一个百分之百安全的操作。
typeof x; // ReferenceError
let x;
上面代码中,变量 x
使用 let
命令声明,所以在声明之前,都属于 x
的“死区”,只要用到该变量就会报错。因此,typeof
运行时就会抛出一个 ReferenceError
。
作为比较,如果一个变量根本没有被声明,使用 typeof
反而不会报错。
typeof undeclared_variable; // "undefined"
上面代码中,undeclared_variable
是一个不存在的变量名,结果返回“undefined”。所以,在没有 let
之前,typeof
运算符是百分之百安全的,永远不会报错。现在这一点不成立了。这样的设计是为了让大家养成良好的编程习惯,变量一定要在声明之后使用,否则就报错。
有些“死区”比较隐蔽,不太容易发现。
function bar(x = y, y = 2) {
return [x, y];
}
bar(); // / ReferenceError: y is not defined
上面代码中,调用 bar
函数之所以报错(某些实现可能不报错),是因为参数 x
默认值等于另一个参数 y
,而此时 y
还没有声明,属于“死区”。
如果按照如下方式,则不会报错,因为此时 x
已经声明过了:
function bar(x = 2, y = x) {
return [x, y];
}
bar(); // [2, 2]
另外,下面的代码也会报错,与 var
的行为不同。
// 不报错
var x = x;
// 报错
let x = x;
// ReferenceError: x is not defined
上面代码报错,也是因为暂时性死区。使用 let
声明变量时,只要变量在还没有声明完成前使用,就会报错。上面这行就属于这个情况,在变量 x
的声明语句还没有执行完成前,就去取 x
的值,导致报错”x 未定义“。
ES6 规定暂时性死区和 let
、const
语句不出现变量提升,主要是为了减少运行时错误,防止在变量声明前就使用这个变量,从而导致意料之外的行为。这样的错误在 ES5 是很常见的,现在有了这种规定,避免此类错误就很容易了。
总之,暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。
let
不允许在相同作用域内,重复声明同一个变量。
//不报错
function func() {
var a = 10;
var a = 1;
}
func();
// 报错
function func() {
let a = 10;
var a = 1; // Identifier 'a' has already been declared
}
func();
// 报错
function func() {
let a = 10;
let a = 1; // Identifier 'a' has already been declared
}
func();
因此,不能在函数内部重新声明参数。
function func(arg) {
let arg; // Identifier 'arg' has already been declared
}
func(); // 报错
function func(arg) {
{
let arg;
}
}
func(); // 不报错
小编会定期整理各种干货Note, 小伙伴记得关注收藏~~
澳洲 IT 人的专属社群
海量招聘信息分享
技术面试题讨论
IT学习资料分享
IT技术讨论
扫码加入
前往“发现”-“看一看”浏览“朋友在看”