使用let的注意事项
1.块级作用域
2.同一作用域中不允许重复声明
3.暂存死区（Temporal dead zone）
4.循环中的let作用域
5.浏览器兼容性
块级作用域和重复声明
{
var x=10;
console.log('x is' +x);
}
console.log(typeof x);
//console
"x is10"
"number"
{
let x=10;
console.log('x is' +x);
}
console.log(typeof x);
//console
"x is10"
"undefined"
let i=20;
for(let i=0; i<10;i++) {
console.log(i);
}
console.log(i);
//console
0
1
2
3
4
5
6
7
8
9
20
不能被重复声明：
var y = 10;
let y=4;
console.log(y);
//console
"error"
"SyntaxError: Identifier 'y' has already been declared
暂存死区（Temporal dead zone）
有了let后typeof不再是安全的,以下代码不会报错；var存在变量提升
let x=10;
function foo() {
console.log(x);
var x=20;
return x*x;
}
console.log(foo());
var改为let报错error ReferenceError: x is not defined
let x=10;
function foo() {
console.log(x);
let x=20;
return x*x;
}
console.log(foo());
var声明时，typeof不会报错,
let声明时，typeof报错：ReferenceError: x is not defined
let x=10;
function foo() {
console.log(typeof x);
let x=20;
return x*x;
}
console.log(foo());
循环（let的词法作用域）
var buttons = document.getElementsByTagName("input");
for(var i=0;i<buttons.length; i++) {
buttons[i].onclick =
evt => console.log('点击了第'+i+'个按钮');
}
//console
"点击了第4个按钮"
"点击了第4个按钮"
"点击了第4个按钮"
"点击了第4个按钮"
以上代码点击每个按钮做种都会打印出最后一个按钮的i; click是异步的方法。
使用let和闭包解决；
闭包解决：
var buttons = document.getElementsByTagName("input");
for(var i=0;i<buttons.length; i++) {
(function(i){
buttons[i].onclick =
evt => console.log('点击了第'+i+'个按钮');
})(i);
}
