1、ES6,主講老師：陳思彤,01,ES6簡介,ES6簡介,介紹： ES2015年推出的JavaScript新版本也叫ES2015 現(xiàn)在已經(jīng)有ES7（2016）、 ES8（2017）、 ES9（2018）很多新增內(nèi)容仍是提案 普遍使用的依然是ES6、ES7部分內(nèi)容 ES7及后面版本瀏覽器或node環(huán)境未完全支持，但已有babel工具可對其進行編譯支持 (轉(zhuǎn)成ES5) 所以：新版本語言只是在原有基礎(chǔ)上新增了一些語法糖，執(zhí)行時還會轉(zhuǎn)化成ES5,ES6簡介,語言迭代目的： 是使JavaScript語言可以用于編寫復(fù)雜的大型應(yīng)用程序，成為企 業(yè)級的開發(fā)語言。,ES6簡介,為什么要學(xué)習(xí)： ES6中引入的語言

2、新特性，更具規(guī)范性，易讀性、方便操作、簡化了大型 項目開發(fā)的復(fù)雜程度、降低了出錯概率，提升了開發(fā)效率。 大部分公司（不代表所有，代表著一個趨勢）都在用ES6開發(fā)， 已成為開發(fā)、求職必會內(nèi)容,ES6簡介,逐步剖析ES6變化之前 用Babel工具做對比ES6-低級語法 在線Babel工具 https:/babeljs.io （用于學(xué)習(xí)是進行對比、查詢） npm本地下載此工具（用于生產(chǎn)開發(fā)時必要的兼容）,02,ES6-babel本地學(xué)習(xí)環(huán)境搭建,ES6-babel 本地學(xué)習(xí)環(huán)境搭建,npm init y npm install babel/core babel/cli babel-preset-en

3、v .babelrc npx babel xxx.js o xxx.js (-watch),ES6學(xué)習(xí)建議,考慮以前的語法哪里有不足，可以如何改進 當(dāng)你面對新特性為什么會這樣的時候，可以看看babel編譯后的結(jié)果,03,ES6變化-let let name, age = obj; 或 let name，age;（name，age = obj）; 作用：簡化書寫長度，提升開發(fā)效率 默認參數(shù)： let name , age, sex =male = obj；,ES6變化- destructuring,更改變量名稱： let name：myName = obj；,06,ES6變化-箭頭函數(shù),ES6變

4、化- 箭頭函數(shù),箭頭函數(shù)特點： 1.不用寫function關(guān)鍵字 2.只能作為函數(shù)使用不能new，沒有原型 3.參數(shù)不能重復(fù)命名 4.返回值可以不寫return，但是有時需要配合 5.內(nèi)部 arguments this 由定義時外圍最接近一層的非箭頭函數(shù)的 arguments和this決定其值,ES6變化- 箭頭函數(shù),作用： 函數(shù)目的指向性更強，可讀性更好，簡化代碼，提升開發(fā)效率,07,ES5-Object.defineProperty,ES5- Object.defineProperty,簡介： ES5規(guī)范開始后續(xù)版本迭代，也在致力于做一件事，就是把js底層已有的功能，提 供給開發(fā)者使用。O

5、bject.defineProperty就是其中一個，此方法會可直接在一個對象上定 義一個新的具有詳細描述的屬性，或者修改一個對象的現(xiàn)有屬性， 并返回這個對象。 使用： Object.defineProperty(對象，屬性，描述符); 描述符對，對象的屬性的進行詳細描述： 數(shù)據(jù)描述符： value: xxx屬性值。 默認 writable：true 是否可寫。默認false configurable：true 是否可配置。默認false enumerable：true 是否可枚舉。默認false 存取描述符： set：function() 屬性訪問器 進行寫操作時調(diào)用該方法 get：func

6、tion() 屬性訪問器 進行讀操作時調(diào)用該方法,ES5- Object.defineProperty,注意： 如果描述符中同時出現(xiàn)，value、writable，和set、get兩組的話，會 出現(xiàn)異常。切記不要同時使用 作用： 雙向數(shù)據(jù)綁定的核心方法，主要做數(shù)據(jù)劫持操作（監(jiān)控屬性變化）， 同時是后期ES6中很多語法糖底層實現(xiàn)的核心方法。,08,ES5-數(shù)據(jù)劫持,ES5- 數(shù)據(jù)劫持,VUE雙向數(shù)據(jù)綁定核心功能由 Observer、Compile、Watcher三部分實現(xiàn) 其中Observer部分功能實現(xiàn)有Object.defineProperty實現(xiàn)。 Observer：監(jiān)測數(shù)據(jù)變化進行相應(yīng)回

7、調(diào)（數(shù)據(jù)劫持）； 實現(xiàn)一個簡單的數(shù)據(jù)劫持，作為Object.defineProperty的練習(xí)。 從而引出Proxy 靜態(tài)屬性 property = xxx; 私有屬性 decorator 裝飾器 提案特性需要下載： npm install babel/plugin-proposal-decorators 需要配置： plugins: babel/plugin-proposal-decorators, legacy: true , babel/plugin-proposal-class-properties, loose : true ,14,ES7變化-裝飾器使用,15,ES6變化-Set、

8、Map,ES6變化-Set,簡介： Set是ES6提供給我們的構(gòu)造函數(shù)，能夠造出一種新的存儲數(shù)據(jù)的結(jié)構(gòu) 特點： 只有屬性值，成員值唯一（不重復(fù)） 用途： 可以轉(zhuǎn)成數(shù)組，其本身具備去重，交集，并集，差集的作用等,ES6變化-Map,簡介： Map 是ES6提供給我們的構(gòu)造函數(shù)，能夠造出一種新的存儲數(shù)據(jù)的結(jié) 構(gòu)。本質(zhì)上是鍵值對的集合。 特點： key對應(yīng)value，key和value唯一，任何值都可以當(dāng)屬性。 用途： 可以讓對象當(dāng)屬性，去重等。 原理實現(xiàn)： 鏈接鏈表、hash算法、桶,ES6變化-思維練習(xí)hm,1.Set自己嘗試模擬實現(xiàn)一下 2.自己簡單了解一下：weakSet、weakMap,1

9、6,ES6變化-Promise鋪墊,ES6變化-Promise鋪墊,異步編程簡述： 無論是在瀏覽器環(huán)境中還是在node環(huán)境中，我們都會使用JavaScript 完成各種異步操作，如在瀏覽器環(huán)境中的定時器、事件、ajax等或是node環(huán) 境中的文件讀取、事件等。伴隨著異步編程的就是回調(diào)機制（復(fù)習(xí)jQuery）。 明確一點異步編程避免不了回調(diào)。 異步編程問題： 產(chǎn)生回調(diào)地獄，難于維護和擴展。 try catch只能捕獲同步代碼中出現(xiàn)的異常。 同步并發(fā)的異步存在一定的問題。,ES6變化-Promise鋪墊,解決方案： ES6 Promise可以解決回調(diào)地獄、以及同步并發(fā)的異步問題。（異步操作 的異常

10、捕獲有其他方式解決。） 但依舊會有明顯的回調(diào)痕跡，之后學(xué)習(xí)ES6的generator 、ES7的 async await爭取讓異步代碼看起來和同步一樣。寫起來更優(yōu)雅一些。,ES6變化-Promise鋪墊,簡單復(fù)習(xí)回調(diào)： 當(dāng)做某件事滿足一定條件后，再做另一件事。 jQuery： Callbacks可管理回調(diào) Loadsh: JavaScript實用工具庫，提供各種方法提升開發(fā)效率。提供after高階函數(shù)輔助回調(diào)操作。 玩一下node: cmd下 node index.js let fs = require(fs);,ES6變化-Promise鋪墊,演示： 回調(diào)地獄問題 放到Promise解決 瀏

11、覽器端和后端異步操作異常捕獲 各端都有方法 同步并發(fā)的異步問題 after能解決，Promise更優(yōu)雅,17,ES6變化-Promise使用,ES6變化-Promise使用,Promise: new Promise(executor 函數(shù)); 同步執(zhí)行 狀態(tài)： pending 等待 Fulfilled 成功 Rejected 失敗 executor 函數(shù): 參數(shù) resolve reject 函數(shù)，對應(yīng)觸發(fā)Promise對象注冊的成功和失敗的函數(shù)。 返回值： Promise 對象,ES6變化-Promise使用,then: oPromise .then(val) = , (reason) = ) .then(val) = , (reason) = ) .then(val) = , (reason) = ); 宏任務(wù)和微任務(wù)： Event Loop機制中不同的隊列里，宏任務(wù)先放入隊列，但微任務(wù)先拿出來執(zhí)行。,ES6變化-Promise使用,then: 注冊函數(shù)返回值 catch： 異常捕獲 finally: 最后處理函數(shù) Promise.all: 同步并發(fā)異步的結(jié)果 Promise.race： 誰先成功就處理誰,18,ES6變化-Promise原理,19,ES6變化-Iterator,ES6變化-Generator,Generator簡介: 生成器，本身是函數(shù)，執(zhí)