如題被芳，為什么要用 let 和 const 呢襟企？
在開始這個(gè)話題之前肪获，我們先來通過以下的小例子了解一下 JavaScript 中 var 聲明及變量提升機(jī)制寝凌。
按照一般邏輯，變量應(yīng)該在聲明語句之后才可以使用孝赫，但在上面的代碼中较木，是聲明之前輸出foo的值，且這個(gè)值為undefined青柄，這就說明變量在聲明之前就已經(jīng)存在了伐债。為什么用var會(huì)出現(xiàn)這種問題呢？下次我們?cè)谟懻撝驴＿@里就是人們經(jīng)常說的變量提升峰锁，即變量可以在聲明之前使用，值為undefined双戳。我們console用let聲明的變量bar虹蒋，報(bào)錯(cuò)了，這就表示聲明之前飒货，變量bar是不存在的魄衅，這里就沒有變量提升的現(xiàn)象出現(xiàn)。為了糾正這種現(xiàn)象塘辅，讓大家更好的理解代碼晃虫，let命令改變了語法行為，它所使用的變量一定要在聲明之后使用扣墩，否則就會(huì)報(bào)錯(cuò)哲银。
1. let 命令
特性：
塊級(jí)聲明
不存在變量提升
不允許重復(fù)聲明
1.1 塊級(jí)聲明和不存在變量提升
塊級(jí)聲明是指某個(gè)變量只在相應(yīng)的作用域內(nèi)生效扛吞，外部是不可以訪問的。let 聲明的用法與 var相同荆责，不同的是不存在變量提升喻粹，在指定作用域生效。常見的塊級(jí)作用域:
- 函數(shù)內(nèi)部
function fn1 () {
let a = 5
if (true) {
let a = 10
}
console.log(a)
}
// fn1()
function fn2 () {
var b = 2
if (true) {
var b = 4
}
console.log(b)
}
// fn2()
- 塊中
{}
{
let a = 10
var b = 1
}
console.log(a) // ReferenceError: a is not defined
console.log(b) // 1
1.2 不允許重復(fù)聲明
let 不允許在相同作用域內(nèi)重復(fù)聲明同一個(gè)變量草巡。
// 報(bào)錯(cuò)：Identifier 'a' has already been declared at Object
function fn() {
let a = 10
var a = 1
}
// fn()
// 報(bào)錯(cuò)：Identifier 'a' has already been declared at Object
function fn1 () {
let a = 10
let a = 1
}
// fn1()
// 報(bào)錯(cuò)：Identifier 'a' has already been declared at Object
function fn2 (arg) {
let arg
}
// fn2()
2. const 命令
const 通常聲明的是一個(gè)只讀的常量，一旦聲明了型酥，其中的值是不能改變山憨，這就意味著聲明的這個(gè)常量必須是要賦值的。
// 值不能變
const S = 60
S = 120
// TypeError: Assignment to constant variable.
// 必須賦值
const M
// Missing initializer in const declaration
const 除了值不能變和只讀弥喉，其他的特性跟 let 是一樣的郁竟，同樣是塊級(jí)聲明、不存在變量提升和不允許重復(fù)聲明由境。在這里需要注意一點(diǎn)的是棚亩，聲明常量的時(shí)候要必須確保這個(gè)值是固定不變的。
總結(jié)
回到問題：為什么要用 let 和 const 虏杰？
新語法的出現(xiàn)讥蟆，不僅使得我們更容易的理解JS，而且減少很多奇奇怪怪的問題出現(xiàn)纺阔。塊級(jí)聲明瘸彤，可以很有效的避免了變量污染這個(gè)問題。
想繼續(xù)學(xué)習(xí)更多有關(guān)前端知識(shí)笛钝，可以關(guān)注我的公眾號(hào)质况。大家一起來學(xué)習(xí)如何快速掉頭發(fā)
