var、let 和 const 区别

名称	var	let	const
块作用域		✔	✔
全局属性	✔
变量提升	✔
暂时性死区		✔	✔
重复申明	✔
必须初始化			✔
不可修改值			✔

var 与 let 比较

• var 与 let 都拥有 全局作用域、 函数作用域 ，let 还有 块级作用域；

// 全局作用域
var var_a = 1;
let let_a = 1;

// 函数作用域
function () {
 var var_b = 2;
 let let_b = 2;
}

// 块级作用域
{
  var var_c = 3
  let let_c = 3
}
console.log(var_c) // 1
console.log(let_c) // let_c is not defined

• var 的全局属性会添加给 window，未申明直接赋值也会挂在 window，let 不会；

var a = 1
b = 1
let c = 1

console.log(window.a) // 1
console.log(window.b) // 1
console.log(window.c) // undefined

• 未申明先使用的变量，var 存在变量提升，let 存在暂时性死区；

console.log(a) // undefined
console.log(b) // Cannot access 'b' before initialization
var a = 1
let b = 2

• 同一作用域里，var 可以重复申明，let 不行；

var a = 1
var a = 2
let b = 1
let b = 2 // SyntaxError: Identifier 'b' has already been declared

const 与 let 比较

const 与 let 类似，但必须初始化，并且不可修改；当初始值为引用类型时，引用类型内部的值可修改。

const a // SyntaxError: Unexpected token
const b = { c: 1 }
b = 1 // Assignment to constant variable
b.c = 2;
console.log(b) // { c: 2 }

应用场景

• 利用 let 块级作用域特性来写循环。

for (var index = 0; index < 5; index++) {
  setTimeout(() => console.log(index))
}
// 其输出结果：5 5 5 5 5

for (let index = 0; index < 5; index++) {
  setTimeout(() => console.log(index))
}
// 其输出结果：0 1 2 3 4

• 利用 const 对前端常用展示文本统一管理，即防止串改，也方便修改。

// constant.js 文件
export const TITLE = '我是标题'
export const AUTHOR = '作者'

// 任意文件引入使用
import { TITLE, AUTHOR } from 'constant.js'