[譯]ES6提示和技巧,使您的程式碼更清晰,更短,更容易閱讀
模板字面量比以前更容易處理字串。以'開頭,並且可以使用 ${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
語句中宣告一個函式時會出現問題。
考慮一下:

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使用解構和簡明引數。

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 ofollow,noindex">你所不知道的JavaScript 一書