var 用來定義變數和常量 let 用來定義變數 const 用來定義常量

區別
1、 侷限於當前的程式碼塊

let 、 const  在所在的程式碼塊內有效 ，在同一作用域只能定義一次，再次定義會報錯）

2、作作用域不會被提升

**var**  變數會提升
    {
        console.log(str)   // undefined  因為str作用域為全域性的，js在解析的時候會先當作為  var = str，所以為undefined;
        var str = '張三';
        console.log(str)  //  張三  
 

    }

**let**  變數不會提升
    {
        console.log(str)   //  str is not defined  不存在作用域提升
        let str = '張三';
        console.log(str)  //  不會列印  
    }

3、在相同的作用域下不能申明相同的變數

**var**
{
        var   str = '張三'; 
        var   str = '張四';   
        console.log(str)  //  張四  
    }

**let** 
{
        let
 
   str = '張三'; 
        let   str = '張四';   
        console.log(str)  // 報錯 Uncaught SyntaxError: identifier 'str' has already been declared  識別符號已經被宣告  
    }

4、for迴圈作用域不同 let更為簡潔

**var**
    // 例子 
  var a = [];
       for (var i = 0; i < 10; i++) {
              a[i] = function () {
                  console.log(i);
              };
          }
          a[6
 
](); // 10

var btns=document.querySelectorAll("button");
    for (var i = 0; i < btns.length; i++) {
        // btns[i].onclick=function(){
        //  alert("點選了"+i+"個按鈕")  //  每次都是5   因為for迴圈是同步事件，而事件的出發為非同步事件的，解決的辦法見下  閉包   
        // }
        (function(i){
            btns[i].onclick=function(){
                alert("點選了"+i+"個按鈕")  
            }
        })(i)
    }

**let**
   var a = [];
        for (let i = 0; i < 10; i++) {
            a[i] = function () {
                console.log(i);
            };
        }
        a[6](); // 6

let btns=document.querySelectorAll("button");
    for (let i = 0; i < btns.length; i++) {
        btns[i].onclick=function(){
            alert("點選了"+i+"個按鈕")  //  每次都是5   因為for迴圈是同步事件，而事件的出發為非同步事件的，解決的辦法見下  
        }

    }