ES6 學(xué)習(xí)筆記,如有錯誤活翩，歡迎指正。
筆記只記錄了一些個人認(rèn)為需要記住的知識點(diǎn)缆瓣。
Symbol? ?
? ? ES6 中新增了一種數(shù)據(jù)類型 Symbol 喧枷。至此，JavaScript 有 7 種 數(shù)據(jù)類型：undefined弓坞， null 隧甚， 布爾（boolean），字符串（string）渡冻，數(shù)值（number）戚扳， 對象 和 Symbol 。
? ? ? 暫時沒有發(fā)現(xiàn)用處族吻，研究后在補(bǔ)上帽借。
Set 和 Map 數(shù)據(jù)結(jié)構(gòu)
? ? ? ? Set? ? ? ?
? ? ? ? ? ? ? ? ES6 提供了新的數(shù)據(jù)結(jié)構(gòu) Set。它類似于數(shù)組超歌，但是 成員的值都是唯一的砍艾，沒有重復(fù)的值∥沾。可以用來 去重 ７ｃ财贰Ｙ髯邸！Ｌρ稀定枷！
? ? ? ? ? ? ? ? Set 函數(shù)可以接受一個?數(shù)組（或者具有 iterable 接口的其他數(shù)據(jù)結(jié)構(gòu)）作為?參數(shù)，用來 初始化届氢。定義的值要放在 數(shù)組 里欠窒。
? ? ? ? ? ? Set 實(shí)例的屬性和方法
? ? ? ? ? ? ? ??add(value)：添加某個值，返回 Set 結(jié)構(gòu)本身，類似 數(shù)組的 push岖妄。
? ? ? ? ? ? ? ? delete(value)：刪除某個值型将，返回一個布爾值，表示刪除是否成功荐虐。
? ? ? ? ? ? ? ? has(value)：返回一個布爾值七兜，表示該值是否為Set的成員。
? ? ? ? ? ? ? ? clear( )：清除所有成員福扬，沒有返回值腕铸。
? ? ? ? ? ? ? ? size屬性 ： 獲得Set值的數(shù)量，類似 數(shù)組的 length铛碑。
? ? ? ? ? ? Set 遍歷操作
? ? ? ? ? ? ? ? Set 結(jié)構(gòu)的實(shí)例有 四個 遍歷方法狠裹，可以用于遍歷成員。
? ? ? ? ? ? ? ? keys()：返回鍵名的遍歷器
? ? ? ? ? ? ? ? values()：返回鍵值的遍歷器
? ? ? ? ? ? ? ? entries()：返回鍵值對的遍歷器
? ? ? ? ? ? ? ? forEach()：使用回調(diào)函數(shù)遍歷每個成員
? ? ? ? ? ? 由于 Set 結(jié)構(gòu)沒有鍵名汽烦，只有鍵值（或者說 鍵名和鍵值是同一個值）涛菠，所以keys方法和values方法的行為完全一致。
? ? ? ? ? ? ? ? 上面代碼中刹缝，entries 方法返回的遍歷器碗暗，同時包括 鍵名 和 鍵值，所以每次輸出一個數(shù)組梢夯，它的兩個成員完全相等言疗。
? ? ? ? Map
? ? ? ? ? ? ? ? ES6 提供了 Map 數(shù)據(jù)結(jié)構(gòu)。它類似于對象颂砸，也是鍵值對的集合噪奄，但是“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當(dāng)作鍵人乓。
? ? ? ? ? ? ? ? Map 也可以接受一個?數(shù)組?作為參數(shù)勤篮。該數(shù)組的成員是一個個表示鍵值對的數(shù)組。
? ? ? ? ? ? ? ? 遍歷方法 和 set? 基本一樣色罚。
Proxy
? ? ? Proxy 可以理解成碰缔，在目標(biāo)對象之前架設(shè)一層“攔截”，外界對該對象的訪問戳护，都必須先通過這層攔截金抡，因此提供了一種機(jī)制，可以對外界的訪問進(jìn)行過濾和改寫腌且。
? ? ? ? 就像 Vue 的 生命周期 梗肝，Proxy 就像 鉤子函數(shù)，給 目標(biāo)對象 加上這些 鉤子函數(shù) 或者為在執(zhí)行方法前預(yù)處理一些代碼铺董。
? ? ? ? ES6 原生提供 Proxy 構(gòu)造函數(shù)巫击，用來生成 Proxy 實(shí)例。
? ? ? ? ? ? ? ? target參數(shù)表示所要攔截的目標(biāo)對象，handler參數(shù)也是一個對象坝锰，用來定制攔截行為粹懒。
? ? ? ? ? ? 可以理解為
? ? ? ? ? ? ? ? var? proxy? = new Proxy( { }，{ } ) ;
? ??????????上面代碼中顷级，由于設(shè)置了存值函數(shù)set崎淳，任何不符合要求的 sex 屬性賦值，都會拋出一個錯誤愕把，這是數(shù)據(jù)驗(yàn)證的一種實(shí)現(xiàn)方法拣凹。利用set方法，還可以數(shù)據(jù)綁定恨豁，即每當(dāng)對象發(fā)生變化時嚣镜，會自動更新 DOM。
? ? ? ? ? ?get方法的兩個參數(shù)分別是 目標(biāo)對象 和 所要訪問的屬性名（接收3個參數(shù)橘蜜，另外一個是proxy 實(shí)例本身）?
? ? ? ? ? ?set方法用來攔截某個屬性的賦值操作菊匿。四個參數(shù)分別是 目標(biāo)對象、所要訪問的屬性名 计福、屬性值跌捆、Proxy 實(shí)例本身，最后一個參數(shù)可選象颖。
? ???????????Proxy 支持的攔截操作佩厚，一共13種，可以參考 阮一峰大神的?ECMAScript 6 入門说订，在實(shí)際運(yùn)用中在進(jìn)行理解抄瓦。
Promise對象
所謂Promise，簡單說就是一個容器陶冷，里面保存著某個未來才會結(jié)束的事件（通常是一個異步操作）的結(jié)果钙姊。從語法上說，Promise 是一個對象埂伦，從它可以獲取異步操作的消息煞额。Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進(jìn)行處理沾谜。
? ? ? ? ? ? then 方法可以接受 兩個回調(diào)函數(shù) 作為參數(shù)膊毁。第一個回調(diào)函數(shù)是Promise對象的狀態(tài)變?yōu)閞esolved時調(diào)用，第二個回調(diào)函數(shù)是 Promise 對象的狀態(tài)變?yōu)?rejected 時調(diào)用类早。其中媚媒，第二個函數(shù)是可選的嗜逻，不一定要提供 涩僻。
? ? ? ? ? ??then方法返回的是一個?新的Promise實(shí)例?（注意，不是原來那個Promise實(shí)例）。因此可以采用鏈?zhǔn)綄懛嫒眨?b> then方法后面再調(diào)用另一個then方法Ｇ断铩！Ｊ页椤Ｌ履摹！坪圾！
? ? ? ? ? Promise 新建后就會立即執(zhí)行 Ｏ邸！Ｊ扌埂＠旄拧！病梢！
? ? ? ? ? ? Promise 新建后立即執(zhí)行胃珍，所以首先輸出的是 Promise。然后蜓陌，then方法指定的回調(diào)函數(shù)觅彰，將在當(dāng)前腳本所有同步任務(wù)執(zhí)行完才會執(zhí)行，所以resolved最后輸出钮热。
? ? ? ? ? ? Promise. catch ( )
? ? ? ? ? ? Promise. catch 方法是.then(null, rejection) 的別名填抬，用于指定發(fā)生錯誤時的回調(diào)函數(shù)。
? ? ? ? ? ? ? ? getJSON 方法返回一個 Promise 對象隧期，如果該對象狀態(tài)變?yōu)?resolved痴奏，則會調(diào)用then方法指定的回調(diào)函數(shù)；如果?異步操作拋出錯誤厌秒，狀態(tài)就會變?yōu)?rejected读拆，就會調(diào)用catch方法指定的回調(diào)函數(shù)，處理這個錯誤鸵闪。另外檐晕，then方法指定的回調(diào)函數(shù)，如果運(yùn)行中?拋出錯誤蚌讼，也會被?catch方法捕獲辟灰。
? ???????????建議在所有隊列最后加上 .catch( )，以免漏掉錯誤出來造成意想不到的問題
? ? ? ? ? ? promise.all ( )?
? ? ? ? ? ? ????用于將多個Promise 實(shí)例篡石，包裝成一個新的 Promise 實(shí)例芥喇，返回的實(shí)例就是普通的 Promise
? ? ? ? ? ? 接收一個?數(shù)組?作為參數(shù)，當(dāng)所有子 Promise 都完成凰萨，該 Promise 完成继控，返回值是全部值的 數(shù)組械馆，有任何一個失敗，該P(yáng)romise 失敗武通，返回值是一個失敗的 子Promise 的結(jié)果霹崎。
? ? ? ? ? ? Promise . all( ) 最常見的就是和 .map( ) 連用。
? ? ? ? ? ? promise.race( )
? ? ? ? ? ? 只要p1冶忱、p2尾菇、p3之中有一個實(shí)例率先改變狀態(tài)，p的狀態(tài)就跟著改變囚枪。那個率先改變的 Promise 實(shí)例的返回值派诬，就傳遞給p的回調(diào)函數(shù)。
? ? ? ? ? ? 常用用法：把異步操作和定時器放在一起链沼，如果定時器先觸發(fā)千埃，就認(rèn)為超時，告知用戶
? ? ? ? ? ? 把回調(diào)包裝成 promise最常見忆植，有2個好處：
? ? ? ? ? ? 1 可讀性好放可；2 返回的結(jié)果可以加入任何 promise 隊列
? ? ? ? ? ? Promise.resolve( )
? ? ? ? ? ? 有時需要將 現(xiàn)有對象 轉(zhuǎn)為 Promise 對象，Promise.resolve 方法就起到這個作用朝刊。
? ? ? ? ? ? ? ? Promise.reject( )
? ? ? ? ? ? ? ? Promise.reject(reason)方法也會返回一個新的 Promise 實(shí)例耀里，該實(shí)例的狀態(tài)為rejected。
Generator 函數(shù)
? ? Generator 函數(shù)是 ES6 提供的一種異步編程解決方案拾氓，語法行為與傳統(tǒng)函數(shù)完全不同冯挎。
? ? ? 形式
? ? ? ? ? ? ? ? Generator 函數(shù)是一個普通函數(shù)，但是有兩個特征咙鞍。一是房官，function關(guān)鍵字與函數(shù)名之間有一個星號；二是续滋，函數(shù)體內(nèi)部使用 yield 表達(dá)式翰守，定義不同的 內(nèi)部狀態(tài)。
? ? ? ? ? ? ? ? 上述示例疲酌，它內(nèi)部有兩個yield表達(dá)式（hello 和 world）蜡峰，即該函數(shù)有三個狀態(tài)：hello，world 和 return 語句（結(jié)束執(zhí)行）朗恳。
? ? ? ? ? ? ? ? Generator 函數(shù)的調(diào)用方法與普通函數(shù)一樣湿颅，也是在函數(shù)名后面加上一對圓括號。但是粥诫，調(diào)用 Generator 函數(shù)后油航，該函數(shù)并不執(zhí)行，返回的也不是函數(shù)運(yùn)行結(jié)果怀浆，而是一個指向內(nèi)部狀態(tài)的指針對象谊囚，必須調(diào)用遍歷器對象的 next 方法怕享，使得指針移向下一個狀態(tài)，每次調(diào)用next方法秒啦，內(nèi)部指針就從函數(shù)頭部或上一次停下來的地方開始執(zhí)行，直到遇到下一個yield表達(dá)式（或return語句）為止搀玖。
? ? ? ? ? ? ? ? 調(diào)用 Generator 函數(shù)余境，返回一個遍歷器對象，代表 Generator 函數(shù)的?內(nèi)部指針灌诅。以后芳来，每次調(diào)用遍歷器對象的next方法，就會返回一個有著 value 和 done 兩個屬性的對象猜拾。value 屬性表示當(dāng)前的內(nèi)部狀態(tài)的值即舌，是 yield 表達(dá)式后面那個表達(dá)式的值；done屬性是一個布爾值挎袜，表示是否遍歷結(jié)束顽聂。
? ? ? ? ? ? ? ? 遍歷器對象的next方法的運(yùn)行邏輯如下。
? ? ? ? ? ? ? ? （1）遇到y(tǒng)ield表達(dá)式盯仪，就暫停執(zhí)行后面的操作紊搪，并將緊跟在yield后面的那個表達(dá)式的值，作為返回的對象的 value屬性值全景。
? ? ? ? ? ? ? ? （2）下一次調(diào)用next方法時耀石，再繼續(xù)往下執(zhí)行，直到遇到下一個yield表達(dá)式爸黄。
? ? ? ? ? ? ? ? （3）如果沒有再遇到新的yield表達(dá)式滞伟，就一直運(yùn)行到函數(shù)結(jié)束，直到return語句為止炕贵，并將 return 語句后面的表達(dá)式的值梆奈，作為返回的對象的 value屬性值。
? ? ? ? ? ? ? ? （4）如果該函數(shù)沒有return語句称开，則返回的對象的value屬性值為undefined鉴裹。
? ? ? ? ? ? ? ? 注意
? ? ? ? ? ? ? ? （1） yield表達(dá)式只能用在 Generator 函數(shù)里面，用在其他地方都會報錯钥弯。
? ? ? ? ? ? ? ? （2）yield 表達(dá)式如果用在另一個表達(dá)式之中径荔，必須放在?圓括號?里面。
? ? ? ? ? ? ? ? ? ? next 方法的參數(shù)
? ? ? ? ? ? ? ? ? ? yield 表達(dá)式本身沒有返回值脆霎，或者說總是返回undefined总处。next方法可以帶一個參數(shù)，該 參數(shù)就會被當(dāng)作上一個yield表達(dá)式的返回值睛蛛。
? ??????????????由于 nex t方法的參數(shù)表示上一個yield表達(dá)式的返回值鹦马，所以在第一次使用next方法時胧谈，傳遞參數(shù)是無效的。
? ? ? ? ? ? ? ? 具體運(yùn)用情形在實(shí)際運(yùn)用中分析和總結(jié)荸频。
async / await 函數(shù) （重難點(diǎn)）
? ? ? ? async 函數(shù)是什么菱肖？一句話，它就是 Generator 函數(shù)的語法糖旭从。
? ? ? ? async函數(shù)返回一個 Promise 對象稳强，可以使用then方法添加回調(diào)函數(shù)。當(dāng)函數(shù)執(zhí)行的時候和悦，一旦遇到await就會先返回退疫，等到異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語句 鸽素。
? ? ? ? 返回 Promise 對象
? ? ? ? async函數(shù)內(nèi)部 return 語句返回的值褒繁，會成為 then 方法回調(diào)函數(shù)的參數(shù)。
? ? ? ? ? ? 上面代碼中馍忽，函數(shù) f 內(nèi)部return命令返回的值棒坏，會被then方法回調(diào)函數(shù)接收到。
? ? ? ? ? ? async函數(shù)內(nèi)部拋出錯誤遭笋，會導(dǎo)致返回的 Promise 對象變?yōu)閞eject狀態(tài)俊抵。拋出的錯誤對象會被catch方法回調(diào)函數(shù)接收到。
? ? ? ? ? ? Promise 對象的狀態(tài)變化
? ? ? ? ? ? ? ? async 函數(shù)返回的 Promise 對象坐梯，必須等到內(nèi)部 所有await命令 后面的 Promise 對象執(zhí)行完徽诲，才會發(fā)生狀態(tài)改變，除非遇到 return 語句或者拋出錯誤吵血。也就是說谎替，只有async函數(shù)內(nèi)部的異步操作執(zhí)行完，才會執(zhí)行then方法指定的回調(diào)函數(shù)蹋辅。
? ? ? ? ? ? await 命令
? ? ? ? ? ? ? ? 正常情況下钱贯，await命令后面是一個 Promise 對象。如果不是侦另，會被轉(zhuǎn)成一個立即resolve的 Promise 對象 秩命。
? ? ? ? ? ? ? ? ? ? await命令后面的 Promise 對象如果變?yōu)?reject狀態(tài)，則?reject的參數(shù)?會被catch方法的回調(diào)函數(shù)接收到褒傅。
? ? ? ? ? ? ? 只要一個 await 語句后面的 Promise 變?yōu)?reject弃锐，那么整個async函數(shù)都會中斷執(zhí)行。
? ? ? ? ? ? 有時殿托，我們希望即使前一個異步操作失敗睛藻，也不要中斷后面的異步操作遵岩。這時可以將第一個await放在 try...catch 結(jié)構(gòu)里面崇渗，這樣不管這個異步操作是否成功，第二個await都會執(zhí)行鸠按。
? ? ? ? ? ? ? ? 注意
? ? ? ? ? ? ? ? ? ? ? （1）? await 命令后面的Promise對象，運(yùn)行結(jié)果可能是 rejected饶碘，所以最好把所有await命令放在try...catch代碼塊中目尖。
? ? ? ? ? ? ? ? ? ? ? （2） 多個await命令后面的異步操作，如果不存在繼發(fā)關(guān)系（即先后觸發(fā)關(guān)系）扎运，最好讓它們 同時觸發(fā)瑟曲，可以節(jié)約 程序的時間，提高效率绪囱。
? ? ? ? ? ? ? ? ? ? ? ? （3）await命令只能用在 async 函數(shù)之中（跟 yield 一樣）测蹲，如果用在普通函數(shù)莹捡，就會報錯鬼吵。
Class類的使用
? ??JavaScript 語言中，生成實(shí)例對象的傳統(tǒng)方法是通過構(gòu)造函數(shù)篮赢。
? ??????????ES6 提供了更接近傳統(tǒng)語言的寫法齿椅，引入了 Class（類）這個概念，作為對象的模板启泣。通過class關(guān)鍵字涣脚，可以定義類。
????????????????????構(gòu)造函數(shù)的prototype屬性寥茫，在 ES6 的“類”上面繼續(xù)存在遣蚀。事實(shí)上，類的所有方法都定義在類的prototype屬性上面纱耻。
? ??????constructor 方法是類的 默認(rèn)方法芭梯，通過new命令生成對象實(shí)例時，自動調(diào)用該方法 !!!!!!!!
一個類必須有constructor方法弄喘，如果沒有顯式定義玖喘，一個空的constructor方法會被?默認(rèn)添加，
construtor 可以用來 初始化對象蘑志。
????????????類必須使用new調(diào)用累奈，否則會報錯。
Module 的語法
? ? ? ? ? ? ? ? 主要用于前端急但，后端使用 CommonJS 澎媒。CommonJS是服務(wù)器模塊的規(guī)范，Node.js采用了這個規(guī)范波桩。
????????????????模塊功能主要由兩個命令構(gòu)成：export 和 import?旱幼。export 命令用于規(guī)定模塊的對外接口，import 命令用于輸入其他模塊提供的功能突委。
? ??????????????export
? ??????????????一個模塊就是一個獨(dú)立的文件柏卤。該文件內(nèi)部的所有變量冬三，外部無法獲取。如果你希望外部能夠讀取模塊內(nèi)部的某個變量缘缚，就必須使用?export關(guān)鍵字輸出該變量勾笆。
? ? ? ? ? ? 注意規(guī)范
? ? ? ? ? ? 暴露方法也是一樣的 export function XXX（）{? ? }? 或者 定義好方法 export { 方法名稱 }
? ? ? ? ? ? ??import?
? ??????????使用export命令定義了模塊的對外接口以后，其他 JS 文件就可以通過 import 命令加載這個模塊桥滨。
? ??????????import命令接受?一對大括號窝爪， 里面指定要從其他模塊導(dǎo)入的變量名。大括號里面的變量名齐媒，必須與被導(dǎo)入模塊 對外接口的名稱相同蒲每。
? ??????????import {? 變量名1，變量名2邀杏，變量名3.......... } from 文件路徑 ;
? ? ? ? ? ? 注意：
? ???? ?? ? ①?import命令具有提升效果，會提升到整個模塊的頭部唬血，首先執(zhí)行柒桑。（類似于function聲明）
? ? ? ? ? ? ② 由于 import 是 靜態(tài)執(zhí)行与倡，所以不能使用表達(dá)式和變量界逛，這些只有在運(yùn)行時才能得到結(jié)果的語法結(jié)構(gòu)。
? ? ? ? ? ? ? ?③ 如果多次重復(fù)執(zhí)行同一句import語句纺座，那么只會執(zhí)行一次息拜，而不會執(zhí)行多次。
? ??????????????export default 命令
? ??????????????????使用import命令的時候，用戶需要知道所要加載的?變量名或函數(shù)名少欺，否則無法加載喳瓣。為了方便，讓用戶不用閱讀文檔就能加載模塊赞别，就要用到?export default?命令畏陕，為模塊指定?默認(rèn)輸出?。
? ??????????????export default 命令用于指定模塊的默認(rèn)輸出仿滔。顯然惠毁，一個模塊只能有一個默認(rèn)輸出，因此 export default 命令只能使用一次崎页。所以鞠绰，import命令后面才不用加大括號，因?yàn)橹豢赡芪ㄒ粚?yīng)export default命令飒焦。
????????????本質(zhì)上蜈膨，export default就是輸出一個叫做?default的變量或方法，然后系統(tǒng)允許你為它取任意名字荒给。
? ??????????????????????正是因?yàn)閑xport default命令其實(shí)只是輸出一個叫做default的變量丈挟，所以它后面不能跟變量聲明語句刁卜。
? ??????????????????????同樣地志电，因?yàn)閑xport default 命令的本質(zhì)是將后面的值，賦給 default 變量蛔趴，所以可以直接將一個值寫在 export default 之后挑辆。
? ? ? ? ? ? ? ? ? ? ? ? 比如，export default 100孝情；
? ? ? ? ? ? ? ? ? ? ? ? export 100 是錯誤的Ｓ悴酢！ｓ锏础？唷！
? ??????????????????export 與 import 的復(fù)合寫法
? ? ? ? ? ? ? ? ? ? 注意
? ??????????????????????但需要注意的是羔挡，寫成一行以后洁奈，foo和bar實(shí)際上并沒有被導(dǎo)入當(dāng)前模塊，只是相當(dāng)于對外轉(zhuǎn)發(fā)了這兩個接口绞灼，導(dǎo)致當(dāng)前模塊不能直接使用foo和bar利术。
? ? 總結(jié)：大部分都是 文檔 的 原話摘抄， 對實(shí)際理解還是不夠透徹低矮，在實(shí)際項目和實(shí)際運(yùn)用場景中在加以理解印叁。
