ES6新增属性let（var的升级版）代替函数闭包解决问题

了解ES6的let属性与var的区别

let的介绍与var的区别

1.var没有块级作用域，而let有块级作用域
2.在js中只有function才有自己独立的作用域
如果没看懂:
举个例子：

{
    
    var a=10}
console.log(a);

1.在网页运行的时候a是可以直接打印的
2.如果将var换成let时

{
    
    let a=10}
console.log(a);

在这里插入图片描述

1.控制台显示a未定义。
2.这说明let有自己独立的作用域。
3.既然有独立的作用域，那么let就能替代函数解决函数闭包问题。

举个例子：
我们用for循环为5个按钮绑定监听事件点击每个按钮打印对应的数字。

<body>
 <button>1</button>
 <button>2</button>
 <button>3</button>
 <button>4</button>
 <button>5</button>
</body>

<script>
    var btn=document.getElementsByTagName("button");//获取所有button的一个列表
    for(var i=0;i<btn.length;i++){
    
    
        btn[i].onclick=function(){
    
    console.log(i+1);}
    }

1.这样写的话我们不管点击哪一个控制台只会打印最后一个数字5，
2.前面的1234都被覆盖掉了，点那个按钮都打印5
3.说明for的{ }是没有块级作用域的

以前的解决方式（函数闭包）

 for(var i=0;i<btn.length;i++){
    
    
     (function a(i){
    
    
            btn[i].onclick=function(){
    
    console.log(i+1);} 
	 })(i);   
    }

**
用一个立即执行函数给它闭包起来，然后将i的值传进去。（不建议）

现在的解决方式（ES6的let：var的升级版）

直接将var 换成let

   for(let i=0;i<btn.length;i++){
    
    
            btn[i].onclick=function(){
    
    console.log(i+1);} 
    }

直接解决问题，简单方便（推荐!!!）

现在学习js的同学，可以养成写let的相关，它也是var的完善版！！！！！