var和let区别

关键词：

• let : 变量只能声明一次
• var : 变量可以多次声明

大家都已经十分熟悉var 了，对于let可能还不太了解，let是ES6的新运算符，也是用来声明变量，下面我们写个小例子看区别

  var a = 5;
  var a = 3;
  let b = 2;
  let b = 4;  
  console.console.log(a);
  console.console.log(b);  // Identifier 'b' has already been declared

let的好处是当我们写代码比较多的时候可以避免在不知道的情况下重复声明变量

而且，我们还有意外收获， 看下面的一个例子

        // var
    for(var i=0;i<5;i++){
           setTimeout(function(){
               console.log("var：" + i);
          })
    }
       // let
    for(let i=0;i<5;i++){
           setTimeout(function(){
               console.log("let" + i);
          })
    }

用var我们输出的所有值都是5，但是用let我们就可以依次输出1,2,3,4,5，因为let不可以重复声明变量

那用var怎么实现呢，我们采用闭包的方法:

    for(var i=0;i<5;i++){
        (function(i){
           setTimeout(function(){
               console.log("var" + i);
          })
        })(i);

既然let 有了这个功能，那我们用for循环就简单多了，下面我写一个选项卡

  <!-- HTML代码 -->
    <button class="active">111</button>
    <button>222</button>
    <button>333</button>
    <div class="show">div1</div>
    <div>div2</div>
    <div>div3</div>

    /* css代码 */
    div{
        display: none;
        background-color: #ccc;
        width: 200px;
        height: 200px;
        border: 1px solid #999;
    }
    .show{
        display: block;
    }
    .active{
        background-color: yellow;
    }

 /*js代码*/
  var tabs = document.getElementsByTagName('button');
    var divs = document.getElementsByTagName('div');

    for(let i=0;i<tabs.length;i++){
        
        tabs[i].onclick = function(){
            for(var j=0;j<tabs.length;j++){
                divs[j].className = '';
                tabs[j].className = '';
            }
            this.className = 'active';
            divs[i].className = 'show';
        }
    }

对比传统方式的js代码

    for(var i=0;i<tabs.length;i++){
        tabs[i].index = i;
        tabs[i].onclick = function(){
            for(var j=0;j<tabs.length;j++){
                divs[j].className = '';
                tabs[j].className = '';
            }
          console.log(this.index);
            divs[this.index].className = 'show';
            this.className = 'active';

        }
    }