Let命令
基本用法
ES6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。
我们现在来看下面var的例子,当使用var声明的时候,因为var只有全局作用域和函数作用域,所以内层变量覆盖外层变量,if里面的name覆盖了上面的name:
var name = 'poller';
if(true){
var name = 'joke';
console.log(name);//joke
}
console.log(name); //joke
当我们用Let代替var时,可以发现:
let name = 'poller';
if(true){
let name = 'joke';
console.log(name);//joke
}
console.log(name); //poller
此时,内层变量没有覆盖外层变量,这是因为let实际上为JavaScript新增了块级作用域。用它所声明的变量,只在let命令所在的代码块内有效。
?问题来了,这样有什么好处呢?
场景一:
var带来的不合理场景就是用来计数的循环变量泄露为全局变量:
var a = [];
for(var i = 0; i < 10; i++) {
a[i] = function() {
console.log(i);
};
}
a[4](); // 10
上面代码中,变量i是var声明的,在全局范围内都有效。所以每一次循环,新的i值都会覆盖旧值,导致最后输出的是最后一轮的i的值。
当使用Let时:
let a = [];
for(let i = 0; i < 10; i++) {
a[i] = function() {
console.log(i);
};
}
a[4](); // 4
此时我们会发现,a数组中索引为4的输出结果是4,说明每一次循环,i 不会覆盖掉新的 i 的值
应用案例:
点击多个按钮,分别输出对应的值;
<body>
<button class="clickBox">0</button>
<button class="clickBox">1</button>
<button class="clickBox">2</button>
</body>
用var如下:
var clickBoxs = document.querySelectorAll('.clickBox')
for(var i = 0; i < clickBoxs.length; i++) {
clickBoxs[i].onclick = function() {
console.log(i)
}
}
//此時不管点击哪个按钮,都是输出的最大值
这时候只能使用闭包解决这个问题,但是用let就不需要闭包
用let如下:
var clickBoxs = document.querySelectorAll('.clickBox')
for(let i = 0; i < clickBoxs.length; i++) {
clickBoxs[i].onclick = function() {
console.log(i)
}
}
//点击哪个按钮,输出对应的值
注:
这就是块级作用域的好处
- let没有预解析,不存在变量提升,要先定义完,再使用;
- 不能重复定义变量;
- 有个特殊的地方需要说明下,
for循环中,for(let ......)这里的相当于父级作用域,for(){let...}这里的相当于子级作用域。
const命令
基本用法
const也用来声明变量,但是声明的是常量。一旦声明,常量的值就不能改变。
const PI = 8888;
PI = 23 //TypeError: Assignment to constant variable.
注:
const定义完变量,必须有值,不能后赋值,不能修改!!!