【前端知识之JS】var let const之间的区别

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍 var let const之间的区别。

---

一、var

• var声明的变量即是全局变量，也是顶层变量；
• var声明的变量存在变量提升的情况；
• 使用var可以对变量进行多次声明，后面声明的变量会覆盖前面的声明；
• 在函数中使用var声明变量的时候，该变量是局部的；
• 如果在函数中不使用var，该变量是全局的。

// var声明的变量即是全局变量，也是顶层变量；
var a = 30;
console.log(window.a) //30

// var声明的变量存在变量提升的情况；
console.log(b);
var b = 30; //undiefined

// 使用var可以对变量进行多次声明，后面声明的变量会覆盖前面的声明；
var c = 23;
var c = 33;
console.log(c); //33

// 在函数中使用var声明变量的时候，该变量是局部的；
var d = 40;
function fun(){
    var d = 30;
}
fun();
console.log(d); //40

// 如果在函数中不使用var，该变量是全局的。
var e = 40;
function fun2(){
    e = 30;
}
fun2();
console.log(e); //30

二、let

• let是ES6新增的命令，用来声明变量；
• let命令只在所在的代码块内有效；
• let不存在变量提升；
• 只要块级作用域内存在let命令，这个区域就不再受外部影响；
• let不允许在相同作用域中重复声明；

// let命令只在所在的代码块内有效；
{
    let a = 30
}
// console.log(a);  //Uncaught ReferenceError: a is not defined
let b = 50;
console.log(b);

// let不存在变量提升；
// console.log(c)  //Uncaught ReferenceError: Cannot access 'c' before initialization
let c = 30;

// 只要块级作用域内存在let命令，这个区域就不再受外部影响；
var d = 123;
if(true){
    // d = 'abc';  // Uncaught ReferenceError: Cannot access 'd' before initialization
    let d;
}

// let不允许在相同作用域中重复声明
// let b = 80; //Uncaught SyntaxError: Identifier 'b' has already been declared

三、const

• const声明一个只读的常量，一旦声明，常量的值就不能改变;
• const一旦声明变量，就必须立即初始化，不能留到以后赋值；
• 如果用之前var或者let声明过变量，再用const声明会报错；
• const实际上是保证变量指向的内存地址不改变，如果是简单数据类型，就是值，如果是复杂数据类型，内存地址不变即可。

// const声明一个只读的常量，一旦声明，常量的值就不能改变;
const a = 10;
// a = 20   //Uncaught TypeError: Assignment to constant variable


//  const一旦声明变量，就必须立即初始化，不能留到以后赋值；
// const b; //Uncaught SyntaxError: Missing initializer in const declaration


// 如果用之前var或者let声明过变量，再用const声明会报错；
var c = 10;
let d = 20;
// const c = 20; //Uncaught SyntaxError: Identifier 'c' has already been declared
// const d = 10;  //Uncaught SyntaxError: Identifier 'd' has already been declared


// const实际上是保证变量指向的内存地址不改变
const foo = {}
foo.prop = 123;
// foo = {}; // Uncaught TypeError: Assignment to constant variable

四、区别

操作	var	let	const
变量提升	存在	不存在	不存在
暂时性死区	不存在	存在	存在
块级作用域	不存在	存在	存在
重复声明	可以	不可以	不可以
修改声明的变量	可以	可以	不可以
使用	避免使用	大多数使用	最好使用