JS let、const、var的区别、块级作用域理解

let const

let

• 用于声明变量，不存在变量提升(不允许先试用后声明)，可以只声明变量 之后赋值，可以使用一条let同时声明多个变量

  ​

  let i, j , k
  let x = 1, y = 2, z = x*y
  

• 同一个块级作用域内不可重复声明同一个变量

• 声明的变量不会挂载到全局对象上

const

• const用于声明常量，一旦被声明不可被改变(引用数据类型内存地址改变才视为改变)
• const声明常量必须赋值
• 同一个块级作用域内不可重复声明同一个常量名

块级作用域

​ let 、 const声明的变量及常量具有块级作用域， JS中的 类 和 函数体是代码块，if/else语句的语句块，while和for循环的循环体都是代码块， 简单来说， 如果变量或常量在一对花括号中被声明，那么这对花括号就限定了该变量或常量的作用范围，在代码块之外访问变量或常量是访问不到的

​ 如果声明位于顶部，那么就称其为全局变量或常量，具有全局作用域，通过作用域链，在定义它们的文件下的任何代码块中都可以访问到

​

				let name = "gary"
        function fn(){
            return () => {
                console.log(name)
            }
        } 
        fn()()    //'gary'
       	
        if(true){
            let age = 18
        }

        console.log(age)   //报错 index.html:23 Uncaught ReferenceError: age is not defined

//块级作用域
//两个i属于不同的作用域，每次打印都是访问内部定义的变量i('foo')
for (let i = 0; i < 3 ; i++) {
     let i = 'foo'
     console.log(i)
}

//类似这样
let i = 0
//相当于这样的代码执行了3次
if(i < 3){
     console.log("-----------------")
     let i = 'foo'
     console.log(i)
}
i++

if(i < 3){
     let i = 'foo'
     console.log(i)
}
i++

if(i < 3){
     let i = 'foo'
     console.log(i)
     console.log("---------------")
}
i++


//这样只会输出一次
//此时修改了变量i， 执行一次后i < 3不成立，就不会执行了
for(let i = 0; i< 3; i++){
     i = 'foo'
     console.log(i)
}

var let const的区别

• 是否存在变量提升

  var存在变量提升(即将变量提升到当前作用域的顶层)， 可以在声明前调用，只不过是undefined

  let const 不存在变量提升，必须先声明再使用，否则会报出错误

  console.log(name)   //undefined
  var name = 'gary'
  
  console.log(name1) //ReferenceError: name1 is not defined
  let name1 = 'gary'
  
  console.log(name2) //ReferenceError: name2 is not defined
  const name2 = 'gary'
  

• 是否存在暂时性死区

  let const 存在暂时性死区，即当前代码块中存在let 、 const 关键字，他们声明的变量就会绑定到这一区域，不会受外层作用域的影响

  let a = '123'
  if(true){
    a = 321   //ReferenceError
    let a = 456
  }
  //if代码块中存在let 关键字，那么变量a就会绑定到当前作用域，不会去上层作用域寻找，在该块级作用域中使用未声明的变量a，此时就会报错
  

• 是否允许重复声明

  var允许重复声明,后声明的值会覆盖先声明的，let const 在同一块级作用域下不允许重复声明

  var a = 4
  var a = 5
  console.log(a)   //5
  
  let b = 1
  let b = 2  //SyntaxError: Identifier 'b' has already been declared
  console.log(b)
  
  const c = 1
  const c =2
  console.log(c) //SyntaxError: Identifier 'c' has already been declared
  

• 是否存在块级作用域

  let const存在块级作用域 ， var不存在块级作用域

  for (var i = 0; i< 3 ; i++){
        for (var i = 0 ; i< 3; i++){
            console.log(i)
        }
        console.log('内层循环结束')
    }
  //外层循环的i会被内层循环的i覆盖掉，外层循环只会走一次
  //0
  //1
  //2
  //内层循环结束
  
    for (let i = 0; i< 3 ; i++){
        for (let i = 0 ; i< 3; i++){
            console.log(i)
        }
        console.log('内层循环结束')
    }
  //因为存在块级作用域，内外层循环用各自块级作用域内的i   let 与const相同
  //0
  //1
  //2
  //内层循环结束
  //0
  //1
  //2
  //内层循环结束
  //0
  //1
  //2
  //内层循环结束
  

• 声明后是否可以修改值

​ let var 声明后可以修改， const声明的常量不可再次修改(引用数据类型的值，修改地址值才算修改)

​ const 声明变量必须赋初始值, let var 可以先声明之后赋值

let a = 1
a = 2
console.log(a)   //2

var b = 1
b = 2
console.log(a)   //2

const c = 1
c = 2    //TypeError: Assignment to constant variable
console.log(a)   //2

const obj = {
     name: 'gary',
     age:12
 }
 obj.name = 'mini'
 console.log(obj.name)   //mini

 obj = {     //TypeError: Assignment to constant variable.
     code: 200
 }

• 声明的变量是否会绑定到全局对象上

  ​ 在浏览器环境，我们的全局对象就是window

  ​ var声明的变量会绑定为全局对象的属性

  ​ 而let const 声明的变量不会

  var name = 'sam'
  console.log(name)    //sam
  console.log(window.name)  //sam
  
  let age = 12
  console.log(age)    //12
  console.log(window.age)  //undefined