第一節：什麼是ES6？
ES6是什麼？跟JavaScript有什麼關係？
JavaScrip由三部分組成：分別是ECMAScript,BOM和DOM.
1）由此看出，ECMAScript是JavaScript的組成部分，是JS的核心，描述了語言的基本語法（var、for、if、array等）和資料型別（數字、字串、布林、函式、物件（obj、[]、{}、null、未定義），ECMAScript是一套標準，定義了一種語言是什麼樣子。ECMAScript是一種由Ecma國際（前身為歐洲計算機制造商協會,英文名稱是European Computer ManufacturersAssociation）通過ECMA-262標準化的指令碼程式設計語言。
2）文件物件模型（DOM）：是HTML和XML的應用程式介面（API）。DOM把整個頁面規劃成由節點層級構成的文件。HTML和XML頁面的每個部分都是一個節點的衍生物。
DOM通過建立樹來表示文件，從而使開發者對文件的內容和結構具有空前的控制力。用DOM API可以輕鬆地刪除、新增、和替換節點（getElementById、childNodes、appendChild、innerHTML）
3）瀏覽器物件模型(BOM)對瀏覽器視窗進行訪問和操作。例如彈出新的瀏覽器視窗，移動、改變和關閉瀏覽器視窗，提供詳細的網路瀏覽器資訊（navigator object）,詳細的頁面資訊（location object）,詳細的使用者螢幕解析度資訊（screen object）,對cookie的支援等。BOM作為JS的一部分沒有相關標準的支援，每一個瀏覽器都有自己的實現。
ECMAScript的作用：
它定義了很重要的東西，包括：
語法（解析規則，關鍵字，語句，宣告，操作等），
型別 (布林型，數字，字串，物件等)
原型和繼承
內建物件和函式的標準庫（JSON,數字，陣列方法，物件內省的方法等）
2015年6月，ECMAScript6正式通過，成為國際標準。
2016年釋出ES7。
2017年Ecma 國際公佈了第八版的 ES8 (ECMAScript 2017)
ES8主要特點：
1、非同步函式:
用Promise處理Async函式的普遍流程
Function fetchData(url){
return fetch(url)
.then(request=>request.text())
.then(text=>){
return JSON.parse(text);
})
.catch(err => {
Console.log(‘Error:${err.stack}’);
});
使用ES8中新增的async和await關鍵字，我們可以利用全新的、與Co高度相似的語法來實現完全同步讀取。我們可以使用try / catch blocks和新的關鍵字來為特定功能分配非同步行為。在內部，Async功能與生成器的功能相同，但是卻不能轉換為Generator Functions。就像這樣：
可以使用以下的方式編寫ES2017中的Async函式：
Async function fetchData(url){
try{
let request = await fetch(url);
let text =await request.text();
return JSON.parse(text);
}
catch (err) {
console.log(`Error: ${err.stack}`);
}
}
非同步函式宣告：
Asyncfunction fooBar(){};
非同步函式表示式：
ConstfooBar = async function(){};
非同步方法定義：
Letobj = { async fooBar(){}};
非同步箭頭函式：
ConstfooBar = async () =>{};
2：共享記憶體和Atomics.
第二節：ES6新增了let關鍵字，幹嘛用的?
let 用來宣告變數。
不足一：
let 宣告的變數僅僅在自己的塊級作用域起作用 。
任何一對花括號（這玩意：{ }）中的語句都屬於一個塊，在花括號裡面用let定義的所有變數在花括號外都是不可見的，我們稱之為塊級作用域。
不足二
用var 宣告變數的時候會出現“變數提升”的現象。
變數提升———》 —》
對比一下兩段簡短的程式碼：var a = 2; 這句程式碼被拆分成兩部分：宣告var a ; 和 定義a = 2；而宣告部分被提升（看到了嗎？提升兩個字出現了）到了程式碼塊的前面，執行的時候自己挪到前面了，這就是“變數提升“，結果就是：先執行宣告，接著就執行alert(a)；變數a只是宣告還沒定義，就彈出了undefined了。
如果你用let這樣重寫剛剛那段程式碼：
用let關鍵字來定義a；這樣a在程式碼塊內就不會提升了。那為什麼又報錯了呢，因為用let宣告的變數，在其塊級作用域內是封閉的，是不會受到外面的全域性變數a影響的，並且要先宣告再使用，所以a的值即不是1（因為不受外面的影響），也不是undefined（因為先宣告後使用），更不是2，未宣告定義就使用，只有報錯啦。
用let關鍵字也算是提醒我們，平時記得先宣告定義再使用的好習慣。
用let 需要注意的地方：
1、在同一個作用域內，不允許重複宣告同一個變數
2、函式內不能用let重新宣告函式的引數
總結:用let宣告變數只在塊級作用域內起作用，適合在for迴圈使用
第三節：ES6 關鍵字const
const是constant(常量)的縮寫。
常量的特點：
1、不可修改；
2、只在塊級作用域起作用
3、不存在變數提升，必須先宣告後使用，這點跟let關鍵字一樣
4、不可重複宣告同一個變數
5、宣告後必須賦值
第四節：瀏覽器相容ES 6特性使用
我們可以用Bable來相容它。
用npm 來安裝bable。npm是隨同Node.js一起安裝的包管理工具，因此只需安裝node.js即可。
啟動命令提示符視窗並且輸入：npm install bable-core@5
第五節：ES 6新特性： 解構賦值
什麼是解構賦值：ES6允許按照一定模式，從陣列和物件中提取值，對變量進行賦值，這被稱為解構（Destructuring）。
傳統的變數賦值：
變數的解構賦值：
陣列的的解構賦值有一下四種情況：
1、結構賦值可以巢狀的
2、不完全解構
3、賦值不成功時，變數的值為underfined
4、允許設定預設值
這個時候預設值3會被新的值4覆蓋，c的值為4；注意：當新的值為undefined的時候，是不會覆蓋預設值的。
物件的解構賦值跟陣列的解構賦值很類似。
如果變數找不到與其名字相同的屬性，就會賦值不成功，如下圖：
字串的解構賦值
解構賦值的用途
一．交換變數的值
傳統做法最常用的是引入第三個變數來臨時存放，如下：
但有了解構賦值，交換兩個變數的值就簡單的多了。如下圖:
二：提取函式返回的多個值
函式只能返回一個值，我們可以將多個值裝在一個陣列或者物件中，再用解構賦值快速提取其中的值。
三： 定義函式引數：
四：函式引數的預設值：
傳統的引數預設值的實現方式是,先判斷該引數是否為undefined,如果是代表沒傳，需要手動給它賦一個值，如：
但是有了解構賦值，一切變得簡單很多！看下面的程式碼：
本節總結：
總結：解構賦值給我們一種新的變數賦值方式，主要可以利用陣列解構賦值和物件解構賦值。它的用途包括：交換變數值，提取函式返回值，函式引數定義，預設值設定等都給我們程式設計帶來便利，在未來會有越來越多的人們使用這個新特性。
第六節：ES 6為字串String帶來哪些好玩的特性？
字串的擴充套件
ES6對字串新增了一些函式和操作規範，使得開發者對字串的操作更加方便，以往需藉助Javascript程式碼才能實現的效果，現在利用這些函式即可快速實現。
新特性：模板字串
對比兩段拼接的程式碼，模板字串使得我們不再需要反覆使用雙引號（或者單引號）了；而是改用反引號識別符號（`），插入變數的時候也不需要再使用加號（+）了，而是把變數放入${ }即可。
使用模板字串，需要注意以下地方:
1、可以定義多行字串：
2、${}中可以放任意的Javascript表示式
①${}可以是運算表示式
②${}可以是物件的屬性
③${}可以是函式的呼叫
新特性：標籤模板
這裡的模板指的是上面講的字串的模板，用反引號定義的字串；而標籤，則指的是一個函式，專門處理模板字串的函式。
在函式名後面直接加一個模板字串，如圖 ，這樣就是標籤模板，可以理解為標籤函式+模板字串，這是一種新的語法規範。它常用來過濾使用者的非法輸入和多語言轉換。
新特性：repeat函式
repeat（）函式：將目標字串重複N次，返回一個新的字串，不影響目標字串。
var name1 =”前端君”; //目標字串
var name2 =name1.repeat(3); //變數name1被重複三次；
Console.log(name1); // 結果：前端君
Console.log(name2); //結果：前端君前端君前端君
新特性：includes函式
Includes()函式：判斷字串是否含有指定的子字串，返回true表示含有，false表示未含有。第二個引數選填，表示開始搜尋的位置。
注意，左面最後一句程式碼，第二個引數為1，表示從第2個字元“端“開始搜尋，第一個字元”前“的位置是0；
傳統的做法我們可以藉助indexOf( )函式來實現，如果含有指定的字串，indexOf( )函式就會子字串首次出現的位置，不含有，則返回-1。我們通過返回值是否為-1來判斷字串中是否含有指定的子字串，但是，我們現在可以用includes( )函式代替indexOf( )函式，因為它的返回值更直觀（true或false），況且我們並不關心子字串出現的位置。
新特性：startsWith函式
startWith()函式：判斷指定的字串是否出現在目標字串的開頭位置，第二個引數選填，表示開始搜尋的位置。
我們如果判斷字串是否以某個子字串開頭，就可以直接使用startsWith( )函式即可，同樣，第二個引數為1表示從第2個字元開始搜尋。若要從第一個字元開始搜尋，引數應該為0或者為空（預設從第一個字元開始搜尋）。
新特性：endWith函式
ensWith()函式：判斷子字串是否出現在目標字串的尾部位置，第二個引數選填，表示針對前N個字元。
var name = “我就是前端君“; //目標字串
name.endsWith(`我`);
//false，不在尾部位置
name.endsWith(`君`);
//true，在尾部位置
name.endsWith(`君`,5);
//false，只針對前5個字元
name.endsWith(`君`,6);
//true，針對前6個字元
新特性：codePointAt函式
Javascript中，一個字串固定為2個位元組，對於那些需要4個位元組儲存的字元，javascript會認為它是兩個字元，此時它的字元長度length為2。如字元：“吉”，就是一個需要四個位元組儲存，length為2的字元。對於4位元組的字元， javascript無法正確讀取字元。
可以看到，str1和str2的長度length都是2，因為字元：”（charAt() 方法可返回指定位置的字元）能正確讀取字串str1的字元，但無法正確讀取4個位元組的字元,此時返回結果出現了亂碼。
如果我們使用ES6給我們提供的codePointAt( )函式，就可以處理這種4個位元組的字元了，我們來看看怎麼使用：
對於這個長度length為2字元：“吉”，codePointAt( )方法可以正確地識別出它是個4個位元組的字元，並且能正確地返回它的碼點的十進位制數：134071，這個數字抓換成16進位制就是20bb7，對應的Unicode編碼則是u20bb7。
新特性:String.fromCodePoint函式
String.fromCodePoint( )函式：函式的引數是一個字元對應的碼點，返回的結果就是對應的字元，哪怕這個字元是一個4位元組的字元，也能正確實現。
新特性:String.raw函式
最後講解的一個函式是String.raw( )；看函式名raw是未加工的的意思，正如這個函式的作用一樣：返回字串最原始的樣貌，即使字串中含有轉義符，它都視而不見，直接輸出。
Unicode編碼
Unicode（中文：萬國碼、國際碼、統一碼、單一碼）是電腦科學領域裡的一項業界標準。它對世界上大部分的文字系統進行了整理、編碼，使得電腦可以用更為簡單的方式來呈現和處理文字。
第七節：ES 6為為數值做了哪些擴充套件？
在ES6標準中，isNaN方法被移植到Number物件上，也就是原本屬於全域性物件window下的函式，現在屬於Number物件上了，同樣被處理的函式還有isFinite函式，parseint函式，parseFloat函式。
ES6的寫法是：
新特性：Number.isNaN函式
Number.isNaN函式：用於判斷傳入的是否是非數值，注意：是判斷非數值，而不是判斷數值，IsNaN的全稱是： is not a number.
傳統的isNaN函式會把非數值的引數轉化成數值再進行判斷，而Number. isNaN只對數值型別有效，非數值型別的引數一律返回false。看文字解釋不過癮，我們們看案例。
正如上面我寫的註釋一樣，Number下面的isNaN都懶得給字串’abc’做型別轉換，直接返回false。而ES5中的isNaN函式會對字串’abc’進行型別轉換後，發現它是一個NaN（非數值），才返回true。
所以我們在使用這個函式到時候還要小心，當返回false的時候，不一定就是一個數值，有可能是一個非數值型別的引數。
新特性：Number.isFinite 函式
Number.isFinite函式：用來檢查一個數值是否非無窮。注意是判斷非無窮，不是判斷無窮，這裡跟isNaN函式一樣，有點繞。isFinite函式跟isNaN函式一樣，也只是對數值型別有效，對非數值型別的引數一律返回false
新特性：Number.paeseint函式&Number.parseFloat 函式
parseint函式：解析一個字串，返回一個整數。parseint函式同樣從window物件下移植到Number物件下，作用沒變。
parseFloat函式：解析一個字串，並返回一個浮點數。
以上四個是由全域性物件window下移植到Number物件下的，目的是減少全域性性的函式，把全域性函式合理的規劃到其他物件下，漸漸實現語言的模組化。
新特性：Number.isinteger函式
Number.isinteger函式：用來判斷是否是整數。
極小常量
Number.ESPILON常量：定義一個極小的數值。
安全整數
ES6為我們引入了安全整數的概念。什麼？整數還有安全和不安全的說法？原來JavaScript能夠準確表示的整數範圍在-2^53到2^53之間，超過這個範圍，無法精確表示這個值。故稱之為不安全。
ES6給數值帶來的擴充套件，除了對Number物件進行了擴充套件，還對Math物件進行了擴充套件。我們平時用的求隨機數的方法random就是屬於Math物件下的方法。
此外，ES6給Math物件新增了17個函式。
第八節：ES 6為陣列的擴充套件？
1、Array.of()函式
作用:將一組值，轉換成陣列。
2、Array.from()函式
函式作用：可以將類似陣列的物件或者可遍歷的物件轉換成真正的陣列。什麼是類似陣列的物件？最常用的是調
‘用getElementByTagName方法得到的結果。
Array.from函式其中一個用處就是字串轉換成陣列。
3、find()函式
函式作用：找出陣列中符合條件的第一個元素。
看上面的程式碼，find()函式的引數是一個匿名函式，陣列的每個元素都會進入匿名函式執行，直到結果為true，find函式就會返回value的值：3。倘若所有元素都不符合匿名函式的條件，find( )函式就會返回undefind。
4、findindex()函式
函式作用：返回符合條件的第一個陣列成員的位置。
上面的程式碼結果是：2，因為陣列元素中大於8的元素是9，而元素9的位置正式2，（陣列元素是從0算起）。倘若所有元素都不符合匿名函式的條件，findIndex( )函式就會返回-1。
5、fill()函式
函式作用：用指定的值，填充到陣列。
經過fill( )函式處理後的陣列arr已經變成了[4,4,4]；正如函式名fill（填充）一樣。所有元素都被填充為數字4了。fill( )函式提供了一些引數，用於指定填充的起始位置和結束位置。
上面的程式碼中第2個引數和第3個引數的意思是：從位置1的元素開始填充數字4，截止到位置3之前，所以是位置1和位置2的元素被數字4填充了，得到的結果：[1,4,4]。
6、entries()函式
函式作用：對陣列的鍵值對進行遍歷，返回一個遍歷器，可以用for…of對其進行遍歷。
7、keys()函式
函式作用：對陣列的索引鍵進行遍歷，返回一個遍歷器。
8、values()函式
作用：對陣列的元素進行遍歷，返回一個遍歷器。
9、陣列推導
陣列推導：用簡潔的寫法，直接通過現有的陣列生成新陣列。
舉個例子：加入我們有一個陣列，在這個陣列的基礎上，每個元素乘以2，得到一個新陣列。
傳統的實現方法：
ES6提供的新方法:陣列推導。
在陣列推導中，for..of後面還可以加上if語句，我們看來看看程式碼案例：
在上面程式碼中，我們不再是對陣列的元素乘以2，而是用if做了個判斷：陣列的元素要大於3。所以執行的結果是：[ 4 ]。
第九節：ES 6為物件的擴充套件？
物件的傳統表示法：
變數person就是一個物件，物件含有name屬性和一個say方法。表示法是用鍵值對的形式來表示，這就是傳統的表示法。
ES6的簡潔寫法：
ES6為物件新增的函式
1、Object.is()函式
作用是比較兩個值是否嚴格相等，或者說全等。
2、Object.assign()函式
作用：將源物件的屬性賦值到目標物件上。
利用Object.assign()函式的功能，我們可以給物件新增屬性和方法，克隆物件，合併多個物件，為物件的屬性制定預設值。
3、Object.getPrototypetypeOf()函式
作用：獲取一個物件的prototype屬性。
4、Object.setPrototypeOf（）函式
作用：設定一個物件的prototype屬性。
Javascript的物件導向
Javascript本身不是一種物件導向的程式語言，在ES5中，它的語法中也沒有class（類的關鍵字），可以利用物件的原型prototype屬性來模擬物件導向進行程式設計開發。
模擬物件導向程式設計有幾個關鍵步驟：1、建構函式2、給prototype物件新增屬性和方法，3、例項化，4、通過例項化的物件呼叫類的方法或者屬性。
注意：物件導向是一種程式設計思想，並不是具體的工具。