[譯]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一書