var,let和const的区别是什么？

前言

什么是变量提升？

• 所谓的变量提升就是在声明变量之前获取变量。

• 变量提升只存在用var声明的变量。let，const没有变量提升

• 当我们声明一个全局var变量，都会被提升到最顶部。在function 内定义var变量亦是如此。请看以下代码

<script>
	console.log('全局声明 var a之前的a：', a); //undefined
	var a = 12
	console.log('全局声明 var a后的a：', a); // 12
	
	//报错 b is not defined  因为这里报错，所以不会执行下面的，如果需要看下面的输出，就需要把这一行注释掉
  	 console.log('function 外声明 var b之前的b：', b); 
  	 
     function functionB(){
          console.log('function内 声明 var b前的b：', b); // undefined
          var b = 20
          console.log('function内 声明 var b后的b：', b);// 20
      }
      functionB()
	
</script>

• 输出结果：
  var声明的a之前输入的为undefined，可以理解为var声明的a在赋值之前会变量提升到最顶部，所以第一个打印是undefined，第二个才输出12

<script>
 	var a;
	console.log('声明 var a之前的a：', a);
	a = 12
	console.log('声明 var a后的a：', a);
</script>

• 第一个打印报错 b is not defined ，第二个打印undefined，第三个打印20
• 函数体内定义的var变量会提升到函数内的最顶部，而不会提升到函数体外，所以第一个打印会报错b没有定义。

<script>
    console.log('function 外声明 var b之前的b：', b);
    function functionB(){
        console.log('function内 声明 var b前的b：', b);
        var b = 20
        console.log('function内 声明 var b后的b：', b);
    }
    functionB()
</script>

var、let、const声明变量的区别

• 都存在作用域内，作用域外无法使用。

var 声明的变量可以二次声明，可以二次赋值

• var 在同一作用域可以重复赋值、声明，后赋值/声明的var变量会覆盖之前声明的变量

   <script>
        var a = 1
        console.log('第一个声明的a：', a);

        a = 3
        console.log('重新赋值后的a', a);

        var a = 2
        console.log('第二个声明的a：', a);

        console.log('最终结果',a);

    </script>

let 声明的变量可以二次赋值，但是不可以二次声明

• 二次定义的 let变量会提示Uncaught SyntaxError: Identifier 'a' has already been declared（标识符’a’已经被声明 ）let没有变量提升

  <script>
      let a ;
      console.log(a); // undefined 
      a = 3
      console.log(a) // 3
      let a = 2 
      console.log(a); // 2
  </script>

• let可以二次赋值，let最后一次赋值的会覆盖前面的值

    <script>
        let a ;
        console.log(a);// 1
         a = 2
        console.log(a); // 2
        console.log('最终结果',a);
    </script>

const 声明的变量必须初始化值，不可以二次声明，不可以二次赋值

• 错误示例1：声明了const a，没有初始化值，会报错Missing initializer in const declaration

    <script>
        const a ;
        console.log(a);
    </script>

• 错误示例2：声明了const a，并且初始化值，二次赋值。第一个输出1，第二个报错Uncaught TypeError: Assignment to constant variable.

    <script>
        const a =1;
        console.log(a);
         a = 2
        console.log(a);
        // console.log('最终结果',a);
    </script>

• 正确示例：声明并且赋值，且不二次声明，且不二次赋值。

    <script>
        const a = 1;
        console.log(a);
    </script>