第1章 ES6基礎 教學設計

1、黑馬程序員«web前端模塊化開發(fā)教程(es 6+n ode.j s+webpackj教學設計課程名株：授課年級：授課學期:教師姓名：課題名稱第1章es6基礎計劃 課時8課時教學引入ecmascript是由ecma國際標準化組織制定的一項腳本語言的標準化規(guī) 范，es6表示ecmascript規(guī)范的第6版，它的正式名稱為ecmascript 2015, 這個版本中新增了很多實用的語法規(guī)范。近兒年,ecmascript的更新速度很快， 每年都會發(fā)布一個新版本。本章將詳細講解es6常用的語法規(guī)范。教學目標 使學生了解es6的概念，能夠對es6有一個初步的認識 使學生掌握let和const關鍵

2、字的使用，能夠選擇合適的關鍵字聲明變量 使學生掌握解構賦值的使用，能夠實現(xiàn)數組和對象的解構賦值 使學生掌握箭頭函數的使用，能夠正確使用this關鍵字 使學生掌握剩余參數的使用，能夠正確獲取剩余參數 使學生掌握擴展運算符的使用，能夠實現(xiàn)數組合并，以及將偽數組轉換為 真正的數組 使學生掌握模板字符串的使用，能夠實現(xiàn)變量解析、換行和調用函數等操 作 使學生掌握es6內置對象擴展的使用，能夠實現(xiàn)數組和字符串的處理 使學生掌握set數據結構和symbol的基本使用，能夠實現(xiàn)數據的操作教學重點 let關鍵字 const關鍵字 數組的解構賦值 對象的解構賦值 數組的擴展方法 字符串的擴展方法 set實例的操

3、作方法 set實例遍歷方法教學難點 箭頭函數中的this關鍵字 數組的擴展方法 set實例的操作方法教學方式課堂教學以ppt講授為主，并結合多媒體進行教學教 學 過 程第一課時（初識es6、let關鍵字、const關鍵字，let const、var關鍵字之間 的區(qū)別）一、創(chuàng)設情景，導入新課ecmascript 是 javascript 語言的標準，javascript 是實現(xiàn) ecmascript 標準 的腳本語言。es6表示ecmascript規(guī)范的第6版,它的正式名稱為ecmascript 2015,這個版本中新增了很多實用的語法規(guī)范。es6的出現(xiàn)，給前端開發(fā)人員帶來了新的驚喜。es6帶來

4、了許多新特性，可 以更加方便地實現(xiàn)很多復雜的操作，提高開發(fā)人員的效率。本節(jié)講解es6的概念，es6中的let關鍵字和const關鍵字，以及l(fā)et、const> var關鍵字之間的區(qū)別。二、新課講解知識點1-初識es6教師通過ppt的方式講解ecmascript和javascript語言兩者之間的關系， 以及es6的由來。(1) 簡單來說，ecmascript是javascript語言的國際標準，javascript是 實現(xiàn)ecmascript標準的腳本語言。(2) 2011年，ecma國際標準化組織在發(fā)布ecmascript 5.1版本之后， 就開始著手制定第6版規(guī)范。(3) 嚴格來說,

5、es6是ecmascript 2015的簡稱，不應用來表示ecmascript 2015之后的版本，但許多資料習慣用es6來泛指ecmascript 2015 及之后的新版本，我們也沿用這一習慣。我們所講的es6也加入了新 版本的內容，并沒有局限在ecmascript 2015版本內。(4) ecmascript版本眾多，且更新較快，對初學者來說，并不需要刻意區(qū) 分每個版本的差別，只要掌握一些常用語法的使用即可。知識點2-let關鍵字教師通過ppt結合實際操作的方式講解let關鍵字的新特性。(1) let關鍵字聲明的變量只在所處的塊級有效。 使用let關鍵字聲明變量，可以防止內層變量覆蓋外層變

6、量。 防止循環(huán)變量變成全局變量。(2) let關鍵字聲明的變量不存在變量提升。(3) let關鍵字聲明的變量具有暫時性死區(qū)特性。知識點3-const關鍵字教師通過ppt結合實際操作的方式講解const關鍵字聲明的常量。(1) const關鍵字聲明的常量具有塊級作用域。(2) const關鍵字聲明常量時必須賦值。(3) const關鍵字聲明常量并賦值后，值不能修改。 對于基本數據類型的值(如數值、字符串)，一旦賦值，值就不可 修改。 對于復雜數據類型(如數組、對象)，雖然不能重新賦值，但是可 以更改數據結構內部的值。知識點4- let> const、var關鍵字之間的區(qū)別教師通過ppt的方

7、式講解javascript中的let關鍵字和const關鍵字與以前 經常使用的var關鍵字之間的區(qū)別。(1) 變量的作用域范圍不同。 使用var關鍵字聲明的變量，其作用域為該語句所在的函數內， 且存在變量提升現(xiàn)象。 使用let關鍵字聲明的變量和使用const關鍵字聲明的常量都具有 塊級作用域。如果在語句塊中聲明，只能在語句塊中訪問它們， 而不能在語句塊外部訪問它們。(2) 變量提升。 使用var關鍵字聲明的變量存在變量提升，可以先使用再聲明。 使用let關鍵字聲明的變量和const關鍵字聲明的常量不存在變量 提升功能，并且它們的語法更嚴格，只能先聲明再使用。(3) 值是否能夠改變。 對于使用v

8、ar關鍵字和let關鍵字聲明的變量，可以更改變量的值。 對于使用const關鍵字聲明的常量，不能更改常量值對應的內存 地址。三、歸納總結教師回顧本節(jié)課所講的內容，并通過測試題的方式引導學生解答問題并給 予指導。四、布置作業(yè)教師通過高校教輔平臺()布置本節(jié)課作業(yè)以及下節(jié)課 的預習作業(yè)。第二課時(數組的解構賦值、對象的解構賦值)一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固 講解。二、通過直接引入的方式導入新課解構表示對數據結構進行分解，賦值是指將某一數值賦給變量的過程。在 es6中，允許按照一一對應的方式，從數組或對象中提取值，然后將提取出來 的值賦給變量。解構賦值

9、的優(yōu)點是它可以讓編寫的代碼簡潔易讀，語義更加清 晰，并且可以方便地從數組或對象中提取值。下面將分別講解數組和對象的解 構賦值。三、新課講解知識點1 數組的解構賦值教師通過ppt結合實際操作的方式講解數組的解構賦值。(1) 什么是數組的解構賦值。 數組的解構賦值，就是將數組中的值提取出來，然后賦值給另外 的變量。(2) 數組解構的基本形式 變量的數量和數組中值的數量相一致的情況。 如果變量的數量和數組中值的數量不一致，那么變量的值就等于 undefined,也就是解構不成功。知識點2.對象的解構賦值教師通過ppt結合實際操作的方式講解對象的解構賦值。(1) 什么是對象的解構賦值。 對象解構允許使

10、用變量的名字匹配對象中屬性，如果匹配成功就 將對象中屬性的值賦值給變量。(2) 對象解構的第一種形式。 等號左邊的大括號中寫的是變量的名字，等號的右邊要寫具體被 解構的對象(3) 對象解構的第二種形式。 這種形式支持變量的名字和對象中屬性的名字不一樣的情況，等 號左邊的大括號代表對象解構，它的語法和對象類似，通過大括 號中的屬性匹配對象當中的屬性。四、歸納總結通過提問的方式加強學生對數組和對象解構賦值的認識。五、布置作業(yè)教師通過高校教輔平臺()布置本節(jié)課作業(yè)以及下節(jié)課 的預習作業(yè)。第三課時(箭頭函數的語法、箭頭函數的特點、箭頭函數中的this關鍵字)一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對

11、學生吸收不好的知識點進行再次鞏固 講解。二、通過需求引入的方式導入新課講解es6中箭頭函數的概念和作用，引出箭頭函數的語法、特點等內容。三、新課講解知識點1 箭頭函數的語法教師通過ppt結合實際操作的方式講解定義箭頭函數的基本語法。 箭頭函數基本語法為：()=> 箭頭函數以小括號開頭，在小括號中可以放置參數。小括號的后 面要跟上箭頭(=>),箭頭后面要寫一個方括號來表示函數體， 這是箭頭函數的固定語法。 箭頭函數沒有名字，在實際開發(fā)中，通常的做法是把箭頭函數5k 值給一個變量，變量名字就是函數名字，然后通過變量名字去調 用函數。 也可以定義一個沒有參數的箭頭函數。知識點2.箭頭函數

12、的特點教師通過ppt結合實際操作的方式講解箭頭函數的特點。(1) 省略大括號。 在箭頭函數中，如果函數體中只有一句代碼，且代碼的執(zhí)行結果 就是函數的返回值，此時可以省略函數體大括號。 案例：定義一個函數計算兩個數值相加的結果，該函數接收兩個 數值作為參數，在函數體內計算兩個數值相加的結果并返回。(2) 省略參數外部的小括號。 在箭頭函數中，如果參數只有一個，可以省略參數外部的小括號。 案例：演示es6箭頭函數中，只有一個參數的函數定義方式。 案例：演示帶有一個參數的函數，并在瀏覽器的彈出框中彈出參 數值。知識點3.箭頭函數中的this關鍵字教師通過ppt結合實際操作的方式講解箭頭函數中的thi

13、s關鍵字。(1) 講解在es6中，this關鍵字的指向問題。 在es6中，箭頭函數不綁定ihis關鍵字，它沒有自己的this關鍵 字。 如果在箭頭函數中使用this關鍵字，那么this關鍵字指向的是箭 頭函數定義位置的上下文this。(2) 通過案例演示es6中this的指向問題。四、歸納總結通過提問的方式加強學生對箭頭函數特點的認識。五、布置作業(yè)教師通過高校教輔平臺()布置本節(jié)課作業(yè)以及下節(jié)課 的預習作業(yè)。第四課時(剩余參數的語法、剩余參數和解構賦值配合使用、擴展運算符的語法、擴展運算符的應用)一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固 講解。二、通過需求引

14、入的方式導入新課在es6之前，javascript函數內部有一個arguments對象，可以使用這個對 象來獲取所有實參。現(xiàn)在es6給我們提供了一個新的對象，也可以實現(xiàn)這一功 能，并且該對象也可以很方便地獲取函數中除開始參數之外的其余參數。三、新課講解知識點1 剩余參數的語法教師通過ppt結合實際操作的方式講解剩余參數的語法。(1) 什么是剩余參數。 剩余參數是程序員自定義的一個普通標識符，接收剩余參數的變 量是一個數組(array的實例)。 可以直接使用所有的數組方法，如sort。、map。、foreach()或pop() 方法等。(2) 通過案例演示如何使用剩余參數計算多個數值的求和結果。

15、知識點2-剩余參數和解構賦值配合使用教師以數組的解構賦值為例，演示剩余參數和解構的使用方法。 使用let關鍵字聲明了一個students數組。 數組中有3個值，分別為“王五”“張三”“李四” 使用解構的方式從數組中提取值，數組中有3個值，但只有2個 解構變量。在這種情況下，si變量對應“王五”，我們在s2前面 添加3個點來接收students數組中剩余的元素。 結果，s2變量是一個數組，存儲了 “張三”“李四”兩個元素。 知識點3-擴展運算符的語法教師通過案例的形式，演示擴展運算符在數組中的使用。 使用let關鍵字聲明了一個ary數組，數組中有3個值，分別為1、 2、3o 在數組變量名ary的

16、前面添加3個點，表示將數組元素拆分成以 逗號分隔的參數序列。 console.logo方法可以接收多個參數，多個參數以逗號分隔，表示 一次輸出多個內容 使用擴展運算符將ary數組拆分成以逗號分隔的參數序列后，又 將參數序列放在了 console.logo方法中，此時參數序列中的逗號會 被當成console.logo方法的參數分隔符，所以輸出結果中沒有逗 號。知識點4.擴展運算符的應用教師通過ppt結合實際操作的方式講解擴展運算符的應用。(1) 利用擴展運算符合并數組。 通過案例演示數組合并的2種方式。(2) 利用擴展運算符將偽數組轉換為真正的數組。 偽數組可以應用數組的length屬性但是無法

17、直接調用數組方法， 它也可以像數組一樣進行遍歷。典型的偽數組包括函數中的 arguments> documcnt.getelemcntsbytagname()返回的元素集合， 以及 document.childnodes 等。 通過案例的形式使用擴展運算符來將偽數組或可遍歷的對象轉換 為真正的數組。四、歸納總結通過提問的方式加強學生對擴展運算符的認識。五、布置作業(yè)教師通過高校教輔平臺()布置本節(jié)課作業(yè)以及下節(jié)課 的預習作業(yè)。第五課時(模板字符串、數組的擴展方法、字符串的擴展方法)一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固 講解。二、通過需求引入的方式導入

18、新課在程序開發(fā)中，經常需要將字符串和變量拼接在一起，或者需要用字符串 來保存一大段html代碼。如果使用傳統(tǒng)的單引號和雙引號語法，寫起來會比 較麻煩，代碼可讀性也不好，因此es6提供了一種新的字符串創(chuàng)建方式，就是 用反引號來定義模板字符串。es6為array (數組)、string (字符串)等內置對象提供了許多擴展方法， 從而幫助開發(fā)人員提高開發(fā)效率。通過擴展方法可以實現(xiàn)很多方便的功能，如 將偽數組轉換為真正的數組、在數組中查找出符合條件的數組成員等。本節(jié)講解模板字符串、數組的擴展方法、字符串的擴展方法。三、新課講解知識點1 模板字符串教師通過ppt結合實際操作的方式講解模板字符串的語法和應

19、用。(1) 模板字符串的語法。 模板字符串是es6新增的創(chuàng)建字符串的方式，它使用反引號進行 定義。 通過案例的形式演示如何定義模板字符串。(2) 模板字符串的應用。 模板字符串可以解析變量。 教師通過案例的形式演示模板字符串如何解析變量。 在模板字符串中可以換行。 教師通過案例的形式演示模板字符串如何換行。 在模板字符串中可以調用函數。 教師通過案例的形式演示模板字符串中如何調用函數。知識點2.數組的擴展方法教師通過ppt結合實際操作的方式講解數組的擴展方法。(1)使用數組的擴展方法from。將偽數組轉換為真正的數組。 在array構造函數中，提供了一個from。方法，它可以接收一個 偽數組作

20、為參數，返回值為轉換后的結果，這個結果是一個真正 的數組。 在array構造函數中，from。方法還可以接收兩個參數，這與數組 中的map。方法類似，它用于處理數組中的每個元素并將處理后 的結果放入返回的數組中。(2) 使用數組實例的find。方法在數組中查找出第一個符合條件的數組成 員。 在數組實例中，es6提供了一個find。方法，它用于在數組中查找 出第一個符合條件的數組成員。 find()方法接收一個函數作為參數，所有數組成員依次執(zhí)行該回調 函數，直到找出第一個返回值為true的成員，然后返回該成員， 如果沒有找到符合條件的成員，則返回undefinedo(3) 使用數組實例的find

21、lndex()方法在數組中查找出第一個符合條件的數 組成員的位置。 在數組實例中,findlndex()方法用于在數組中查找出第一個符合條 件的數組成員的位置，如果沒有找到則返回1。findlndexo方法的 使用與and。方法非常類似。(4) 使用數組實例的includes()方法檢查是否包含某個給定的值。 es6中為數組實例提供了 includes()方法來表示某個數組是否包含 給定的值，返回一個布爾值，true表示包含給定的值，false表示 不包含給定的值。知識點3.字符串的擴展方法教師通過ppt結合實際操作的方式講解字符串的擴展方法。(1) 字符串實例的startswith()方法和

22、endswith。方法。 startswith。方法表示參數字符串是否在原字符串的頭部，用來判 斷字符串是否以某字符串開頭。 endswith()方法表示參數字符串是否在原字符串的尾部，用來判斷 字符串是否以某字符串結尾。上述兩個方法如果滿足條件則返回 true,反之返回falseo(2) 字符串實例的repeat()方法。 repcat()方法表示將原字符串重復n次，它返回一個新字符串，并 接收一個數值作為參數，表示將字符串重復多少次。四、歸納總結通過提問的方式加強學生對數組和字符串擴展方法的認識。五、布置作業(yè)教師通過高校教輔平臺()布置本節(jié)課作業(yè)以及下節(jié)課 的預習作業(yè)。第六課時(set數據

23、結構基本使用、set實例的操作方法、set實例的遍歷方法、 symbol的基本使用、使用symbol作為對象屬性名)一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固 講解。二、通過直接引入的方式導入新課es6提供了新的數據結構set。set類似于數組，但是成員的值都是唯一的, 沒有重復的值。set實例的方法分為兩大類，即操作方法(用于操作數據)和遍 歷方法(用于遍歷成員)。symbol是es6中新增的一種原始數據類型，它的功能類似于一種標識唯 一性的id值，表示獨一無二。本節(jié)講解set與symbol相關的知識內容。三、新課講解知識點lset數據結構基本使用教師通過p

24、pt結合實際操作的方式講解set數據結構。(1) set數據結構的應用場景。 set數據結構常用于電商網站的搜索功能，用戶搜索完成后，網站 要記錄用戶搜索的關鍵字，方便用戶下次直接單擊搜索歷史關鍵 字就可以完成搜索。 搜索歷史關鍵字的存儲可以使用set數據結構，因為搜索歷史關 鍵字不能有重復的值，而用戶完全有可能多次輸入相同的搜索關 鍵字。使用set存儲值時，set數據結構內部會自動判斷值是否重 復，如果重復則不會進行存儲。(2) 數組解構的基本使用。 創(chuàng)建set數據結構。 初始化set數據結構。 利用set數據結構給數組去重。知識點2-set實例的操作方法教師通過ppt結合實際操作的方式講解

25、set實例的操作方法。(1) set實例的add。方法。 set實例提供的add。方法用于向set數據結構中添加某個值，它 接收一個參數代表要添加的值，返回set結構本身。(2) set實例的delete()方法。 set實例提供的delete。方法用于刪除set數據結構中的某個值， 它接收一個參數代表要刪除的值，返回一個布爾值，表示刪除是 否成功。 如果結果為true則表示刪除成功，為false則表示刪除失敗。(3) set實例的has()方法。 set實例提供的has。方法，它接收一個參數代表該參數是否為set 數據結構中的成員，返回一個布爾值。 如果結果為true則表示包含該成員，為false則表示不包含該成員。(4) set實例的clear。方法。 set實例提供的clear。方法用于清除set數據結構中的所有成員， 該方法沒有返回值。知識點3-set實例的遍歷方法教師通過ppt結合實際操作的方式講解set實例的遍歷方法。 set數據結構的實例提供了 foreach()方法，用于遍歷set數據結