總目錄：

ECMAScript6-1搭建ES6運(yùn)行環(huán)境.ppt

子目錄：

在HBUILDER中配置Babel轉(zhuǎn)碼器

在頁(yè)面中引入browser.js的作用

ECMAScript6-2常用語(yǔ)法.ppt

子目錄：

let命令

const命令

箭頭函數(shù)

函數(shù)的參數(shù)默認(rèn)值

操作符...的使用

對(duì)象的解構(gòu)

數(shù)組的解構(gòu)

對(duì)象字面量簡(jiǎn)寫

for...of循環(huán)

類

類的getter和setter方法

類的靜態(tài)方法

類的繼承

模板字符串

翻牌游戲

...就是Spread / Rest 操作符

Spread （展開）還是 Rest（可變數(shù)量參數(shù)）

默認(rèn)情況下，對(duì)象不可迭代。

語(yǔ)法糖

對(duì)某個(gè)屬性設(shè)置存值函數(shù)和取值函數(shù)，攔截該屬性的存取行為。

如果在一個(gè)方法前，加上static關(guān)鍵字，就表示該方法不會(huì)被實(shí)例繼承，而是直接通過類來(lái)調(diào)用，這就稱為“靜態(tài)方法”。

ECMAScript6-3Promise對(duì)象.ppt

Promise介紹

創(chuàng)建Promise對(duì)象

執(zhí)行定時(shí)函數(shù)

then方法

傳遞數(shù)據(jù)

鏈?zhǔn)讲僮?/span>

一個(gè)例子

reject的用法

catch的用法

all的用法

race的用法

ECMAScript6-1搭建ES6運(yùn)行環(huán)境.ppt

子目錄：

在HBUILDER中配置Babel轉(zhuǎn)碼器

在頁(yè)面中引入browser.js的作用

引入browser.js文件也可以使瀏覽器支持babel轉(zhuǎn)碼，也是為了以防萬(wàn)一，

當(dāng)然其實(shí)不引入，也有時(shí)可以直接用ES6的語(yǔ)法。

ECMAScript6

搭建ES6運(yùn)行環(huán)境

本章目標(biāo)

了解ECMAScript6

ECMAScript6和JAVASCRIP的關(guān)系

什么是ECMAScript6

ECMAScript 6.0（以下簡(jiǎn)稱 ES6）是 JavaScript 語(yǔ)言的下一代標(biāo)準(zhǔn)，已經(jīng)在 2015 年 6 月正式發(fā)布了。它的目標(biāo)，是使得 JavaScript 語(yǔ)言可以用來(lái)編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開發(fā)語(yǔ)言。

ECMAScript6和JAVASCRIP的關(guān)系

ES6是JS的規(guī)格，JS是ES6的一種實(shí)現(xiàn)（另外的 ECMAScript 方言還有 Jscript 和 ActionScript）。日常場(chǎng)合，這兩個(gè)詞是可以互換的。

ECMAScript的歷史

2011 年 6 月，ECMAscript 5.1 版發(fā)布，并且成為 ISO 國(guó)際標(biāo)準(zhǔn)（ISO/IEC 16262:2011）。

2013 年 3 月，ECMAScript 6 草案凍結(jié)，不再添加新功能。新的功能設(shè)想將被放到 ECMAScript 7。

2013 年 12 月，ECMAScript 6 草案發(fā)布。然后是 12 個(gè)月的討論期，聽取各方反饋。

2015 年 6 月，ECMAScript 6 正式通過，成為國(guó)際標(biāo)準(zhǔn)。從 2000 年算起，這時(shí)已經(jīng)過去了 15 年。

Babel轉(zhuǎn)碼器

Babel 是一個(gè)廣泛使用的 ES6 轉(zhuǎn)碼器，可以將 ES6 代碼轉(zhuǎn)為 ES5 代碼，從而在現(xiàn)有環(huán)境執(zhí)行。這意味著，你可以用 ES6 的方式編寫程序，又不用擔(dān)心現(xiàn)有環(huán)境是否支持。

下面的原始代碼用了箭頭函數(shù)，Babel 將其轉(zhuǎn)為普通函數(shù)，就能在不支持箭頭函數(shù)的 JavaScript 環(huán)境執(zhí)行了。

在HBUILDER中配置Babel轉(zhuǎn)碼器（一）

運(yùn)行cmd命令。下載babel-cli和babel preset。

npm install --global babel-cli

npm install --global babel-preset-env

注意：安裝時(shí)間可能比較久。

使用這種方式可以使我們看到ES6語(yǔ)法以及通過Babel轉(zhuǎn)換過來(lái)的ES5代碼。

在HBUILDER中配置Babel轉(zhuǎn)碼器（二）

在HBUILDER中，工具-預(yù)編譯器設(shè)置，打開如下配置界面。選擇.js，點(diǎn)擊編輯。

在HBUILDER中配置Babel轉(zhuǎn)碼器（三）

在編輯界面中，填入觸發(fā)命令地址和命令參數(shù)。

觸發(fā)命令地址：<你的nodejs安裝目錄>\node_global\babel.cmd

命令參數(shù)：%FileName% --out-dir dist/%FileDirName%/%FileName% --source-maps --presets "<你的nodejs安裝目錄>\node_global\node_modules\babel-preset-env"

在HBUILDER中配置Babel轉(zhuǎn)碼器（四）

在HBUILDER中新建一個(gè)項(xiàng)目，Javascript版本選擇ECMAScript6。這樣，每次項(xiàng)目中的JS文件保存后，都會(huì)將編譯后的代碼文件放在項(xiàng)目中dist/下。

在頁(yè)面中引入browser.js的作用

在頁(yè)面中引入browser.js文件也可以使瀏覽器支持babel轉(zhuǎn)碼，這樣你就可以直接使用ES6語(yǔ)法寫js代碼了。

ECMAScript6-2常用語(yǔ)法.ppt

子目錄：

let命令

const命令

箭頭函數(shù)

函數(shù)的參數(shù)默認(rèn)值

操作符...的使用

對(duì)象的解構(gòu)

數(shù)組的解構(gòu)

對(duì)象字面量簡(jiǎn)寫

for...of循環(huán)

類

類的getter和setter方法

類的靜態(tài)方法

類的繼承

模板字符串

翻牌游戲

...就是Spread / Rest 操作符

Spread （展開）還是 Rest（可變數(shù)量參數(shù)）

默認(rèn)情況下，對(duì)象不可迭代。

語(yǔ)法糖

對(duì)某個(gè)屬性設(shè)置存值函數(shù)和取值函數(shù)，攔截該屬性的存取行為。

如果在一個(gè)方法前，加上static關(guān)鍵字，就表示該方法不會(huì)被實(shí)例繼承，而是直接通過類來(lái)調(diào)用，這就稱為“靜態(tài)方法”。

ECMAScript6

常用語(yǔ)法

本章目標(biāo)

let和const命令

箭頭函數(shù)

類

模板字符串

let命令（一）

ES6中新增了let命令，用來(lái)聲明變量。用法與var類似，但是用let聲明的變量，只在let所聲明的代碼塊內(nèi)有效。let命令可以使js的語(yǔ)法規(guī)則更加嚴(yán)格。

let命令（二）

let命令（三）

const命令

const命令用來(lái)聲明一個(gè)只讀的常量。一旦聲明，常量的值就不能夠改變。

const命令的作用域和let命令一樣，只在所聲明的塊級(jí)作用域內(nèi)有效。

箭頭函數(shù)（一）

ES6允許使用箭頭=>定義函數(shù)

當(dāng)函數(shù)參數(shù)只有一個(gè)時(shí)，括號(hào)可以省略；但是沒有參數(shù)時(shí)，括號(hào)不可以省略。

函數(shù)體（花括號(hào)）中有且只有一行return語(yǔ)句時(shí)，中括號(hào)及return 關(guān)鍵字可以省略。

注意：箭頭函數(shù)是一種簡(jiǎn)寫方式。

箭頭函數(shù)（二）

箭頭函數(shù)（三）

箭頭函數(shù)（四）

函數(shù)的參數(shù)默認(rèn)值（一）

在ES6之前，我們往往這樣定義參數(shù)的默認(rèn)值：

函數(shù)的參數(shù)默認(rèn)值（二）

在ES6中，我們可以這樣寫：

操作符...的使用（一）

...就是Spread / Rest 操作符，具體是 Spread （展開）還是 Rest（可變數(shù)量參數(shù)） 需要看上下文語(yǔ)境。

操作符...的使用（二）

當(dāng)被用于函數(shù)傳參時(shí)，是一個(gè) Rest 操作符

對(duì)象的解構(gòu)（一）

解構(gòu)表示從數(shù)組和對(duì)象提取值并賦值給獨(dú)特的變量。解構(gòu)對(duì)象即獲取對(duì)象中的屬性值

數(shù)組的解構(gòu)（二）

解構(gòu)數(shù)組即獲取數(shù)組中的元素。

對(duì)象字面量簡(jiǎn)寫

for...of循環(huán)（一）

for...of循環(huán)是最新添加到 JavaScript 循環(huán)系列中的循環(huán)。它結(jié)合了其兄弟循環(huán)形式 for 循環(huán)和 for...in 循環(huán)的優(yōu)勢(shì)，可以循環(huán)任何可迭代（也就是遵守可迭代協(xié)議）類型的數(shù)據(jù)。默認(rèn)情況下，包含以下數(shù)據(jù)類型：String、Array、Map 和 Set，注意不包含 Object 數(shù)據(jù)類型（即 {}）。默認(rèn)情況下，對(duì)象不可迭代。

for...of循環(huán)（二）

for 循環(huán)的最大缺點(diǎn)是需要跟蹤計(jì)數(shù)器和退出條件。

當(dāng)你需要向數(shù)組中添加額外的方法（或另一個(gè)對(duì)象）時(shí)，for...in 循環(huán)會(huì)帶來(lái)很大的麻煩。因?yàn)?for...in 循環(huán)循環(huán)訪問所有可枚舉的屬性，意味著如果向數(shù)組的原型中添加任何其他屬性，這些屬性也會(huì)出現(xiàn)在循環(huán)中。

for...of循環(huán)（三）

for...of 循環(huán)將只循環(huán)訪問對(duì)象中的值

類（一）

js語(yǔ)言中，生成實(shí)例對(duì)象的傳統(tǒng)方法就是通過構(gòu)造函數(shù)。

類（二）

ES6的class可以大致看做只是一種語(yǔ)法糖，它的絕大部分功能，ES5都可以看到，新的class寫法只是讓對(duì)象原型的寫法更加清晰，更像面向?qū)ο缶幊陶Z(yǔ)法而已。

類的getter和setter方法（三）

在“類”的內(nèi)部可以使用get和set關(guān)鍵字，對(duì)某個(gè)屬性設(shè)置存值函數(shù)和取值函數(shù)，攔截該屬性的存取行為。

類的靜態(tài)方法（四）

類相當(dāng)于實(shí)例的原型，所有在類中定義的方法，都會(huì)被實(shí)例繼承。如果在一個(gè)方法前，加上static關(guān)鍵字，就表示該方法不會(huì)被實(shí)例繼承，而是直接通過類來(lái)調(diào)用，這就稱為“靜態(tài)方法”。

類的繼承（四）

ES6中的類也可以繼承。

模板字符串（一）

在使用JS代碼輸出HTML代碼時(shí)，往往需要拼接一個(gè)HTML字符串。這種做法需要使用大量的引號(hào)和+進(jìn)行拼接才能得到我們需要的模版，顯然是十分不方便的。

模板字符串（二）

ES6中提供了模版字符串，用`（反引號(hào)）標(biāo)識(shí)，用${}將變量括起來(lái)。

模板字符串（三）

不運(yùn)行下面的代碼，說出下面兩行代碼的運(yùn)行結(jié)果。

翻牌游戲

讀懂翻牌游戲的源碼，并運(yùn)行它

ECMAScript6-3Promise對(duì)象.ppt

Promise介紹

創(chuàng)建Promise對(duì)象

執(zhí)行定時(shí)函數(shù)

then方法

傳遞數(shù)據(jù)

鏈?zhǔn)讲僮?/span>

一個(gè)例子

reject的用法

catch的用法

all的用法

race的用法

ECMAScript6

Promise內(nèi)置對(duì)象

本章目標(biāo)

Promise內(nèi)置對(duì)象用法

Promise介紹

Promise是JS中的一個(gè)構(gòu)造函數(shù)，自己身上有all、reject、resolve三個(gè)方法，原型屬性上有then、catch等方法。

創(chuàng)建方式如下：

創(chuàng)建Promise對(duì)象

為了在需要的時(shí)候才去創(chuàng)建Promise對(duì)象，我們一般將創(chuàng)建Promise對(duì)象的代碼封裝在一個(gè)函數(shù)中。

執(zhí)行定時(shí)函數(shù)

在Promise的內(nèi)部匿名函數(shù)中，我們可以執(zhí)行一段異步代碼。此時(shí)，內(nèi)部匿名函數(shù)中的代碼會(huì)與后面的代碼同時(shí)運(yùn)行。

then方法

如何保證匿名內(nèi)部函數(shù)的代碼運(yùn)行完后再執(zhí)行后面的代碼，這個(gè)時(shí)候，就需要調(diào)用Promise的then方法，then就是然后的意思。

傳遞數(shù)據(jù)

鏈?zhǔn)讲僮鳎ㄒ唬?/p>

我們?cè)谫?gòu)物時(shí)，會(huì)經(jīng)歷選擇商品，下單，收快遞三個(gè)過程，他們是有先后順序的。

鏈?zhǔn)讲僮鳎ǘ?/p>

鏈?zhǔn)讲僮鳎ㄈ?/p>

我們可以通過then方法的鏈?zhǔn)讲僮?，使這三個(gè)任務(wù)依次執(zhí)行。

一個(gè)例子

Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案–回調(diào)函數(shù)和事件－－更合理和更強(qiáng)大。

reject的用法（一）

事實(shí)上，我們前面的例子都是只有“執(zhí)行成功”的回調(diào)，還沒有“失敗”的情況，reject的作用就是把Promise的狀態(tài)置為rejected，這樣我們?cè)趖hen中就能捕捉到，然后執(zhí)行“失敗”情況的回調(diào)。

reject的用法（二）

catch的用法

catch的作用是：在執(zhí)行resolve的回調(diào)（也就是上面then中的第一個(gè)參數(shù)）時(shí)，如果拋出異常了（代碼出錯(cuò)了），那么并不會(huì)報(bào)錯(cuò)卡死js，而是會(huì)進(jìn)到這個(gè)catch方法中。類似于java中的try-catch語(yǔ)句

all的用法（一）

all的用法（二）

race的用法（一）

race的用法（二）

運(yùn)行效果：