ES6 新增了let命令,用来声明变量。
和var区别:
1、它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效;
2、var 存在变量提升,let不会存在变量提升;
案例:
for(var i=0;i<=3;i++){
console.log('i == '+ i);
}
console.log('i == '+ i); // 结果:i == 4,var变量作用域提升
for(let j=0;j<=3;j++) {
// let j = '123'; // 如果这里声明了let j,下面输出的是'123'
console.log('j == ' + j);
}
console.log('j == ' + j); // j is not defined (let 块级作用域,代码块内有效)
案例2
<html>
<head>
<titile>let</title>
<meta charset="utf-8" />
<script>
window.onload = function(){
var inputEl = document.getElementsByTagName('input')
for(var i = 0; i < inputEl.length; i++){
inputEl[i].onclick = function(){
alert(i); // 结果都是3
}
}
// 解决 var 定义i每次结果都是3的方案:
for(var i = 0; i < inputEl.length; i++){
// 使用函数代码块包裹 讲i作为函数参数传入
(function(i){
inputEl[i].onclick = function(){
alert(i); // 结果是1、2、3
}
})(i);
}
// 使用let解决
for(let i = 0; i < inputEl.length; i++){
inputEl[i].onclick = function(){
alert(i); // 结果是1、2、3
}
}
}
</script>
</head>
<body>
<input type="button" value="按钮1"/>
<input type="button" value="按钮2"/>
<input type="button" value="按钮3"/>
</body>
</html>