帶你重學ES6 | var、let和const的區別

一、var

在沒出現 let 和 const 以前，咱們定義變量只能用 var。可是用 var 定義變量一般有不少的問題，就是咱們常說的變量提高，例如：

if (false) {
 var a = 1; } console.log(a); 複製代碼

若是初學者第一次看這段代碼的時候，確定會以爲段代碼會報錯，由於 if 中的條件是 false，並無執行 var a = 1，因此最後應該報 a 沒有定義的錯誤，可是實際最後卻輸出了 undefined，這就是變量提高。 什麼是變量提高： MDN 是這麼說的：變量提高（Hoisting）被認爲是， Javascript 中執行上下文 （特別是建立和執行階段）工做方式的一種認識。在 ECMAScript® 2015 Language Specification 以前的 JavaScript 文檔中找不到變量提高（Hoisting）這個詞。不過，須要注意的是，開始時，這個概念可能比較難理解，甚至惱人。 這就沒了？對這就沒了！當看到的時候一樣有這個疑問，因此我在var 描述中找到了這麼一句話：變量聲明，不管發生在何處，都在執行任何代碼以前進行處理。 因此以上代碼能夠被翻譯成這樣：

var a;
if (false) {  a = 1; } console.log(a); 複製代碼

二、let

咱們先看一下 let 的幾大特性：

一、沒有聲明提高

咱們經過代碼來看一下：

if (false) {
 let a = 1; } console.log(a); 複製代碼

執行結果

欣喜若狂終於獲得了咱們想要的結果，報錯，a 沒有被定義。

二、重複聲明報錯

var a = 1;
let a = 2; 複製代碼

執行結果

哇塞，報錯了，顯示 a 已經被定義過了，這簡直是太友好了，終於不會一不當心就改變了全局變量，也終於避免了重複命名的危險。

三、不綁定全局做用域

let a = 1;
console.log(window.a); // undefined 複製代碼

根本沒有定義到全局上，主要仍是由於 let 是塊級做用域不是全局做用域。

三、const

在開發中 const 咱們通常是來定義常量，即不可更改的量，它的基本特性和 let 是差很少的。

const a = 1;
a = 3; 複製代碼

執行上述代碼時，會報錯，由於 const 定義的是常量，沒法進行修改。可是當 const 定義的是引用數據類型時：

const a = {
 value: 1, }; a.value = 2; console.log(a); // {value: 2} 複製代碼

感受有些打臉，但確實如此，這是由於 const 定義的實際是引用地址，它判斷是的引用地址是否發生變化，雖然改變了引用數據中的數據，可是它的引用地址並無發生變化，因此就能夠更改，可是這種方式仍是不提倡的。

後語

相關文章：

• 帶你重學ES6 | var、let和const的區別
• 帶你重學ES6 | Promsie
• 帶你重學ES6 | Generator
• 帶你重學ES6 | Async和Await
• 帶你重學ES6 | Set和Map
• 帶你重學ES6 | Symbol(不只僅只是一個新的數據類型)
• 帶你重學ES6 | Exprort(謹記輸出的都是變量)
• 帶你重學ES6 | proxy和defineProperty

以爲還能夠的，麻煩走的時候能給點個贊，你們一塊兒學習和探討！

還能夠關注個人博客但願能給個人github上點個Start，小夥伴們必定會發現一個問題，個人全部用戶名幾乎都與番茄有關，由於我真的很喜歡吃番茄❤️！！！

想跟車不迷路的小夥還但願能夠關注公衆號 前端老番茄 或者掃一掃下面的二維碼👇👇👇。

我是一個編程界的小學生，您的鼓勵是我不斷前進的動力，😄但願能一塊兒加油前進。

本文使用 mdnice 排版