一、字面量的增強

ES6中對 對象字面量 進行了增強，稱之為 Enhanced object literals（增強對象字面量）。

字面量的增強主要包括下面幾部分：

• 屬性的簡寫：Property Shorthand
• 方法的簡寫：Method Shorthand
• 計算屬性名：Computed Property Names

var name = "why" var age = 18var obj = {// 1.property shorthand(屬性的簡寫)name,age,// 2.method shorthand(方法的簡寫)foo: function() {console.log(this)},bar() {console.log(this)},baz: () => {console.log(this)},// 3.computed property name(計算屬性名)[name + 123]: 'hehehehe' }obj.baz() obj.bar() obj.foo()// obj[name + 123] = "hahaha" console.log(obj)

二、解構Destructuring

ES6中新增了一個從數組或對象中方便獲取數據的方法，稱之為解構Destructuring。

我們可以劃分為：數組的解構和對象的解構。

數組的解構：

• 基本解構過程
• 順序解構
• 解構出數組
• 默認值
  
  對象的解構：
• 基本解構過程
• 任意順序
• 重命名
• 默認值
  

三、解構的應用場景

解構目前在開發中使用是非常多的：

• 比如在開發中拿到一個變量時，自動對其進行解構使用；
• 比如對函數的參數進行解構；
  

四、let/const基本使用

在ES5中我們聲明變量都是使用的var關鍵字，從ES6開始新增了兩個關鍵字可以聲明變量：let、const
let、const在其他編程語言中都是有的，所以也并不是新鮮的關鍵字；但是let、const確實給JavaScript帶來一些不一樣的東西；

let關鍵字：

• 從直觀的角度來說，let和var是沒有太大的區別的，都是用于聲明一個變量

const關鍵字：

• const關鍵字是constant的單詞的縮寫，表示常量、衡量的意思；

• 它表示保存的數據一旦被賦值，就不能被修改；
  

• 但是如果賦值的是引用類型，那么可以通過引用找到對應的對象，修改對象的內容；
  

注意：另外let、const不允許重復聲明變量；

五、let/const作用域提升

let、const和var的另一個重要區別是作用域提升：

• 我們知道var聲明的變量是會進行作用域提升的；
• 但是如果我們使用let聲明的變量，在聲明之前訪問會報錯；
  
  那么是不是意味著foo變量只有在代碼執行階段才會創建的呢？
  答：不是。
  我們可以看一下ECMA262對let和const的描述；
• 這些變量會被創建在包含他們的詞法環境被實例化時，但是是不可以訪問它們的，直到詞法綁定被求值；
  
  從上面我們可以看出，在執行上下文的詞法環境創建出來的時候，變量事實上已經被創建了，只是這個變量是不能被訪問的。
• 那么變量已經有了，但是不能被訪問，是不是一種作用域的提升呢？
• 作用域提升：在聲明變量的作用域中，如果這個變量可以在聲明之前被訪問，那么我們可以稱之為作用域提升；
• 在這里，它雖然被創建出來了，但是不能被訪問， 所以可以認為let、const沒有進行作用域提升，但是會在解析階段被創建出來。

六、Window對象添加屬性

我們知道，在全局通過var來聲明一個變量，事實上會在window上添加一個屬性：

• 但是let、const是不會給window上添加任何屬性的。

那么我們可能會想這個變量是保存在哪里呢？
答：變量被保存到VariableMap中
也就是說我們聲明的變量和環境記錄是被添加到變量環境中的：

• 但是標準有沒有規定這個對象是window對象或者其他對象呢？
• 其實并沒有，那么JS引擎在解析的時候，其實會有自己的實現；
• 比如v8中其實是通過VariableMap的一個hashmap來實現變量的存儲的。
• 那么window對象呢？而window對象是早期的GO對象，在最新的實現中其實是瀏覽器添加的全局對象，并且一直保持了window和var之間值的相等性；

七、var沒有塊級作用域

在我們前面的學習中，JavaScript只會形成兩個作用域：全局作用域和函數作用域。

ES5中放到一個代碼中定義的變量，外面是可以訪問的：

八、let/const有塊級作用域

在ES6中新增了塊級作用域，并且通過let、const、function、class聲明的標識符是具備塊級作用域的限制的：

但是我們會發現函數擁有塊級作用域，但是外面依然是可以訪問的：

• 這是因為引擎會對函數的聲明進行特殊的處理，允許像var那樣進行提升；

九、塊級作用域的應用

我來看一個實際的案例：獲取多個按鈕監聽點擊：

十、暫時性死區

在ES6中，我們還有一個概念稱之為暫時性死區：

• 它表達的意思是在一個代碼中，使用let、const聲明的變量，在聲明之前，變量都是不可以訪問的；
• 我們將這種現象稱之為 temporal dead zone（暫時性死區，TDZ）；
  
  

十一、var、let、const的選擇

那么在開發中，我們到底應該選擇使用哪一種方式來定義我們的變量呢？

對于var的使用：

• 我們需要明白一個事實，var所表現出來的特殊性：比如作用域提升、window全局對象、沒有塊級作用域等都是一些歷史遺留問題；
• 其實是JavaScript在設計之初的一種語言缺陷；
• 當然目前市場上也在利用這種缺陷出一系列的面試題，來考察大家對JavaScript語言本身以及底層的理解；
• 但是在實際工作中，我們可以使用最新的規范來編寫，也就是不再使用var來定義變量了；

對于let、const：

• 對于let和const來說，是目前開發中推薦使用的；
• 我們會優先推薦使用const，這樣可以保證數據的安全性不會被隨意的篡改；
• 只有當我們明確知道一個變量后續會需要被重新賦值時，這個時候再使用let；
• 這種在很多其他語言里面也都是一種約定俗成的規范，盡量我們也遵守這種規范；

總結：

var: 有作用域提升，沒有塊級作用域，聲明的變量可以重復定義
let、const： 沒有作用域提升，有塊級作用域，聲明的變量不可以重復定義
在全局通過var來聲明一個變量，會在window上添加一個屬性，但是let、const是不會給window上添加任何屬性的。

總結

以上是生活随笔為你收集整理的ES6（一）——字面量的增强、解构、let/const、块级作用域、暂时性死区的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。