var, let 与const的异同

前言： var，let， const 都javaScript 用于声明变量的命令。var 是早期的javaScript中用于声明变量的命令。而let 和 const 是ECMAScript6(ES6)新加的。接下来我们来了解下var,let和const 命令吧。

一.var 命令

1.var无块级作用域

var没有块级作用域，但有函数作用域和全局作用域。当var声明的变量不在函数体中时，该变量的作用域为全局作用域，变量作用于全局中。反之在函数体中的变量的作用域为函数作用域，只作用于函数体内，函数体外使用将会报错。

全局作用域

var name = "Jason"
function fun(){
  console.log(name)
}
fun() // Jason
console.log(name)  // Jason

函数作用域

function fun(){
  var name = "Jason"
  console.log(name)
}
fun()  // Jason 
console.log(name) // ReferenceError: name is not defined

注： 除函数作用域外，var在{}中声明的变量都也是全局变量，因为var会忽视掉代块

if(true){
    var name = "Jason";
}
console.log(name)         //  "Jason"

2.var有 声明提升机制

变量可在使用后再通过var声明定义,因为JavaScript会将var声明的变量提升至变量作用的作用域顶部，如果是全局作用域的话将会变量提升至全局作用域顶部，如果是函数作用域的话将会提升至函数体顶部。

console.log(name) // undefined
var name = "Jason"

注： 变量声明提升，但赋值是不提示的，所以打印的是undefined

3.var可重复声明

var声明的变量可以重复声明

var name = "Jason"
var name = "Pete"     // 该处的var 无效，因为变量已经声明了
console.log(name) // Pete

注： 第二个var 声明无效，但并不会报错， var name = "Pete" 可视为name = "Pete"

4.var 声明的变量是可读可写的变量

二.let 命令

1.let 存在块级作用域

块级作用域是通过{}来划分的代码块，下面的代码中就分了4个块级作用域

{
  {
    {
       {
            let name = "Jason"
       }
    }
  }
}

function fun(){
  let name = "Jason"   // (1)
  if(true) {
    let name = "Pete"  // (2)
  }
  console.log(name)
}
fun() // Jason

分析：let声明的变量不能发生变量提升，变量只在各自的块级作用域中作用。

           (1)处声明的name是在fun()函数最外层块级作用域中声明的它将作用于整个函数体内。

           (2)处声明的name是在if下的块级作用域中声明的它只作用if的代码块中。

function fun(){
  let name = "Jason"   // (1)
  if(true) {
    let name = "Pete"  // (2)
    console.log(name) // Pete
  }
  console.log(name)
}
fun() // Pete  Jason

2.let 不可发生变量提升

let 不可以在使用后才声明变量，在JavaScript运行环境中let声明的变量不会发生变量提升。

console.log(name)   // ReferenceError: Cannot access 'name' before initialization
let name = "Jason"

3.let 不可重复声明一个变量

let name = "Jason"
let name = "Pete"  // SyntaxError: Identifier 'name' has already been declared

三.const 命令

1.const 存在块级作用域

与let相同const声明的变量都只作用域各自存在的块级作用域中。

if(true) {
  const name = "Jason"  
}
console.log(name) // ReferenceError: name is not defined

2.const 声明是一个只可以读的常量，一旦声明就不可以被改变。

const name = "Jason"
name = "Pete"  // SyntaxError: Missing initializer in const declaration

3.const 不可以发生变量提升

console.log(name)  // ReferenceError: Cannot access 'name' before initializatio
const name = "Jason" 

4.const 不可重复声明一个变量

const name = "Jason"
const name = "Pete"  // SyntaxError: Identifier 'name' has already been declared

5.const 不可以在变量声明后再赋值

const name
name = "Jason"   // SyntaxError: Missing initializer in const declaration

四.var,let,const相同与不同

1.var与let 的相同与不同

相同:

• 声明的变量都可读可写

不同点：

• let 作用于块级作用域中而var作用于全局作用域或函数作用域中
• let 不可以重复声明而var可以重复声明
• let  声明的变量不可以变量提升，而var声明的变量可以

2.var与const的相同与不同

不同点：

• const 作用于块级作用域中而var作用于全局作用域或函数作用域中
• const 不可以重复声明而var可以重复声明
• const 声明的变量不可以变量提升，而var声明的变量可以
• const 声明的是一个常量不可被改变，var声明的是一个变量可被改变
• const 不可以在变量声明后再赋值,var可再声明后再赋值

3.let与const 的相同与不同

相同:    

• let,const 都作用域块级作用域中
• let,const 都不可重复声明变量
• let,const 声明的变量都不会发生变量提升

不同点：

• let 声明的是一个变量可以被读取和更改，而const声明的是一个变量只可读取不可被改变
• let 可再声明后再赋值，const 不可以在变量声明后再赋值