[譯]ES6提示和技巧，使您的代碼更清晰，更短，更容易閱讀

原文地址:ES6 tips and tricks to make your code cleaner, shorter, and easier to read!

模板字面量(Template literals)

模板字面量比之前更容易處理字符串。以'開頭，而且可使用${variable}插入變量。比較這兩行代碼：

這使得事情變得更簡單，代碼更容易閱讀。你能夠在花括號內放置任何東西：變量、方程式或函數調用。我將在本文的示例中使用這些。

塊做用域語法(Syntax Block scoping)

JavaScript一直是函數做用域，這就是爲何將整個JavaScript文件包裝在一個空的當即調用函數表達式（IIFE）中變得很廣泛的緣由。這樣作是爲了隔離文件中的全部變量，所以沒有可變衝突。

如今，咱們有塊做用域和兩個綁定到塊的新變量聲明。

Let聲明

這相似於var但有一些明顯的差別。由於它是塊做用域，因此能夠聲明具備相同名稱的新變量而不影響外部變量。

由於它受限於一個塊做用域，它解決了這個經典的面試問題： 「輸出是什麼，你將如何讓它像你指望的那樣工做？」

在這種狀況下，它輸出 5 5 5 5 5，由於變量 i在每次迭代時都會發生變化。

若是您將var換爲let那麼一切都會改變。如今，每一個循環建立一個新的塊做用域，其中i的值綁定到該循環。

var和 let之間的另外一個區別是 let不會提高而 var會。

因爲其更嚴格的範圍和更可預測的行爲，有些人會說應該使用 let而不是 var，除非特別須要提高或更寬鬆的 var聲明範圍。

const

若是你想在以前在JavaScript中聲明一個常量變量，那麼一般會在塊上方命名變量。可是，這不會保護變量-它只是讓其餘開發人員知道它是一個常量不該該被更改。

如今有const聲明。

const不會使變量成爲不可變的，只是鎖定其賦值。若是您具備複雜的賦值（對象或數組），則仍能夠修改該值。

塊做用域函數的問題

如今指定函數聲明綁定到塊做用域。

當您在 if語句中聲明一個函數時會出現問題。

考慮一下：

在ES6以前，兩個函數聲明都會被提高，不管 something是什麼結果都是 'I didn\'t pass'。 如今咱們獲得了 'ReferenceError'，由於 baz它始終受塊範圍的約束。

Spread

ES6引入了 ...運算符，稱爲「擴展運算符」。它有兩個主要用途：將數組或對象擴展到新數組或對象，以及將多個參數鏈接到數組中。

第一個用例是你可能最常遇到的用例，因此咱們先看一下。

這對於將一組變量傳遞給數組中的函數很是有用。

還能夠擴展對象，將每一個鍵值對輸入到新對象中。（對象spread實際上在提案的第4階段，將在ES2018正式發佈。它僅在Chrome 60或更高版本，Firefox 55或更高版本以及Node 6.4.0或更高版本支持）

擴展運算符的另外一個特性是建立一個新的數組或對象。下面的示例爲其建立了一個新數組b，但c只引用了相同的數組。

第二個用例是將變量收集到一個數組中。當您不知道有多少參數傳遞給函數時，這很是有用。

默認參數(Default Parameters)

如今可使用默認參數定義函數。使用默認值初始化缺失值或未定義值。請注意 - 由於null和false值被強制爲0。

默認值能夠不只僅是值 - 它們也能夠是表達式或函數。

解構(Destructuring)

解構是將等號的左側的數組或對象拆開的過程。數組或對象能夠來自變量、函數或方程式。

使用對象解構，能夠在花括號內列出對象的鍵以提取該鍵值對。

有時，您但願提取值，將它們分配給新變量。這是使用等號左側的 'key：variable'匹配完成的。

對象解構還能夠作得是容許爲多個變量賦值。

對象字面量和簡明參數

當您從變量建立對象字面量時，ES6容許您省略key（若是它與變量名稱相同）。

這也能夠與解構結合使用，使您的代碼更簡單，更清晰。

它還能夠用於解構傳遞給函數的對象。方法1和方法2是在ES6以前完成它的方法，方法3使用解構和簡明參數。

使用ES6，咱們能夠提取 age,name,company無需額外的變量聲明。

動態屬性名稱

ES6增長了使用動態分配的鍵建立或添加屬性的功能。

箭頭函數

箭頭函數有兩個主要方面：結構和this綁定。

它們具備比傳統函數更簡單的結構，由於它們不須要function關鍵字，而且它們自動返回箭頭以後的任何內容。

若是函數須要的不只僅是簡單的計算，那麼可使用花括號，函數返回從塊做用域返回的任何內容。

箭頭函數最有用的地方之一是數組函數，如 .map 、.forEach或 .sort。

除了具備更短的語法以外，它還修復了 this綁定行爲引發的問題。具備預ES6功能的修復程序是存儲 this引用，一般做爲 self變量。

必須這樣作，由於 this綁定是動態的。這意味着事件監聽器裏的 this和 doSomething內部的 this不會引用相同的東西。

在箭頭函數內部，this綁定是詞法，不是動態的。這是箭頭函數的主要設計特徵。

雖然詞法this綁定可能很棒，但有時候這並非想要的。

當咱們執行 a.oneThing(6)時， this.otherThing( b )引用失敗，由於 this沒有指向對象 a，而是指向箭頭函數塊做用域。若是您使用ES6語法重寫以前的代碼，請注意這一點。

for … of 循環

ES6添加了一種迭代數組中每一個值的方法。這與for ... in循環鍵/索引的現有循環不一樣。

使用 for … of循環能夠省去每一個循環內部添加 let val = a[idx]。

Arrays, strings, generators and collections均可以在標準JavaScript中迭代，普通對象一般沒法迭代除非爲它定義了迭代器。

數字字面量

ES5代碼很好地處理了十進制和十六進制數字格式，但未指定八進制格式。事實上，它在嚴格模式下被主動禁止。

ES6添加了一種新格式，o在初始化後添加一個0聲明數字爲八進制的數字。還添加了二進制格式。

更多…

本文只是一個簡單的引導，更多詳細內容請閱讀請閱讀Kyle Simpson 關於ES6 你所不知道的JavaScript一書