白話es6系列二：你真的會聲明變量嗎

maybe_009 發布于2019-08-23 16:04 / 1828人閱讀

摘要：新增了二個聲明變量的關鍵字，和，再加上之前的，這樣聲明變量就有三個關鍵字了，大有三國鼎立之勢。當的值為時，該變量不會被聲明并初始化。如果上面的那個循環中用聲明變量，那么循環完了，變量也就隨時銷毀，不能再被訪問。

ES6新增了二個聲明變量的關鍵字，let和const，再加上ES6之前的var，這樣聲明變量就有三個關鍵字了，大有三國鼎立之勢。那到底用哪個來聲明變量呢？

var

首先，得說說var的特殊行為，變量提升，來看一個例子：

var condition = false

if (condition) {
  var value = "red"
  console.log(value)
} else {
  // value 在這里可以訪問，值為undefined
  console.log(value)
}

在上面代碼中，即使condition為false，變量value也是存在的，相當于如下定義：

var condition = false
var value

if (condition) {
  value = "red"
  console.log(value)
} else {
  // value 在這里可以訪問，值為undefined
  console.log(value)
}

就是說，使用var關鍵字聲明的變量，無論其實際聲明位置在何處，都會被視為聲明于所在函數的頂部（如果聲明不在函數內，則視為在全局作用域的頂部），這就是變量提升。

對這種特殊行為，如果你不理解，就很可能導致bug。我們來看一個循環的例子：

for (var i = 0; i < 6; i++) {
  console.log(i)
}

// i 在這里依舊可以訪問
console.log(i)  // 6

for循環完了，已經不再需要變量i，但是它依舊可以被訪問。

所以，ES6引入了塊級作用域，讓變量的生命周期更加可控，于是，let出現了。

塊級聲明-let

我們來看看用let聲明的代碼：

var condition = false

if (condition) {
  let value = "red"
  console.log(value)
} else {
  // value 在這里不可以訪問，會報錯
  console.log(value)
}

由于變量value聲明使用的是let，所以就沒有被提升到函數定義的頂部，變量value在if代碼塊外部是無法訪問的。當condition的值為false 時，該變量不會被聲明并初始化。
如果上面的那個for循環中用let聲明變量i，那么循環完了，變量i也就隨時銷毀，不能再被訪問。

常量聲明-const

使用const聲明的變量會被認為是常量（constant），意味著它們的值在被設置完成后就不能再被改變，常量聲明與let聲明一樣，都是塊級聲明。
來看個小例子：

const num = 12
num = 13 // 報錯

const obj = { name: "moddx", age: 28 };
obj.age = 26 // 正常

上面用const聲明了一個變量num，當重新給其賦值時會報錯，而變量obj初始化之后，再將其age屬性改變，不會報錯，因為對象是一個引用類型，其指向的內存中的地址是沒有被改變的，除非將其重新賦值給一個新對象，就會報錯，如下：

const obj = { name: "moddx", age: 28 };
obj = { name: "foo" } // 報錯

總結

說了這么多，那到底時候用什么關鍵字來聲明呢？就沒有一個標準或者約定俗成的習慣嗎？
目前，被廣泛認可的變量聲明方式是：默認情況下應當使用const，當你確定聲明的變量需要改變時，用let聲明。其依據是大部分變量在初始化之后都不應當被修改，因為預期外的改動是bug的源頭之一。（那var呢？好吧，基本被拋棄了）

云服務器 GPU云服務器 es6-系列聲明變量 python變量聲明 Ruby變量聲明

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/102676.html

深入理解JavaScript

摘要：深入之繼承的多種方式和優缺點深入系列第十五篇，講解各種繼承方式和優缺點。對于解釋型語言例如來說，通過詞法分析語法分析語法樹，就可以開始解釋執行了。 JavaScript深入之繼承的多種方式和優缺點 JavaScript深入系列第十五篇，講解JavaScript各種繼承方式和優缺點。寫在前面本文講解JavaScript各種繼承方式和優缺點。但是注意：這篇文章更像是筆記，哎，再讓我...

myeveryheart 2019-08-22 13:46 評論0 收藏0
白話es6系列一：Array.of()和Array.from()

摘要：更重要的是，代碼意圖也直觀數組長度，每一項按照約定的規則進行初始化。上面代碼創建了一個長度為的數組其中的項為數字。的強大不止于此，它還能接受一個映射函數上面代碼中，被直接傳遞給方法，從而將它包含的值轉換成了數組。 es6新增了二種方法：Array.of()和Array.from()，它們有什么用途呢？在平時的開發中能給我們帶來什么方便呢？本篇將從一個創建數組的小問題開始，逐步揭開它們的...

newtrek 2019-08-23 15:36 評論0 收藏0
你真的懂switch嗎？聊聊switch語句中的塊級作用域

摘要：最近在代碼中不小心不規范的，在里面定義了塊級變量，導致頁面在某些瀏覽器中出錯，本文討論以下語句中的塊級作用域。而與無關每一個并不會構成一個獨立的塊級作用域。 ??最近在代碼中不小心不規范的，在switch里面定義了塊級變量，導致頁面在某些瀏覽器中出錯，本文討論以下switch語句中的塊級作用域。 switch語句中的塊級作用域 switch語句中的塊級作用域可能存在的問題規范和檢...

zone 2019-08-23 15:32 評論0 收藏0
你真的懂switch嗎？聊聊switch語句中的塊級作用域

摘要：最近在代碼中不小心不規范的，在里面定義了塊級變量，導致頁面在某些瀏覽器中出錯，本文討論以下語句中的塊級作用域。而與無關每一個并不會構成一個獨立的塊級作用域。 ??最近在代碼中不小心不規范的，在switch里面定義了塊級變量，導致頁面在某些瀏覽器中出錯，本文討論以下switch語句中的塊級作用域。 switch語句中的塊級作用域 switch語句中的塊級作用域可能存在的問題規范和檢...

pkwenda 2019-08-02 14:23 評論0 收藏0