寫在文章前面

這篇文章翻譯自ES6 tips and tricks to make your code cleaner, shorter, and easier to read!. 文章就代碼整潔方面對es6進行了總結。如有錯誤歡迎指出。

template literals 模板字符串

模板字符串使字符串的使用變得比以前更簡單了，他們以反引號開始（`），并且能過使用${變量}來插入變量。我們來比較一下下面兩行代碼。

var fName = 'Peter', sName = 'Smith', age = 43, job= 'photographer';var a = 'Hi, I/'m ' + fName + ' ' + sName + ', I/'m ' + age + ' and work as a ' + job + '.';var b = `Hi, I'm ${ fName } ${ sName }, I'm ${ age } and work as a ${ job }.`;

一切都變得很美好了是不是，代碼更易讀了是不是？你可以在大括號內放入任何東西：變量，等式，或者函數的調用。 我將會在后面的整個文章的示例中使用這些方式。

塊級作用域語法

JavaScript是使用函數作用域的，這就是為什么我們是為什么我們越來越頻繁的使用匿名的立即執行函數表達式（iife）來實現整個JavaScript文件的封裝。我們這么做是為了把所有的變量隔離在文件內從而避免變量沖突。
現在我們有了塊級作用域和兩個嶄新的塊級作用域的變量聲明

let declaration let命令

這個命令和var很相似但卻又有著顯著的不同。因為他是有塊級作用域的，聲明一個相同名字的新變量可以完全不影響外部的變量。

var a = 'car' ;{  let a = 5;  console.log(a) // 5}console.log(a) // car

因為他是被限制在塊級作用域的，他解決了那道非常經典的面試題：“下面這個代碼的輸出是什么，如何修改讓他運行之后成為你想的那個樣子？”

for (var i = 1; i < 5; i++){  setTimeout(() => { console.log(i); }, 1000);}

這個例子中，輸出是“5 5 5 5 5”因為變量i在每次迭代中都會改變。

如果我們把var變為let,一切都變了。 現在，每次循環都會創建一個全新的塊級作用域吧i限制在當前的循環，他可以理解為這樣：

{let i = 1; setTimeout(() => { console.log(i) }, 1000)} {let i = 2; setTimeout(() => { console.log(i) }, 1000)} {let i = 3; setTimeout(() => { console.log(i) }, 1000)} {let i = 4; setTimeout(() => { console.log(i) }, 1000)} {let i = 5; setTimeout(() => { console.log(i) }, 1000)} 

var 和 let的另外一個區別是 let 不會像 var一樣被變量提升

{   console.log(a); // undefined  console.log(b); // ReferenceError  var a = 'car';  let b = 5;}

因為他有更為局限的作用域，以及更能被預測的行為，因此一些人甚至認為你應該使用let來代替var, 除非當你真的特別需要變量提升或者更寬松的作用域范圍，你再使用var