ES6学习--let关键字

ES6中新增加了let命令，用它声明的变量，只在代码块内有效。

什么是代码块？

if(true){
let a=1;

console.log(a);
}

现在if语句用{}包裹起来的部分，算是代码块；

for(let i=0;i<10;i++){
console.log(i);

}

console.log(i);

在for循环中{}包裹起来的部分是代码块；但是{}包裹起来的部分，能够访问到for语句的循环条件，应该说在for循环中，循环条件和{}包裹来的部分，都是代码块，用let，在这里面声明的变量，在外面是访问不到的。

while循环里面呢？

let a=10;

while(a<12){

a=a+1;

let b=a+1;

console.log(b);

}

console.log(b);

在这段代码里面，window.a是undefined, b在while循环外面是访问不到的。

在es5中，如果我们要实现下面的需求：

var arr=[];

for(let i=0;i<10;i++){

arr[i]=function(){

console.log(i);

}

}

a[2]();

这里一定要用到闭包。下面代码是用闭包来实现的：

var arr=[];

for(var i=0;i<10;i++){

(function(val){

arr[val]=function(){

console.log(val);

}

})(i)

}

这样，在控制台里面输入arr[0]()，会得到0, arr[1](),会得到1.

关于闭包的使用，这里有一个比较经典的例子。页面上有5个元素，都是a标签，你可以这样来生成并附加到页面上一个id为abc的div标签中：

for(let i=0;i<5;i++){ 

    let str="<a href='javascript:void(0)' id="+i+">"+i+"</a>" 

    $("#abc").append(str); 

}

针对这些a标签元素，有这样一个需求，点击一个a标签，弹出一个提示框，提示框中显示这个a标签的id号码。下面是实现代码：

for(var i=0;i<5;i++){

(function(a){

$("#"+a+"").on('click',function(){

alert(a);

})

})(i)

}