Web前端模塊化開發(fā)教程全套ppt課件最全電子教案完整版教學(xué)教程整套全書課件ppt

1、第1章 ES6基礎(chǔ)Web前端模塊化開發(fā)教程（ES6+Node.js+Webpack）學(xué)習(xí)目標(biāo)/Target 了解ES6的概念，能夠?qū)S6有一個(gè)初步的認(rèn)識(shí) 掌握let和const關(guān)鍵字的使用，能夠選擇合適的關(guān)鍵字聲明變量 掌握解構(gòu)賦值的使用，能夠?qū)崿F(xiàn)數(shù)組或?qū)ο蟮慕鈽?gòu)賦值 掌握箭頭函數(shù)的使用，能夠正確使用this關(guān)鍵字 掌握剩余參數(shù)的使用，能夠正確獲取剩余參數(shù)學(xué)習(xí)目標(biāo)/Target 掌握擴(kuò)展運(yùn)算符的使用，能夠?qū)崿F(xiàn)數(shù)組合并，以及將偽數(shù)組轉(zhuǎn)換為真正的數(shù)組 掌握模板字符串的使用，能夠?qū)崿F(xiàn)變量解析、換行和調(diào)用函數(shù)等操作 掌握ES6內(nèi)置對(duì)象擴(kuò)展的使用，能夠?qū)崿F(xiàn)數(shù)組和字符串的處理 掌握Set數(shù)據(jù)結(jié)構(gòu)和Sym

2、bol的基本使用，能夠?qū)崿F(xiàn)數(shù)據(jù)的操作章節(jié)概述/ SummaryECMAScript是由ECMA國(guó)際標(biāo)準(zhǔn)化組織制定的一項(xiàng)腳本語言的標(biāo)準(zhǔn)化規(guī)范，ES6表示ECMAScript規(guī)范的第6版，它的正式名稱為ECMAScript 2015，這個(gè)版本中新增了很多實(shí)用的語法規(guī)范。近幾年，ECMAScript的更新速度很快，每年都會(huì)發(fā)布一個(gè)新版本。本章將詳細(xì)講解ES6常用的語法規(guī)范。目錄/Contents010203初識(shí)ES6let和const關(guān)鍵字解構(gòu)賦值0405箭頭函數(shù)剩余參數(shù)目錄/Contents060708擴(kuò)展運(yùn)算符模板字符串ES6的內(nèi)置對(duì)象擴(kuò)展0910Set數(shù)據(jù)結(jié)構(gòu)初識(shí)Symbol初識(shí)ES61.1

3、先定一個(gè)小目標(biāo)！了解ES6的概念，能夠?qū)S6有一個(gè)初步的認(rèn)識(shí)初識(shí)ES6初識(shí)ES6ES6的目標(biāo)是使JavaScript語言可以適應(yīng)更復(fù)雜的應(yīng)用，實(shí)現(xiàn)代碼庫(kù)之間的共享，并迭代維護(hù)新版本，成為企業(yè)級(jí)開發(fā)語言。ECMAScript和JavaScript語言，兩者之間存在的關(guān)系。簡(jiǎn)單來說，ECMAScript是JavaScript語言的國(guó)際標(biāo)準(zhǔn)，JavaScript是實(shí)現(xiàn)ECMAScript標(biāo)準(zhǔn)的腳本語言。ES6歷史發(fā)展初識(shí)ES62011年，ECMA國(guó)際標(biāo)準(zhǔn)化組織在發(fā)布ECMAScript 5.1版本之后，就開始著手制定第6版規(guī)范。存在的問題：這個(gè)版本引入的語法功能太多，而且制定過程當(dāng)中，還有很多組織

4、和個(gè)人不斷提交新功能。很明顯，在一個(gè)版本中不可能包含所有的要引入的新功能，這些功能要被發(fā)布在不同的版本中。解決方法：標(biāo)準(zhǔn)的制定者決定在每年的6月份發(fā)布一次新標(biāo)準(zhǔn)，并且使用年份作為版本號(hào)。初識(shí)ES6年份版本簡(jiǎn)稱2015年6月ECMAScript 2015ES62016年6月ECMAScript 2016ES72017年6月ECMAScript 2017ES82018年6月ECMAScript 2018ES92019年6月ECMAScript 2019ES102020年6月ECMAScript 2020ES11ECMAScript各版本的發(fā)布時(shí)間let和const關(guān)鍵字1.2 先定一個(gè)小目標(biāo)！掌握

5、let關(guān)鍵字，能夠正確使用let關(guān)鍵字聲明變量1.2.1 let關(guān)鍵字1.2.1 let關(guān)鍵字let是ES6中新增的用于聲明變量的關(guān)鍵字。在ES6之前，我們使用var關(guān)鍵字來聲明變量。與var關(guān)鍵字相比，let關(guān)鍵字有一些新的特性。let關(guān)鍵字的新的特性： let關(guān)鍵字聲明的變量只在所處的塊級(jí)作用域有效。 let關(guān)鍵字聲明的變量不存在變量提升。 let關(guān)鍵字聲明的變量具有暫時(shí)性死區(qū)特性。1. let關(guān)鍵字聲明的變量只在所處的塊級(jí)作用域有效 if (true) let a = 10; console.log(a);/ 輸出結(jié)果：10 console.log(a);/ 報(bào)錯(cuò)，a未定義1.2.1 l

6、et關(guān)鍵字第1個(gè)好處：防止代碼塊內(nèi)層變量覆蓋外層變量 for (let i = 0; i 2; i+) console.log(i);/ 報(bào)錯(cuò)，i未定義1.2.1 let關(guān)鍵字第2個(gè)好處：防止循環(huán)變量變成全局變量1. let關(guān)鍵字聲明的變量只在所處的塊級(jí)作用域有效1.2.1 let關(guān)鍵字在使用var關(guān)鍵字聲明變量時(shí)，變量可以先使用再聲明，這種現(xiàn)象就是變量提升。但一般的編程習(xí)慣，變量應(yīng)該在聲明之后才可以使用。在ES6中，變量的使用規(guī)范更加嚴(yán)格，使用let關(guān)鍵字聲明的變量只能在聲明之后才可以使用，否則就會(huì)報(bào)錯(cuò)。2. let關(guān)鍵字聲明的變量不存在變量提升 console.log(a);/ 報(bào)錯(cuò)，a未

7、初始化 let a = 10; 1.2.1 let關(guān)鍵字不存在變量提升的代碼演示2. let關(guān)鍵字聲明的變量不存在變量提升1.2.1 let關(guān)鍵字使用let關(guān)鍵字聲明的變量具有暫時(shí)性死區(qū)特性。這是因?yàn)閘et關(guān)鍵字聲明的變量不存在變量提升，其作用域都是塊級(jí)作用域，在塊級(jí)作用域內(nèi)使用let關(guān)鍵字聲明的變量會(huì)被整體綁定在這個(gè)塊級(jí)作用域中形成封閉區(qū)域，不再受外部代碼影響。所以在塊級(jí)作用域內(nèi)，使用let關(guān)鍵字聲明變量之前，該變量都是不可用的。這在語法上，稱為“暫時(shí)性死區(qū)”。3. let關(guān)鍵字聲明的變量具有暫時(shí)性死區(qū) var num = 10; if (true) console.log(num);/ 報(bào)

8、錯(cuò)，無法在初始化之前訪問num let num = 20; 1.2.1 let關(guān)鍵字暫時(shí)性死區(qū)的代碼演示3. let關(guān)鍵字聲明的變量具有暫時(shí)性死區(qū) 先定一個(gè)小目標(biāo)！掌握const關(guān)鍵字，能夠利用const關(guān)鍵字聲明常量1.2.2 const關(guān)鍵字1.2.2 const關(guān)鍵字const是ES6中新增的用于聲明常量的關(guān)鍵字。所謂常量就是值（內(nèi)存地址）不能變化的量。const關(guān)鍵字聲明的常量的特點(diǎn)： const關(guān)鍵字聲明的常量具有塊級(jí)作用域。 const關(guān)鍵字聲明常量時(shí)必須賦值。 const關(guān)鍵字聲明常量并賦值后常量的值不能修改。1. const關(guān)鍵字聲明的常量具有塊級(jí)作用域 if (true) c

9、onst a = 10; console.log(a);/ 輸出結(jié)果：10 console.log(a);/ 報(bào)錯(cuò)，a未定義1.2.2 const關(guān)鍵字演示const關(guān)鍵字聲明的常量塊級(jí)作用域效果2. const關(guān)鍵字聲明常量時(shí)必須賦值1.2.2 const關(guān)鍵字演示const關(guān)鍵字聲明常量時(shí)不賦值的情況 const PI;/ 報(bào)錯(cuò)，常量PI未賦值 const PI = 3.14; PI = 100;/ 報(bào)錯(cuò)，無法對(duì)常量賦值3. const關(guān)鍵字聲明常量并賦值后常量的值不能修改1.2.2 const關(guān)鍵字（1）對(duì)于基本數(shù)據(jù)類型（如數(shù)值、字符串），一旦賦值，值就不可修改。 const ary =

10、 100, 200; ary0 = a; ary1 = b; console.log(ary); / 可以更改數(shù)組內(nèi)部的值，結(jié)果為a, b ary = a, b; / 報(bào)錯(cuò)，無法對(duì)常量賦值1.2.2 const關(guān)鍵字（2）對(duì)于復(fù)雜數(shù)據(jù)類型（如數(shù)組、對(duì)象），雖然不能重新賦值，但是可以更改內(nèi)部的值。3. const關(guān)鍵字聲明常量并賦值后常量的值不能修改 先定一個(gè)小目標(biāo)！了解let、const、var關(guān)鍵字之間的區(qū)別，能夠說出3點(diǎn)區(qū)別1.2.3 let、const、var關(guān)鍵字之間的區(qū)別1.2.3 let、const、var關(guān)鍵字之間的區(qū)別使用var關(guān)鍵字聲明的變量，其作用域?yàn)樵撜Z句所在的函數(shù)內(nèi)，且

11、存在變量提升現(xiàn)象。使用let關(guān)鍵字聲明的變量和使用const關(guān)鍵字聲明的常量都具有塊級(jí)作用域。變量的作用域范圍不同使用var關(guān)鍵字聲明的變量存在變量提升，可以先使用再聲明。使用let關(guān)鍵字聲明的變量和const關(guān)鍵字聲明的常量不存在變量提升功能，只能先聲明再使用。變量提升使用var關(guān)鍵字和let關(guān)鍵字聲明的變量，可以更改變量的值，但使用const關(guān)鍵字聲明的常量，不能更改常量值對(duì)應(yīng)的內(nèi)存地址。值是否可以更改let、const、var關(guān)鍵字之間的區(qū)別1.2.3 let、const、var關(guān)鍵字之間的區(qū)別在編寫程序的過程中，如果要存儲(chǔ)的數(shù)據(jù)不需要更改，建議使用const關(guān)鍵字，如函數(shù)的定義、 值或

12、數(shù)學(xué)公式中一些恒定不變的值。由于使用const聲明的常量，其值不能更改，且JavaScript解析引擎不需要實(shí)時(shí)監(jiān)控值的變化，所以使用const關(guān)鍵字要比let關(guān)鍵字效率更高。解構(gòu)賦值1.3 先定一個(gè)小目標(biāo)！掌握數(shù)組的解構(gòu)賦值，能夠?qū)?shù)組進(jìn)行解構(gòu)賦值操作1.3.1 數(shù)組的解構(gòu)賦值1.3.1 數(shù)組的解構(gòu)賦值解構(gòu)表示對(duì)數(shù)據(jù)結(jié)構(gòu)進(jìn)行分解，賦值指變量的賦值。在ES6中，允許按照一一對(duì)應(yīng)的方式，從數(shù)組或?qū)ο笾刑崛≈担缓髮⑻崛〕鰜淼闹蒂x給變量。解構(gòu)賦值的優(yōu)點(diǎn)是它可以讓編寫的代碼簡(jiǎn)潔易讀，語義更加清晰，并且可以方便地從數(shù)組或?qū)ο笾刑崛≈怠?.3.1 數(shù)組的解構(gòu)賦值數(shù)組的解構(gòu)賦值，就是將數(shù)組中的值提取出來，

13、然后賦值給另外的變量。 let a, b, c = 1, 2, 3; console.log(a);/ 輸出結(jié)果：1 console.log(b);/ 輸出結(jié)果：2 console.log(c);/ 輸出結(jié)果：3變量的數(shù)量和數(shù)組中值的數(shù)量相一致的情況1.3.1 數(shù)組的解構(gòu)賦值 let a, b, c, d = 1, 2, 3; console.log(a);/ 輸出結(jié)果：1 console.log(b);/ 輸出結(jié)果：2 console.log(c);/ 輸出結(jié)果：3 console.log(d);/ 輸出結(jié)果：undefined變量的數(shù)量和數(shù)組中值的數(shù)量不一致的情況 先定一個(gè)小目標(biāo)！掌握對(duì)象

14、的解構(gòu)賦值，能夠?yàn)閷?duì)象進(jìn)行解構(gòu)賦值操作1.3.2 對(duì)象的解構(gòu)賦值1.3.2 對(duì)象的解構(gòu)賦值對(duì)象解構(gòu)允許使用變量的名字匹配對(duì)象中屬性，如果匹配成功就將對(duì)象中屬性的值賦值給變量。 let person = name: zhangsan, age: 20 ; let name, age = person;/ 解構(gòu)賦值 console.log(name);/ 輸出結(jié)果：zhangsan console.log(age);/ 輸出結(jié)果：20對(duì)象解構(gòu)的示例代碼變量的名字具體被解構(gòu)的對(duì)象1.3.2 對(duì)象的解構(gòu)賦值使用另外一種形式去實(shí)現(xiàn)對(duì)象的解構(gòu)賦值，該形式支持變量的名字和對(duì)象中屬性的名字不一樣的情況，等號(hào)左

15、邊的大括號(hào)代表對(duì)象解構(gòu)。 let person = name: zhangsan, age: 20, sex: 男 ; let name: myName = person; console.log(myName);/ zhangsan對(duì)象解構(gòu)的另一種形式屬性名:變量名具體被解構(gòu)的對(duì)象箭頭函數(shù)1.4 先定一個(gè)小目標(biāo)！熟悉箭頭函數(shù)的語法，能夠正確寫出箭頭函數(shù)1.4.1 箭頭函數(shù)的語法1.4.1 箭頭函數(shù)的語法箭頭函數(shù)是ES6中新增的函數(shù)，它用于簡(jiǎn)化函數(shù)的定義語法，有自己的特殊語法，接收一定數(shù)量的參數(shù)，并在其封閉的作用域的上下文（即定義它們的函數(shù)或其他代碼）中操作。() = 箭頭函數(shù)基本語法ES6中

16、，箭頭函數(shù)的基本語法1.4.1 箭頭函數(shù)的語法箭頭函數(shù)以小括號(hào)開頭，在小括號(hào)中可以放置參數(shù)。小括號(hào)的后面要跟著箭頭（=），箭頭后面要寫一個(gè)大括號(hào)來表示函數(shù)體，這是箭頭函數(shù)的固定語法。箭頭函數(shù)調(diào)用：因?yàn)榧^函數(shù)沒有名字，我們通常的做法是把箭頭函數(shù)賦值給一個(gè)變量，變量名就是函數(shù)名，然后通過變量名去調(diào)用函數(shù)即可。 const fn = () = console.log(123);/ 輸出結(jié)果：123 ; fn();/ 函數(shù)調(diào)用定義沒有參數(shù)的箭頭函數(shù)1.4.1 箭頭函數(shù)的語法 先定一個(gè)小目標(biāo)！熟悉箭頭函數(shù)的特點(diǎn)，能夠說出箭頭函數(shù)的具體特點(diǎn)1.4.2 箭頭函數(shù)的特點(diǎn)1.4.2 箭頭函數(shù)的特點(diǎn)consts

17、um=(num1,num2)=num1+num2; / 等價(jià)于/ constsum=(num1,num2)=/ returnnum1+num2;/ ;constresult=sum(10,20); /使用result接收sum()函數(shù)執(zhí)行的結(jié)果console.log(result); /在控制臺(tái)輸出result值，結(jié)果為30計(jì)算兩個(gè)數(shù)值相加的結(jié)果特點(diǎn)1: 省略大括號(hào)在箭頭函數(shù)中，如果函數(shù)體中只有一句代碼，且代碼的執(zhí)行結(jié)果就是函數(shù)的返回值，此時(shí)可以省略函數(shù)體大括號(hào)。1.4.2 箭頭函數(shù)的特點(diǎn) / 傳統(tǒng)的函數(shù)定義方式 / function fn(v) / return v; / / ES6中函數(shù)定

18、義方式 const fn = v = v;只有一個(gè)參數(shù)的函數(shù)定義方式特點(diǎn)2: 省略參數(shù)外部的小括號(hào)在箭頭函數(shù)中，如果參數(shù)只有一個(gè)，可以省略參數(shù)外部的小括號(hào)。1.4.2 箭頭函數(shù)的特點(diǎn) const fn = v = alert(v); ; fn(20);示例代碼定義帶有一個(gè)參數(shù)的函數(shù)，并在瀏覽器的彈出框中彈出參數(shù)值。特點(diǎn)2: 省略參數(shù)外部的小括號(hào) 先定一個(gè)小目標(biāo)！掌握箭頭函數(shù)中的this關(guān)鍵字，能夠在箭頭函數(shù)中正確使用this關(guān)鍵字1.4.3 箭頭函數(shù)中的this關(guān)鍵字1.4.3 箭頭函數(shù)中的this關(guān)鍵字ES6前，JavaScript的this關(guān)鍵字指向的對(duì)象是在運(yùn)行時(shí)基于函數(shù)的執(zhí)行環(huán)境綁定的

19、，在全局函數(shù)中，this指向的是window；當(dāng)函數(shù)被作為某個(gè)對(duì)象的方法調(diào)用時(shí)，this就指向那個(gè)對(duì)象。ES6中，箭頭函數(shù)不綁定this關(guān)鍵字，它沒有自己的this關(guān)鍵字，如果在箭頭函數(shù)中使用this關(guān)鍵字，那么this關(guān)鍵字指向的是箭頭函數(shù)定義位置的上下文this。也就是說，箭頭函數(shù)被定義在哪，箭頭函數(shù)中的this就指向誰。1.4.3 箭頭函數(shù)中的this關(guān)鍵字箭頭函數(shù)解決了this執(zhí)行環(huán)境所造成的一些問題，如解決了匿名函數(shù)this指向的問題（匿名函數(shù)的執(zhí)行環(huán)境具有全局性），包括setTimeout()和setInterval()中使用this所造成的問題。constobj=name:zha

20、ngsan;functionfn()console.log(this);/輸出結(jié)果：name:zhangsanreturn()=console.log(this);/輸出結(jié)果：name:zhangsan; / call()方法可以改變函數(shù)內(nèi)部的this指向，將函數(shù)fn()內(nèi)部的this指向obj對(duì)象constresFn=fn.call(obj);resFn();1.4.3 箭頭函數(shù)中的this關(guān)鍵字演示ES6中this的指向，示例代碼剩余參數(shù)1.5 先定一個(gè)小目標(biāo)！熟悉剩余參數(shù)的語法，能夠在程序中正確獲取剩余參數(shù)1.5.1 剩余參數(shù)的語法1.5.1 剩余參數(shù)的語法剩余參數(shù)是指在函數(shù)中，當(dāng)函數(shù)實(shí)

21、參個(gè)數(shù)大于形參個(gè)數(shù)時(shí)，剩余的實(shí)參可以存放到一個(gè)數(shù)組中。剩余參數(shù)語法允許將一個(gè)不確定數(shù)量的參數(shù)表示為數(shù)組。這種不確定參數(shù)的定義方式對(duì)于聲明一個(gè)具有未知參數(shù)個(gè)數(shù)的函數(shù)非常方便。1.5.1 剩余參數(shù)的語法剩余參數(shù)是程序員自定義的一個(gè)普通標(biāo)識(shí)符，接收剩余參數(shù)的變量是一個(gè)數(shù)組（Array的實(shí)例），能夠直接使用所有的數(shù)組方法，如 sort()、map()、forEach()或pop()方法等。 function sum(first, .args) console.log(first); / 輸出結(jié)果:10 console.log(args); / 輸出結(jié)果:20, 30 sum(10, 20, 30);剩

22、余參數(shù)代碼演示接收剩余參數(shù)1.5.1 剩余參數(shù)的語法 const sum = (.args) = let total = 0; args.forEach(item) = total += item; ); / 等價(jià)于：args.forEach(item = total += item); return total; ; console.log(sum(10, 20); / 輸出結(jié)果：30 console.log(sum(10, 20, 30); / 輸出結(jié)果：60使用剩余參數(shù)計(jì)算多個(gè)數(shù)值的求和結(jié)果 先定一個(gè)小目標(biāo)！掌握剩余參數(shù)和解構(gòu)賦值配合使用，能夠在解構(gòu)賦值時(shí)獲取剩余參數(shù)1.5.2 剩余參數(shù)

23、和解構(gòu)賦值配合使用1.5.2 剩余參數(shù)和解構(gòu)賦值配合使用 / 以數(shù)組的解構(gòu)賦值為例 let students = 王五, 張三, 李四; let s1, .s2 = students; console.log(s1); / 輸出結(jié)果：王五 console.log(s2); / 輸出結(jié)果：張三, 李四演示剩余參數(shù)和解構(gòu)的使用方法擴(kuò)展運(yùn)算符1.6 先定一個(gè)小目標(biāo)！熟悉擴(kuò)展運(yùn)算符的語法，能夠在程序中正確使用擴(kuò)展運(yùn)算符1.6.1 擴(kuò)展運(yùn)算符的語法擴(kuò)展運(yùn)算符和剩余參數(shù)的作用是相反的，擴(kuò)展運(yùn)算符可以將數(shù)組或?qū)ο筠D(zhuǎn)換為用逗號(hào)分隔的參數(shù)序列。擴(kuò)展運(yùn)算符也用3個(gè)點(diǎn)“”表示。1.6.1 擴(kuò)展運(yùn)算符的語法 let

24、ary = 1, 2, 3; / .ary相當(dāng)于1, 2, 3 console.log(.ary);/ 輸出結(jié)果：1 2 3 / 等價(jià)于 console.log(1, 2, 3);/ 輸出結(jié)果：1 2 3擴(kuò)展運(yùn)算符在數(shù)組中的使用演示1.6.1 擴(kuò)展運(yùn)算符的語法小提示：使用擴(kuò)展運(yùn)算符將ary數(shù)組拆分成以逗號(hào)分隔的參數(shù)序列后，又將參數(shù)序列放在了console.log()方法中，此時(shí)參數(shù)序列中的逗號(hào)會(huì)被當(dāng)成console.log()方法的參數(shù)分隔符，所以輸出結(jié)果中沒有逗號(hào)。 先定一個(gè)小目標(biāo)！掌握擴(kuò)展運(yùn)算符的應(yīng)用，能夠利用擴(kuò)展運(yùn)算符對(duì)數(shù)組進(jìn)行操作1.6.2 擴(kuò)展運(yùn)算符的應(yīng)用1.6.2 擴(kuò)展運(yùn)算符的應(yīng)用

25、 let ary1 = 1, 2, 3; let ary2 = 4, 5, 6; / .ary1 / 表示將ary1數(shù)組拆分成1, 2, 3 / .ary2 / 表示將ary2數(shù)組拆分成4, 5, 6 let ary3 = .ary1, .ary2; console.log(ary3);/ 輸出結(jié)果：(6) 1, 2, 3, 4, 5, 6數(shù)組合并的第1種方法1. 利用擴(kuò)展運(yùn)算符合并數(shù)組1.6.2 擴(kuò)展運(yùn)算符的應(yīng)用 let ary1 = 1, 2, 3; let ary2 = 4, 5, 6; ary1.push(.ary2); console.log(ary1); / 輸出結(jié)果：(6) 1,

26、 2, 3, 4, 5, 6數(shù)組合并的第2種方法1. 利用擴(kuò)展運(yùn)算符合并數(shù)組1.6.2 擴(kuò)展運(yùn)算符的應(yīng)用偽數(shù)組：可以應(yīng)用數(shù)組的length屬性但是無法直接調(diào)用數(shù)組方法，它也可以像數(shù)組一樣進(jìn)行遍歷。典型的偽數(shù)組包括函數(shù)中的arguments、document.getElementsByTagName()返回的元素集合，以及document.childNodes等。2. 利用擴(kuò)展運(yùn)算符將偽數(shù)組轉(zhuǎn)換為真正的數(shù)組1.6.2 擴(kuò)展運(yùn)算符的應(yīng)用123 456varoDivs=document.getElementsByTagName(div);console.log(oDivs);/ 輸出結(jié)果：HTMLC

27、ollection(6)div, div, div, div, div, divvarary=.oDivs;ary.push(a);/在數(shù)組中追加aconsole.log(ary);/輸出結(jié)果：(7)div, div, div, div, div, div, a將偽數(shù)組轉(zhuǎn)換為真正的數(shù)組2. 利用擴(kuò)展運(yùn)算符將偽數(shù)組轉(zhuǎn)換為真正的數(shù)組模板字符串1.7 先定一個(gè)小目標(biāo)！掌握模板字符串的使用，能夠在模板字符串中解析變量、換行以及調(diào)用函數(shù)1.7.1 模板字符串的語法模板字符串是ES6新增的創(chuàng)建字符串的方式，它使用反引號(hào)進(jìn)行定義。1.7.1 模板字符串的語法 let name = 這是一個(gè)模板字符串; co

28、nsole.log(name);/ 輸出結(jié)果：這是一個(gè)模板字符串定義模板字符串1.7.2 模板字符串的應(yīng)用 let name = 張三; let sayHello = Hello, 我的名字叫$name; console.log(sayHello); / 輸出結(jié)果：Hello, 我的名字叫張三演示模板字符串如何解析變量1. 模板字符串可以解析變量1.7.2 模板字符串的應(yīng)用letresult= name:zhangsan,age:20,sex:男;lethtml=$result.age$result.sex;console.log(html);演示模板字符串中如何換行2. 在模板字符串中可以換

29、行1.7.2 模板字符串的應(yīng)用在瀏覽器控制臺(tái)中查看運(yùn)行結(jié)果運(yùn)行結(jié)果1.7.2 模板字符串的應(yīng)用 const fn = () = return 我是fn函數(shù); ; let html = 我是模板字符串 $fn(); console.log(html);/ 輸出結(jié)果：我是模板字符串 我是fn函數(shù)演示模板字符串中如何調(diào)用函數(shù)3. 在模板字符串中可以調(diào)用函數(shù)ES6的內(nèi)置對(duì)象擴(kuò)展1.8 先定一個(gè)小目標(biāo)！掌握數(shù)組的擴(kuò)展方法，能夠使用數(shù)組的擴(kuò)展方法對(duì)數(shù)組進(jìn)行操作1.8.1 數(shù)組的擴(kuò)展方法1.8.1 數(shù)組的擴(kuò)展方法ES6為Array（數(shù)組）、String（字符串）等內(nèi)置對(duì)象提供了許多擴(kuò)展方法，從而幫助開發(fā)人員

30、提高開發(fā)效率。通過擴(kuò)展方法可以實(shí)現(xiàn)很多方便的功能，如將偽數(shù)組轉(zhuǎn)換為真正的數(shù)組、在數(shù)組中查找出符合條件的數(shù)組成員等。1.8.1 數(shù)組的擴(kuò)展方法vararrayLike= 0:張三,1:李四,2:王五,length:3;varary=Array.from(arrayLike);console.log(ary); / 輸出結(jié)果：(3)張三, 李四, 王五示例代碼1. Array.from()方法Array構(gòu)造函數(shù)提供了一個(gè)from()方法，它可以接收一個(gè)偽數(shù)組作為參數(shù)，返回值為轉(zhuǎn)換后的結(jié)果，這個(gè)結(jié)果是一個(gè)真正的數(shù)組。1.8.1 數(shù)組的擴(kuò)展方法vararrayLike=0:1,1:2,2:3,leng

31、th:3;varary=Array.from(arrayLike,(item)=returnitem*2;);/ 等價(jià)于：varary=Array.from(arrayLike,item=item*2)console.log(ary);/ 輸出結(jié)果：2, 4, 6示例代碼在Array構(gòu)造函數(shù)中，from()方法還可以接收兩個(gè)參數(shù)，這與數(shù)組中的map()方法類似，它用于處理數(shù)組中的每個(gè)元素并將處理后的結(jié)果放入返回的數(shù)組中。1.8.1 數(shù)組的擴(kuò)展方法varary=id:1,name:張三,id:2,name:李四;lettarget=ary.find(item, index)=item.id=2)

32、;console.log(target);/輸出結(jié)果：id:2,name:李四演示查找出item.id值為2的對(duì)象2. 數(shù)組實(shí)例的find()方法在數(shù)組實(shí)例中，ES6提供了一個(gè)find()方法，它用于在數(shù)組中查找出第一個(gè)符合條件的數(shù)組成員。1.8.1 數(shù)組的擴(kuò)展方法letary=1,5,10,15;letindex=ary.findIndex(value,index)=returnvalue9;);/ 等價(jià)于：letindex=ary.findIndex(value,index)=value9);console.log(index); /輸出結(jié)果：2演示如何查找出數(shù)組中大于9的元素的位置3.

33、數(shù)組實(shí)例的findIndex()方法數(shù)組實(shí)例提供了一個(gè)findIndex()方法，用于在數(shù)組中查找出第一個(gè)符合條件的數(shù)組成員的索引，如果沒有找到則返回-1。1.8.1 數(shù)組的擴(kuò)展方法 let ary = a, b, c; let result = ary.includes(a); console.log(result);/ 輸出結(jié)果：true result = ary.includes(e) console.log(result);/ 輸出結(jié)果：false演示includes()方法的使用4. 數(shù)組實(shí)例的includes()方法ES6中為數(shù)組實(shí)例提供了includes()方法來檢查某個(gè)數(shù)組是否

34、包含給定的值，返回一個(gè)布爾值，true表示包含給定的值，false表示不包含給定的值。 先定一個(gè)小目標(biāo)！掌握字符串的擴(kuò)展方法，能夠通過字符串的擴(kuò)展方法對(duì)字符串進(jìn)行處理1.8.2 字符串的擴(kuò)展方法1.8.2 字符串的擴(kuò)展方法前面我們學(xué)習(xí)了數(shù)組的includes()方法，它用于在數(shù)組中查找出第一個(gè)符合條件的數(shù)組成員的位置。ES6也提供了字符串的includes()方法用來確定一個(gè)字符串是否包含在另一個(gè)字符串中。除此之外，ES6還提供了startsWith()方法和endsWith()方法同樣可以用于字符串的查找。1. 字符串實(shí)例的startsWith()方法和endsWith()方法startsW

35、ith()方法表示參數(shù)字符串是否在原字符串的頭部，用于判斷字符串是否以某字符串開頭；endsWith()方法表示參數(shù)字符串是否在原字符串的尾部，用于判斷字符串是否以某字符串結(jié)尾。上述兩個(gè)方法如果滿足條件則返回true，反之返回false。1.8.2 字符串的擴(kuò)展方法 let str = Hello ECMAScript 2015; let r1 = str.startsWith(Hello); console.log(r1); / 輸出結(jié)果：ture let r2 = str.endsWith(2016); console.log(r2); / 輸出結(jié)果：false演示startsWith()

36、方法和endsWith()方法的使用1.8.2 字符串的擴(kuò)展方法2. 字符串實(shí)例的repeat()方法repeat()方法表示將原字符串重復(fù)n次，它返回一個(gè)新字符串，并接收一個(gè)數(shù)值作為參數(shù)，表示將字符串重復(fù)多少次。1.8.2 字符串的擴(kuò)展方法 console.log(y . repeat(5);/ 輸出結(jié)果：yyyyy console.log(hello . repeat(2);/ 輸出結(jié)果：hellohello演示repeat()方法的使用Set數(shù)據(jù)結(jié)構(gòu)1.9 先定一個(gè)小目標(biāo)！掌握Set數(shù)據(jù)結(jié)構(gòu)基本使用，能夠利用Set數(shù)據(jù)結(jié)構(gòu)保存數(shù)據(jù)1.9.1 Set數(shù)據(jù)結(jié)構(gòu)基本使用1.9.1 Set數(shù)據(jù)結(jié)

37、構(gòu)基本使用ES6提供了新的數(shù)據(jù)結(jié)構(gòu)Set。Set類似于數(shù)組，但是成員的值都是唯一的，沒有重復(fù)的值。Set實(shí)例的方法分為兩大類，即操作方法（用于操作數(shù)據(jù)）和遍歷方法（用于遍歷成員）。Set數(shù)據(jù)結(jié)構(gòu)常用于電商網(wǎng)站的搜索功能中，用戶搜索完成后，網(wǎng)站要記錄用戶搜索的關(guān)鍵字，方便用戶下次直接單擊搜索歷史關(guān)鍵字來完成搜索。 const s1 = new Set();/ 使用new關(guān)鍵字創(chuàng)建Set構(gòu)造函數(shù)的實(shí)例 console.log(s1.size);/ 輸出結(jié)果：0創(chuàng)建Set數(shù)據(jù)結(jié)構(gòu)示例代碼1. 創(chuàng)建Set數(shù)據(jù)結(jié)構(gòu)Set本身是一個(gè)構(gòu)造函數(shù)，創(chuàng)建此構(gòu)造函數(shù)的實(shí)例對(duì)象就是創(chuàng)建Set數(shù)據(jù)結(jié)構(gòu)。1.9.1 Se

38、t數(shù)據(jù)結(jié)構(gòu)基本使用 const s2 = new Set(a, b); console.log(s2.size); / 輸出結(jié)果：2初始化Set數(shù)據(jù)結(jié)構(gòu)示例代碼2. 初始化Set數(shù)據(jù)結(jié)構(gòu)在創(chuàng)建Set數(shù)據(jù)結(jié)構(gòu)時(shí)，也可以傳遞一個(gè)數(shù)組作為參數(shù)，用來初始化。1.9.1 Set數(shù)據(jù)結(jié)構(gòu)基本使用 const s3 = new Set(a, a, b, b); console.log(s3.size); / 輸出結(jié)果：2 const ary = .s3; console.log(ary); / 輸出結(jié)果：(2) a, b數(shù)組去重示例代碼3. 利用Set數(shù)據(jù)結(jié)構(gòu)給數(shù)組去重在初始化Set構(gòu)造函數(shù)時(shí)，可以傳遞一個(gè)

39、數(shù)組作為參數(shù)，如果數(shù)組中有重復(fù)的值，那么Set數(shù)據(jù)結(jié)構(gòu)會(huì)把重復(fù)的值過濾掉。1.9.1 Set數(shù)據(jù)結(jié)構(gòu)基本使用 先定一個(gè)小目標(biāo)！掌握Set實(shí)例的操作方法，能夠?qū)et實(shí)例進(jìn)行添加、刪除、判斷和清除操作1.9.2 Set實(shí)例的操作方法 const s4 = new Set(); s4.add(a).add(b); console.log(s4.size); / 輸出結(jié)果：2演示add()方法的使用1. Set實(shí)例的add()方法Set實(shí)例提供的add()方法用于向Set數(shù)據(jù)結(jié)構(gòu)中添加某個(gè)值，它接收一個(gè)參數(shù)代表要添加的值，返回Set結(jié)構(gòu)本身。1.9.2 Set實(shí)例的操作方法 const s4 = n

40、ew Set(); s4.add(a).add(b); const r1 = s4.delete(a); console.log(s4.size); / 輸出結(jié)果：1 console.log(r1); / 輸出結(jié)果：true演示delete()方法的使用2. Set實(shí)例的delete()方法Set實(shí)例提供的delete()方法用于刪除Set數(shù)據(jù)結(jié)構(gòu)中的某個(gè)值，它接收一個(gè)參數(shù)代表要?jiǎng)h除的值，返回一個(gè)布爾值，如果結(jié)果為true則表示刪除成功，為false則表示刪除失敗。1.9.2 Set實(shí)例的操作方法 const s4 = new Set(); s4.add(a).add(b); const r1

41、 = s4.delete(a); console.log(s4.size); / 輸出結(jié)果：1 console.log(r1); / 輸出結(jié)果：true const r2 = s4.has(a); console.log(r2); / 輸出結(jié)果：false演示has()方法的使用3. Set實(shí)例的has()方法Set實(shí)例提供has()方法，該方法接收一個(gè)參數(shù)并判斷該參數(shù)是否為Set數(shù)據(jù)結(jié)構(gòu)中的成員，返回一個(gè)布爾值，如果結(jié)果為true則表示包含該成員，為false則表示不包含該成員。1.9.2 Set實(shí)例的操作方法 const s4 = new Set(); s4.add(a).add(b);

42、s4.clear(); console.log(s4.size); / 輸出結(jié)果：0演示clear()方法的使用4. Set實(shí)例的clear()方法Set實(shí)例提供的clear()方法用于清除Set數(shù)據(jù)結(jié)構(gòu)中的所有成員，該方法沒有返回值。1.9.2 Set實(shí)例的操作方法 先定一個(gè)小目標(biāo)！掌握Set實(shí)例的遍歷方法，能夠?qū)et實(shí)例進(jìn)行遍歷操作1.9.3 Set實(shí)例的遍歷方法 const s5 = new Set(a, b, c); s5.forEach(value = console.log(value); / 依次輸出a、b、c );演示forEach()方法的使用1.9.3 Set實(shí)例的遍歷方

43、法Set數(shù)據(jù)結(jié)構(gòu)的實(shí)例與數(shù)組一樣，也擁有一個(gè)forEach()方法，用于遍歷Set數(shù)據(jù)結(jié)構(gòu)中的成員，該方法可以對(duì)每個(gè)成員執(zhí)行某種操作，沒有返回值。初識(shí)Symbol1.10 先定一個(gè)小目標(biāo)！掌握Symbol的基本使用，能夠在程序中正確使用Symbol1.10.1 Symbol的基本使用1.10.1 Symbol的基本使用Symbol是ES6中引入的原始數(shù)據(jù)類型，它的功能類似于一種標(biāo)識(shí)唯一性的ID值，表示獨(dú)一無二。1.10.1 Symbol的基本使用 let s1 = Symbol(a); let s2 = Symbol(b); console.log(s1);/ 輸出結(jié)果：Symbol(a) c

44、onsole.log(s2);/ 輸出結(jié)果：Symbol(b)演示Symbol的基本使用Symbol通過Symbol()函數(shù)創(chuàng)建。Symbol()函數(shù)可以接收一個(gè)字符串作為參數(shù)，為新創(chuàng)建的Symbol實(shí)例提供描述信息，該描述信息主要是在控制臺(tái)中顯示或轉(zhuǎn)為字符串時(shí)使用，以便于區(qū)分。Symbol不是對(duì)象，所以Symbol()函數(shù)不能使用new命令。1.10.1 Symbol的基本使用 let s1 = Symbol(a); let s2 = Symbol(a); console.log(s1); / 輸出結(jié)果：Symbol(a) console.log(s2); / 輸出結(jié)果：Symbol(a)

45、console.log(s1 = s2); / 輸出結(jié)果：false示例代碼每個(gè)Symbol實(shí)例都是唯一的，即使具有相同參數(shù)的兩個(gè)Symbol()函數(shù)進(jìn)行比較時(shí)，函數(shù)的返回結(jié)果都會(huì)是false。 先定一個(gè)小目標(biāo)！熟悉使用Symbol作為對(duì)象屬性名，能夠說出使用Symbol作為對(duì)象屬性名有什么優(yōu)勢(shì)1.10.2 使用Symbol作為對(duì)象屬性名1.10.2 使用Symbol作為對(duì)象屬性名letMY_NAME=Symbol();/第1種寫法leta=;aMY_NAME=Hello!;console.log(a); / 輸出結(jié)果：Symbol():Hello!示例代碼-第1種寫法因?yàn)槊恳粋€(gè)Symbol的

46、值都是不相等的，所以Symbol作為對(duì)象的屬性名，可以保證屬性不重名。這適用于對(duì)象由多個(gè)模塊組成的情況，可以防止某一個(gè)鍵被意外改寫或覆蓋。1.10.2 使用Symbol作為對(duì)象屬性名示例代碼-第2種寫法letMY_NAME=Symbol();/第2種寫法 leta=MY_NAME:Hello!,;console.log(a); / 輸出結(jié)果：Symbol():Hello!1.10.2 使用Symbol作為對(duì)象屬性名示例代碼-第3種寫法letMY_NAME=Symbol();/第3種寫法leta=;Object.defineProperty(a,MY_NAME,value:Hello!);con

47、sole.log(a); /輸出結(jié)果： Symbol():Hello! 本章小結(jié)本章首先講解了ES6的概念，幫助讀者對(duì)ES6有一個(gè)初步的認(rèn)識(shí)；接著講解了ES6中新增的let關(guān)鍵字和const關(guān)鍵字的特點(diǎn)及其基本使用；然后講解了數(shù)組和對(duì)象的解構(gòu)賦值，箭頭函數(shù)、剩余參數(shù)和擴(kuò)展運(yùn)算符，以及模板字符串和ES6的內(nèi)置對(duì)象擴(kuò)展的使用，這些使代碼編寫更加簡(jiǎn)潔易讀，語義更加清晰；最后講解了ES6提供的數(shù)據(jù)結(jié)構(gòu)Set和原始數(shù)據(jù)類型Symbol，幫助讀者提高開發(fā)效率。第2章 Node.js模塊化開發(fā)Web前端模塊化開發(fā)教程（ES6+Node.js+Webpack）學(xué)習(xí)目標(biāo)/Target 掌握Node.js的安裝和

48、使用，能夠完成運(yùn)行環(huán)境的搭建 掌握Node.js模塊化開發(fā)，能夠完成模塊化成員的導(dǎo)入和導(dǎo)出操作 掌握Node.js系統(tǒng)模塊和第三方模塊的使用，能夠?qū)崿F(xiàn)項(xiàng)目的功能學(xué)習(xí)目標(biāo)/Target 掌握Node.js項(xiàng)目中g(shù)ulp模塊的使用，能夠完成項(xiàng)目的自動(dòng)化構(gòu)建 熟悉Node.js項(xiàng)目依賴管理，能夠理解package.json文件的作用 熟悉Node.js中的模塊加載機(jī)制，能夠正確完成模塊的加載章節(jié)概述/ Summary隨著互聯(lián)網(wǎng)的發(fā)展，全棧工程師（Full Stack Engineer）的概念開始興起，全棧工程師可以承擔(dān)用戶界面、業(yè)務(wù)邏輯、數(shù)據(jù)建模、服務(wù)器、網(wǎng)絡(luò)和環(huán)境等方面的開發(fā)工作，這意味著全棧工程

49、師應(yīng)該熟練各層間的交互?，F(xiàn)在，Node.js的出現(xiàn)使JavaScript語言可以進(jìn)行服務(wù)器端的開發(fā)并可以與數(shù)據(jù)庫(kù)交互，從而降低了開發(fā)人員的學(xué)習(xí)成本，為程序開發(fā)創(chuàng)造了良好的條件。Node.js是采用模塊化開發(fā)的，本章將詳細(xì)講解Node.js的安裝和模塊化開發(fā)的基礎(chǔ)知識(shí)。目錄/Contents010203Node.js運(yùn)行環(huán)境搭建Node.js的基本使用初識(shí)模塊化開發(fā)0405模塊成員的導(dǎo)入和導(dǎo)出Node.js系統(tǒng)模塊目錄/Contents060708Node.js第三方模塊Node.js常用開發(fā)工具在項(xiàng)目中使用gulp0910項(xiàng)目依賴管理Node.js模塊加載機(jī)制Node.js運(yùn)行環(huán)境搭建2.1N

50、ode.js是一個(gè)基于Chrome V8引擎的JavaScript代碼運(yùn)行環(huán)境，也可以說是一個(gè)運(yùn)行時(shí)平臺(tái)，提供了一些功能性的API，如文件操作API、網(wǎng)絡(luò)通信API。如果在瀏覽器運(yùn)行JavaScript代碼，瀏覽器就是JavaScript代碼的運(yùn)行環(huán)境；如果在Node.js平臺(tái)運(yùn)行JavaScript代碼，Node.js就是JavaScript代碼的運(yùn)行環(huán)境。2.1.1 下載和安裝 先定一個(gè)小目標(biāo)！掌握Node.js下載和安裝，能夠獨(dú)立完成Node.js的下載和安裝2.1.1 下載和安裝2.1.1 下載和安裝打開Node.js官方網(wǎng)站，找到Node.js下載地址。Bootstrap官網(wǎng)首頁(yè)進(jìn)入

51、官網(wǎng)單擊下載Node.js安裝包2.1.1 下載和安裝安裝提示對(duì)話框雙擊安裝Node.js安裝包2.1.1 下載和安裝步驟1步驟2步驟3步驟4測(cè)試Node.js是否安裝成功按“Windows+R”組合鍵，打開“運(yùn)行”對(duì)話框，輸入“cmd”。2.1.1 下載和安裝步驟2步驟3步驟4測(cè)試Node.js是否安裝成功單擊“確定”按鈕，或者直接按“Enter”鍵，會(huì)打開cmd命令提示符界面。步驟2步驟12.1.1 下載和安裝步驟2步驟3步驟4測(cè)試Node.js是否安裝成功在cmd命令提示符界面中，輸入命令“node -v”，按“Enter”鍵，顯示當(dāng)前安裝的Node.js版本。步驟1步驟32.1.1 下

52、載和安裝步驟2步驟3步驟4測(cè)試Node.js是否安裝成功若想要退出cmd命令提示符界面，可以輸入“exit”并按“Enter”鍵，或者單擊cmd命令提示符界面右上角的“”（關(guān)閉）按鈕。步驟1步驟42.1.1 下載和安裝多學(xué)一招：PowerShell工具測(cè)試Node.js是否安裝成功測(cè)試步驟2.1.1 下載和安裝多學(xué)一招：PowerShell工具測(cè)試Node.js是否安裝成功測(cè)試步驟 先定一個(gè)小目標(biāo)！熟悉Node.js環(huán)境常見安裝失敗情況，能夠解決Node.js環(huán)境安裝失敗的問題2.1.2 Node.js環(huán)境常見安裝失敗情況2.1.2 Node.js環(huán)境常見安裝失敗情況不同用戶使用的系統(tǒng)配置是不

53、統(tǒng)一的，在一些系統(tǒng)配置中會(huì)有不穩(wěn)定的配置，可能會(huì)導(dǎo)致Node.js環(huán)境安裝失敗。接下來我們來看一下有哪些常見的失敗情況及解決方法？錯(cuò)誤代號(hào)2503的解決方法2.1.2 Node.js環(huán)境常見安裝失敗情況在安裝過程中，突然彈出了一個(gè)消息框，提示2503錯(cuò)誤。安裝失敗的原因：系統(tǒng)賬戶權(quán)限不足2.1.2 Node.js環(huán)境常見安裝失敗情況解決方法（1）使用管理員身份運(yùn)行PowerShell命令提示符工具。選擇“以管理員身份運(yùn)行”2.1.2 Node.js環(huán)境常見安裝失敗情況（2）以管理員身份進(jìn)入PowerShell命令提示符界面。輸入運(yùn)行安裝包命令，以本機(jī)安裝路徑為例執(zhí)行命令報(bào)錯(cuò)2.1.2 Node

54、.js環(huán)境常見安裝失敗情況Node.js安裝成功后，輸入“node -v”命令進(jìn)行驗(yàn)證Node運(yùn)行環(huán)境是否安裝成功時(shí)報(bào)錯(cuò)。安裝失敗的原因：Node.js安裝目錄寫入環(huán)境變量失敗2.1.2 Node.js環(huán)境常見安裝失敗情況在常規(guī)情況下，Node.js安裝過程中，安裝包會(huì)自動(dòng)把Node.js的安裝目錄放入到系統(tǒng)的環(huán)境變量Path中，若是出現(xiàn)上圖錯(cuò)誤表明操作失敗。解決方法是需要手動(dòng)將Node.js安裝目錄添加到環(huán)境變量Path中。2.1.2 Node.js環(huán)境常見安裝失敗情況解決方法：以Windows 10操作系統(tǒng)為例（1）首先找到Node.js的安裝目錄，本機(jī)的Node.js安裝目錄是C:Pro

55、gram Filesnodejs，將該目錄地址進(jìn)行復(fù)制。2.1.2 Node.js環(huán)境常見安裝失敗情況（2）右擊“此電腦”圖標(biāo)，選擇“屬性”命令，進(jìn)入“系統(tǒng)”界面，執(zhí)行如下操作。雙擊“Path”單擊“新建”把Node.js安裝目錄粘貼到這里目錄顯示在這里2.1.2 Node.js環(huán)境常見安裝失敗情況多學(xué)一招：Path環(huán)境變量的作用Path環(huán)境變量是如何工作的呢？當(dāng)在命令行工具中輸入“node”命令時(shí)，實(shí)際上是去當(dāng)前計(jì)算機(jī)中查找一個(gè)名字為node.exe的可執(zhí)行文件，如果這個(gè)文件能夠找到，則命令就可以成功執(zhí)行。2.1.2 Node.js環(huán)境常見安裝失敗情況當(dāng)前計(jì)算機(jī)中node命令的可執(zhí)行文件no

56、de.exe所在目錄為“C:Program Filesnodejs”下。命令行工具如何查找node.exe文件2.1.2 Node.js環(huán)境常見安裝失敗情況查找方式：需要應(yīng)用到Windows系統(tǒng)中的Path環(huán)境變量。Path環(huán)境變量的作用是告訴系統(tǒng)，當(dāng)要求系統(tǒng)運(yùn)行一個(gè)程序，而沒有告訴它程序所在的完整路徑時(shí)，系統(tǒng)除了在當(dāng)前目錄下面尋找此程序外，還應(yīng)到哪些目錄下去尋找。如果的路徑，那么在任何路徑下使用“node”命令都可以找到node.exe文件。在Path環(huán)境變量中配置了.exe文件。Node.js的安裝過程中，默認(rèn)會(huì)在Path環(huán)境變量中配置好node.exe的路徑，如果在Path環(huán)境變量中沒有

57、自動(dòng)配置node.exe路徑，我們可以手動(dòng)完成配置。Node.js的基本使用2.2 先定一個(gè)小目標(biāo)！了解Node.js的組成，能夠說出Node.js的組成部分2.2.1 Node.js的組成2.2.1 Node.js的組成JavaScript和Node.js的核心語法都是ECMAScript。JavaScriptNode.jsECMAScript（核心語法）腳本語言，一般運(yùn)行在客戶端運(yùn)行在服務(wù)器端的JavaScript2.2.1 Node.js的組成ECMAScript是JavaScript的核心語法。ECMAScriptDOM（文檔對(duì)象模型）是HTML和XML的應(yīng)用程序接口（API），用于控

58、制文檔的內(nèi)容與結(jié)構(gòu)。DOMBOM（瀏覽器對(duì)象模型）可以對(duì)瀏覽器窗口進(jìn)行訪問和操作。BOMJavaScript的組成2.2.1 Node.js的組成客戶端JavaScript需要依賴瀏覽器提供的JavaScript引擎解析執(zhí)行，瀏覽器還提供了對(duì)DOM的解析，所以客戶端的JavaScript不僅應(yīng)用了核心語法ECMAScript，而且能操作DOM和BOM，常見的應(yīng)用場(chǎng)景如用戶交互、動(dòng)畫特效、表單驗(yàn)證、發(fā)送Ajax請(qǐng)求等。服務(wù)器端JavaScript不依賴瀏覽器，而是由特定的運(yùn)行環(huán)境提供的JavaScript引擎解析執(zhí)行，例如Node.js。服務(wù)器端的JavaScript應(yīng)用了核心語法ECMAScr

59、ipt，但是不操作DOM和BOM，它常常用來做一些在客戶端做不到的事情，例如操作數(shù)據(jù)庫(kù)、操作文件等。另外，在客戶端的Ajax操作只能發(fā)送請(qǐng)求，而接收請(qǐng)求和做出響應(yīng)的操作就需要服務(wù)端的JavaScript來完成。JavaScript在客戶端和服務(wù)端實(shí)現(xiàn)不同功能 先定一個(gè)小目標(biāo)！了解Node.js基礎(chǔ)語法，能夠編寫簡(jiǎn)單的hello world程序2.2.2 Node.js基礎(chǔ)語法2.2.2 Node.js基礎(chǔ)語法通過node命令解析和執(zhí)行一個(gè)js腳本文件的步驟如下：根據(jù)node命令指定的文件名稱，讀取js腳本文件。解析和執(zhí)行JavaScript代碼。將執(zhí)行后的結(jié)果輸出到命令行中。2.2.2 Nod

60、e.js基礎(chǔ)語法演示在Node.js中如何執(zhí)行一個(gè)js腳本文件在chapter02目錄下新建helloworld.js文件，編寫JavaScript代碼。console.log(hello world);STEP 012.2.2 Node.js基礎(chǔ)語法運(yùn)行程序打開命令行工具，切換到helloworld.js文件所在的目錄，并輸入“node helloworld.js”命令。STEP 02 先定一個(gè)小目標(biāo)！了解Node.js全局對(duì)象global，能夠說出global的作用2.2.3 Node.js全局對(duì)象global2.2.3 Node.js全局對(duì)象global在之前使用JavaScript的過