es6中let实例应用之一

有如下情景

html部分：

<button class="btn">按钮1</button>

<button class="btn">按钮2</button>

<button class="btn">按钮3</button>

<button class="btn">按钮4</button>

js部分：

var btns = $('.btn');

for(var i=0;i<btns.length;i++) {

    btns.eq(i).click(function () {

        alert(i);

    })

} 

现在有个需求 点击每一个按钮，弹出该按钮对应的索引 ，但是按照上面的js执行，这样不管点击哪一个按钮，都只会弹出4 具体原因可以自行分析

传统的解决方法，是采用闭包

var btns = $('.btn');

for(var i=0;i<btns.length;i++) {

   (function(i){

        btns.eq(i).click(function () {

            alert(i);

        })

   })(i);

} 

es6中利用let解决

var btns = $('.btn');

for(var let i=0;i<btns.length;i++) {

   // (function(i){

        btns.eq(i).click(function () {

            alert(i);

        })

   // })(i);

}