let

使用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);

}