菜鸟看前端（var，let,const区别）

JavaScript中let、const、var 的区别

1 .变量提升

var声明的变量存在变量提升（将变量提升到作用域的顶部），变量可以在声明之前调用值为undefined

console.log(a) // 值为undefined
var a = 10;

let 和cosnt 不存在变量提升，它们所声明的变量一定要在声明后使用，否则报错ReferenceError

console.log(b); // ReferenceError
let b = 10;


console.log(c) // ReferrnceError
const c = 10

2.暂时性死区

let和conat存在暂时性死区 只要块级作用域之内存在let命令，它声明的变量就绑定这个区域 ，不受外部影响

if(true){
     
// var 不存在暂时性死区，声明变量是全局变量
var a = 10;  // var 声明便变量相当于 window.a = 10
}
console.log(a); // 10

if(true){
     
// 暂存性死区，let声明的变量只在块级作用域内生效
let b = 10; // const b = 10 也会报错
}
console.log(b)  // 报错
//es6var,let,const.html:87 Uncaught ReferenceError: b is not defined
//at es6var,let,const.html:87

3.重复声明变量

var 允许重复声明变量
const和let在同一作用域不允许重复声明变量

var a = 10;
var a = 20;
console.log(a) // 20

let b = 10;
let b = 20;
console.log(b) // 报错
//Uncaught SyntaxError: Identifier 'a' has already been declare
const c = 10;
const c = 20; // 报错
//Uncaught SyntaxError: Identifier 'c' has already been declared

块级作用域

var 不存在块级作用域
let和const存在块级作用域
es6中新增块级作用域，块级作用域由{}包括，if和for语句里的{}也属于块级作用域

     var arr = [1,2,3,4]

        for(var i = 0;i < arr.length; i++){
     
            setTimeout(function(){
     
                console.log(i)  // 4 4 4 4
            },100)
        }

     var arr = [1,2,3,4]

        for(let i = 0;i < arr.length; i++){
     
            setTimeout(function(){
     
                console.log(i)  // 0 1 2 3
            },100)
        }

修改声明的变量

var 和 let 可以修改声明的变量
const声明一个只读的常量。一旦声明，常量的值就不能改变。const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

     const a = 10;
      a = 20
     console.log(a) // 报错 
     //Uncaught TypeError: Assignment to constant variable.
    //at es6var,let,const.html:111
    
	// let可以修改声明的变量
	 let a = 10;
     a = 20
    console.log(a) // 20
    
	//var 可以修改声明的变量
	var a = 10;
	a = 20;
	console.log(a) // 20