let和const的引入會對js編程帶來哪些改變？

塊級做用域let&const

js給人的感受每每是用起來比較簡單，語法上寬鬆。這給開發者帶來便利的同時也形成了一些違反思惟習慣的彆扭之處。es6一些新的特性的引入，能夠認爲試圖糾正或補齊js最初設計的缺陷。

咱們一塊兒看一下let和const的引入對現有的編碼方式會帶來哪些影響。

變量聲明提高

衆所周知，變量聲明提高是js中很是最重要的特性之一。也是面試中常被問到的點。但對於js新人來講可能以爲難以理解，甚至違反直覺。變量沒有聲明以前不該該能訪問啊！

console.log(v1)// undefined
var v1 = 1
console.log(v1) // 1

上面這段代碼對於新手來講，undefined的結果是難以理解的。（心想不該該報錯麼？）

console.log(v1) // Uncaught ReferenceError: v1 is not defined
let v1 = 1
console.log(v1) // 1

使用let以後從邏輯上是符合開發者的思惟習慣的 未聲明以前使用就是會報引用錯誤，在聲明以後訪問變量的值正常返回變量值。

let和const聲明的變量是不會被提高的，真正實現了使用前聲明，聲明後再使用。

全局變量不會變成window的屬性

之前在全局做用域下聲明變量時，全局變量天然而然的成爲了全局對象的屬性如：

var a = 1
console.log(window.a === a) // true

對於這種狀況前端開發工程師早已爛熟於心了。let和 const的引入一樣改變了這種現象：

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

做用域變量和對象屬性分得清清楚楚。

for循環沒有陷阱

看下這個前端圈用濫的面試題：

for(var i = 0; i < 5; i++){
    setTimeout(function(){
        console.log(i)
    }, 0)
}
console.log(i)

這題當然難不倒老鳥們。但新手們十有八九會答錯。0 1 2 3 4 5。

是的，從常理來講就應該是這樣的，只不過js中缺乏塊級做用域的概念，var聲明的變量天然而然從for循環的代碼塊外溢。

let和const引入後，每次循環都會建立特定於當次循環做用域的局部變量。換句話說每次循環都有與之綁定的i值。執行完成以後即銷燬。不會外溢到外層做用域。下面的代碼是符合預期的：

for(let i = 0; i<5; i++){
    setTimeout(function(){
        console.log(i) //0 1 2 3 4
    }, 0)
}
console.log(i) //  ReferenceError: i is not defined

最佳實踐

爲了不代碼中出現意外驚喜，平常coding中首先是使用const，能夠有效避免變量被意外修改。若是變量有被修改的需求首選使用 let。var的使用盡可能減小使用。