一、變量聲明const和let
在ES6之前，我們都是用 var關鍵字聲明變量。無論聲明在何處，都會被視為聲明在函數的最頂部(不在函數的最頂部就在全局作用域的最頂部)。這就是函數變量提升例如：
不用關心bool是否為true or false。實際上，無論如何str都會被創建聲明。(如果未聲明,返回的是null)
而es6之后，我們通常用let和const來聲明。let表示變量、const表示常量，let和const都是塊級作用域。如何理解這個塊級作用域？
- 在一個函數內部
- 在一個代碼塊內部
通常來說{}大括號內的代碼塊即為let和const的作用域。
let 的作用域是在它所在當前代碼塊，但不會被提升到當前函數的最頂部。
const 聲明的變量都會被認為是常量，表示它的值被設置完成后就不能再修改了。
如果const的是一個對象，對象所包含的值是可以被修改的。就是對象所指向的地址沒有變就行。
二、模板字符串
es6模板字符簡直是開發者的福音，解決了es5在字符串功能上的痛點。
2.1 基本的字符串格式化
將表達式嵌入字符串中進行拼接。用${}來界定。
//ES5
var way = 'String'
console.log('ES5:' + way)
//ES6
let way = 'String Template'
console.log(`ES6: ${way}`)
2.2 多行字符串拼接
在ES5時我們通過反斜杠()來做多行字符串或者字符串一行行拼接。ES6反引號(``)直接搞定。
2.3 更多方法
三、函數新特性
3.1 函數默認參數
在ES5我們給函數定義參數默認值是怎么樣？
function action(num) {
num = num || 200;
//當傳入num時，num為傳入的值
//當沒傳入參數時，num即有了默認值200
return num;
}
但細心觀察的同學們肯定會發現，num傳入為0的時候就是false，但是我們實際的需求就是要拿到num = 0，此時num = 200 明顯與我們的實際想要的效果明顯不一樣。
ES6為參數提供了默認值。在定義函數時便初始化了這個參數，以便在參數沒有被傳遞進去時使用。
function action( num = 200 ){
console.log(num)
}
action(0); //0
action(); //200
action(300) //300
3.2 箭頭函數
ES6很有意思的一部分就是函數的快捷寫法。也就是箭頭函數。
箭頭函數最直觀的三個特點：
- 不需要 function 關鍵字來創建函數
- 省略 return 關鍵字
- 繼承當前上下文的 this 關鍵字
說個小細節。
當你的函數有且僅有一個參數的時候，是可以省略掉括號的。當你函數返回有且僅有一個表達式的時候可以省略{} 和 return。例如：
var people = name => 'hello' + name
作為參考：
來道筆試題：把下面ES5代碼簡化重構成ES6方式
四、拓展的對象功能
4.1 對象初始化簡寫
ES5我們對於對象都是以鍵值對的形式書寫，是有可能出現鍵值對重名的。例如：
ES6 同樣改進了為對象字面量方法賦值的語法。ES5為對象添加方法：
ES6 對象提供了 Object.assign() 這個方法來實現淺復制。
Object.assign() 可以把任意多個源對象自身可枚舉的屬性拷貝給目標對象，然后返回目標對象。第一參數即為目標對象。在實際項目中，我們為了不改變源對象。一般會把目標對象傳為{}。
五、更方便的數據訪問--解構
數組和對象是JS中最常用也是最重要表示形式。為了簡化提取信息，ES6新增了解構，這是將一個數據結構分解為更小的部分的過程。
ES5我們提取對象中的信息形式如下：
是不是覺得很熟悉，沒錯，在ES6之前我們就是這樣獲取對象信息的，一個一個獲取。現在，解構能讓我們從對象或者數組里取出數據存為變量，例如：
面試題：
六、Spread Operator 展開運算符
ES6中另外一個好玩的特性就是Spread Operator 也是三個點兒
...接下來就展示一下它的用途。
組裝對象或者數組：
對於 Object 而言，還可以用於組合成新的 Object 。(ES2017 stage-2 proposal) 當然如果有重復的屬性名，右邊覆蓋左邊。
七、import 和 export
7.1 import導入模塊、export導出模塊
導入的時候有沒有大括號的區別是什么。下面是總結：
- 當用
export default people導出時，就用import people導入（不帶大括號）。 - 一個文件里，有且只能有一個export default。但可以有多個export。
- 當用export name 時，就用
import{name}導入（記得帶上大括號）. - 當一個文件里，既有一個export default people, 又有多個export name 或者 export age時，導入就用
import people,{name,age}。 - 當一個文件里出現n多個 export 導出很多模塊，導入時除了一個一個導入，也可以用
import * asexample
八、 Promise
在promise之前代碼過多的回調或者嵌套，可讀性差、耦合度高、擴展性低。通過Promise機制，扁平化的代碼機構，大大提高了代碼可讀性；用同步編程的方式來編寫異步代碼，保存線性的代碼邏輯，極大的降低了代碼耦合性而提高了程序的可擴展性。
說白了就是用同步的方式去寫異步代碼。
發起異步請求：
八、 Generators
生成器（ generator）是能返回一個迭代器的函數。生成器函數也是一種函數，最直觀的表現就是比普通的function多了個星號*，在其函數體內可以使用yield關鍵字，有意思的是函數會在每個yield后暫停。
這里生活中有一個比較形象的例子。咱們到銀行辦理業務時候都得向大廳的機器取一張排隊號。你拿到你的排隊號，機器並不會自動為你再出下一張票。也就是說取票機“暫停”住了，直到下一個人再次喚起才會繼續吐票。
OK。說說迭代器。當你調用一個generator時，它將返回一個迭代器對象。這個迭代器對象擁有一個叫做next的方法來幫助你重啟generator函數並得到下一個值。next方法不僅返回值，它返回的對象具有兩個屬性：done和value。value是你獲得的值，done用來表明你的generator是否已經停止提供值。繼續用剛剛取票的例子，每張排隊號就是這里的value，打印票的紙是否用完就這是這里的done。
那生成器和迭代器又有什么用處呢？
圍繞着生成器的許多興奮點都與異步編程直接相關。異步調用對於我們來說是很困難的事，我們的函數並不會等待異步調用完再執行，你可能會想到用回調函數，（當然還有其他方案比如Promise比如Async/await）。
生成器可以讓我們的代碼進行等待。就不用嵌套的回調函數。使用generator可以確保當異步調用在我們的generator函數運行一下行代碼之前完成時暫停函數的執行。
那么問題來了，咱們也不能手動一直調用next()方法，你需要一個能夠調用生成器並啟動迭代器的方法。就像這樣子的：
生成器與迭代器最有趣、最令人激動的方面，或許就是可創建外觀清晰的異步操作代碼。你不必到處使用回調函數，而是可以建立貌似同步的代碼，但實際上卻使用 yield 來等待異步操作結束。
十、 async 函數
es6引入了 async 函數，使得異步操作變得更加方便。
async 函數是什么？一句話，它就是 Generator 函數的語法糖。
一比較就會發現，async函數就是將 Generator 函數的星號（*）替換成async，將yield替換成await，僅此而已。
async函數對 Generator 函數的改進，體現在以下四點：
-
內置執行器
-
更好的語義
-
更廣的適用性
-
返回值是 Promise
十一、 Class基本語法
JavaScript 語言中，生成實例對象的傳統方法是通過構造函數：
es6 提供了更接近傳統語言的寫法，引入了 Class（類）這個概念，作為對象的模板。通過class關鍵字，可以定義類。
基本上，es6 的%(red)[class]可以看作只是一個語法糖，它的絕大部分功能，es5 都可以做到，新的%(red)[class]寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。上面的代碼用 es6 的%(red)[class]改寫，就是下面這樣。
上面代碼定義了一個“類”，可以看到里面有一個constructor方法，這就是構造方法，而this關鍵字則代表實例對象。也就是說，es5 的構造函數Point，對應 es6 的Point類的構造方法。
Point類除了構造方法，還定義了一個toString方法。注意，定義“類”的方法的時候，前面不需要加上function這個關鍵字，直接把函數定義放進去了就可以了。另外，方法之間不需要逗號分隔，加了會報錯。
es6 的類，完全可以看作構造函數的另一種寫法。
文章內容源自：https://mp.weixin.qq.com/s/TmtZBe38dFU-_AqLFd7t0g