ES6 語法學習總結
第一節：什麽是ES6？
ES6是什麽？跟JavaScript有什麽關系？
JavaScrip由三部分組成：分別是ECMAScript,BOM和DOM.
1）由此看出，ECMAScript是JavaScript的組成部分，是JS的核心，描述了語言的基本語法（var、for、if、array等）和數據類型（數字、字符串、布爾、函數、對象（obj、[]、{}、null、未定義），ECMAScript是一套標準，定義了一種語言是什麽樣子。ECMAScript是一種由Ecma國際（前身為歐洲計算機制造商協會,英文名稱是European Computer ManufacturersAssociation
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、通過實例化的對象調用類的方法或者屬性。
註意：面向對象是一種編程思想，並不是具體的工具。
ES6 語法學習總結