第1章Web前端技術(shù)簡介1.1

Web前端發(fā)展歷程1.2

MV*模式1.3

走近Vue.js1.4Vue.js3.0的新變化了解Web前端的發(fā)展歷程了解MV*模式的異同理解Vue.js的相關(guān)知識掌握Vue.js3.0的新變化引言隨著前端技術(shù)的發(fā)展，網(wǎng)頁依賴于JavaScript技術(shù)的網(wǎng)頁交互能力得到長足的發(fā)展，JavaScript使網(wǎng)頁的用戶提要更為具象化。網(wǎng)頁動態(tài)化的增強(qiáng)必然要求復(fù)雜JavaScript邏輯代碼的支持，成千上萬行的JavaScript代碼連接著HTML和CSS文件，但是傳統(tǒng)的解決方案都不夠靈活和可定制，于是Vue.js框架應(yīng)運(yùn)而生。1.1Web前端發(fā)展歷程靜態(tài)頁面階段JavaScript誕生AJAX開啟Web2.0時代前端兼容性框架的出現(xiàn)HTML5的出現(xiàn)前端三大主流框架ECMAScript6.0的發(fā)布1.1Web前端發(fā)展歷程在近30年的前端發(fā)展進(jìn)程中，各種前端技術(shù)層出不窮，根據(jù)主流技術(shù)的更迭可將前端發(fā)展進(jìn)程劃分為7個時期。1.靜態(tài)頁面階段1990年萬維網(wǎng)(WWW)誕生。1993年4月，Mosaic瀏覽器作為第一款正式的瀏覽器發(fā)布。1994年12月，萬維網(wǎng)聯(lián)盟（W3C）成立，標(biāo)志著萬維網(wǎng)進(jìn)入了標(biāo)準(zhǔn)化發(fā)展的階段。這個階段的網(wǎng)頁還非常地原始，主要以HTML為主，是純靜態(tài)的只讀網(wǎng)頁，被稱為Web1.0時代。1.1Web前端發(fā)展歷程2.JavaScript誕生1995年，JavaScript誕生。由于工期太短，JavaScript語言有許多瑕疵。隨著JavaScript的誕生，前端頁面雛形已基本顯現(xiàn)，即以HTML為骨架，CSS為外貌，JavaScript為交互。了Web2.01.1Web前端發(fā)展歷程3.AJAX開啟Web2.0時代1998年AJAX出現(xiàn)，AJAX技術(shù)使用XMLHttpRequest對象與服務(wù)器進(jìn)行通信，從而實(shí)現(xiàn)無需刷新整個頁面即可更新部分頁面內(nèi)容的效果。前端開發(fā)從Web1.0升級到了Web2.0，從簡單的靜態(tài)頁面，發(fā)展到了動態(tài)網(wǎng)頁階段。了Web2.01.1Web前端發(fā)展歷程4.前端兼容性框架的出現(xiàn)Prototype是一個JavaScript基礎(chǔ)類庫，Prototype功能實(shí)用且文件容量較小，解決了動畫特效與AJAX請求這2大問題。隨著動態(tài)交互、數(shù)據(jù)異步請求的需求增多，jQuery應(yīng)運(yùn)而生。2006年，jQuery正式發(fā)布，此時的jQuery具有當(dāng)時有諸多競爭對手，如Dojo、Prototype、ExtJS、MooTools等，競爭異常激烈。1.1Web前端發(fā)展歷程5.HTML5的出現(xiàn)W3C于2007年采納了HTML5規(guī)范草案，并在2008年1月22日正式發(fā)布。在HTML5規(guī)范的指引下，各個瀏覽器廠商不斷改進(jìn)瀏覽器，谷歌以JavaScript引擎V8為基礎(chǔ)研發(fā)的Chrome瀏覽器發(fā)展十分迅速。隨著各大瀏覽器紛紛開始支持HTML5，前端能夠?qū)崿F(xiàn)的交互功能也越來越多，相應(yīng)的代碼復(fù)雜度也迅速提高，以前僅用于后端的MV*框架也開始出現(xiàn)在前端領(lǐng)域。1.1Web前端發(fā)展歷程6.前端三大主流框架前端三大主流框架是React、Vue、Angular，以三大框架為核心的前端技術(shù)已經(jīng)形成了一個成熟的生態(tài)體系。如以Github為代表的代碼管理倉庫；以NPM和Yarn為代表的包管理工具；ES6、Babel和TypeScript構(gòu)成的腳本體系；以HTML5、CSS3和JavaScript為基礎(chǔ)的前端開發(fā)技術(shù)；以React、Vue、Angular為代表的前端框架；以Webpack為代表的打包工具；以Node.js為基礎(chǔ)的Express和KOA后端框架；以ElementPlus、VantUI、AntDesign為主的前端組件庫等。1.1Web前端發(fā)展歷程7.ECMAScript6.0的發(fā)布2015年6月，ECMAScript6.0發(fā)布，這個版本增加了很多新的語法，更加提升了JavaScript的開發(fā)潛力，在Vue開發(fā)過程中將大量使用ECMAScript6.0語法，掌握ECMAScript6.0語法是至關(guān)重要的。1.2MV*模式MVC模式MVP模式MVVM模式MV*是MVC、MVP和MVVM的總稱，它們在細(xì)節(jié)上存在差異，但本質(zhì)上都是一種軟件架構(gòu)模式。MVP和MVVM是MVC的變體，它們由MVC演進(jìn)而來，目的是幫助開發(fā)者更有效地組織和管理應(yīng)用程序的代碼結(jié)構(gòu)。通過提高代碼的可維護(hù)性、可擴(kuò)展性和可重用性，這些架構(gòu)模式為開發(fā)者提供了一個更高效、更靈活的工作流程。1.2MV*模式MV*模式概述MVC（ModelViewController）是軟件工程中的一種軟件架構(gòu)模式，它把軟件系統(tǒng)分為模型（Model，簡稱M）、視圖（View，簡稱V）和控制器（Controller，簡稱C）三個基本部分。1.MVC模式定義1.2MV*模式1.2.1

MVC模式Model指的是后端傳遞過來的數(shù)據(jù)。View指的是用戶可見的頁面。Controller控制器指的是M和V之間的連接器，用于控制應(yīng)用程序的流程及頁面的業(yè)務(wù)邏輯。它主要負(fù)責(zé)用戶與應(yīng)用之間的響應(yīng)操作，當(dāng)用戶與頁面產(chǎn)生交互的時候，Controller調(diào)用Model層，完成對Model的修改，然后Model層再去通知View層更新。2.MVC模式組成部分之間的關(guān)系1.2MV*模式1.2.1

MVC模式3.MVC模式示意圖1.2MV*模式1.2.1

MVC模式MVP（ModelViewPresenter）由MVC模式演變而來，這兩種模式在結(jié)構(gòu)組成上十分相似，均由三部分構(gòu)成。在MVP模式中，模型（Model）提供數(shù)據(jù)、視圖（View）負(fù)責(zé)顯示、表示器（Presenter）負(fù)責(zé)處理業(yè)務(wù)邏輯。1.MVP模式定義1.2MV*模式1.2.2MVP模式與MVC模式不同，MVP模式不再允許Model與View進(jìn)行直接通信，用戶對View的操作將移交給Presenter。Presenter執(zhí)行業(yè)務(wù)邏輯，修改Model狀態(tài)，并將Model狀態(tài)改變的消息返回給自己。Presenter獲取到Model改變的消息以后，使用View提供的接口更新界面。2.MVP模式工作原理1.2MV*模式1.2.2MVP模式3.MVP模式示意圖1.2MV*模式1.2.2MVP模式MVVM（Model-View-ViewModel）模式由模型（Model，簡稱M）、視圖（View，簡稱V）和視圖模型（ViewModel，簡稱VM）三部分組成，它本質(zhì)上仍是MVC的改進(jìn)版。1.MVVM模式定義1.2MV*模式1.2.3

MVVM模式MVVM模式不允許Model與View進(jìn)行直接通信，而是借助ViewModel搭建Model與View之間的橋梁，實(shí)現(xiàn)數(shù)據(jù)驅(qū)動效果。很多主流的前端框架都采用MVVM模式，如Angular、Vue等。2.MVVM模式工作原理1.2MV*模式1.2.3

MVVM模式MVVM模式的核心特性是雙向數(shù)據(jù)綁定，當(dāng)用戶操作View時，ViewModel監(jiān)測到View修改了數(shù)據(jù)，會立即通知Model實(shí)現(xiàn)數(shù)據(jù)的同步變更。當(dāng)Model中的數(shù)據(jù)發(fā)生改變時，ViewModel同樣會監(jiān)測到Model的數(shù)據(jù)變化，并立即通知View進(jìn)行視圖更新。MVVM核心思想是關(guān)注Model的變化，使用聲明式的數(shù)據(jù)綁定實(shí)現(xiàn)View的分離。3.MVVM模式的核心思想1.2MV*模式1.2.3

MVVM模式4.MVVM模式示意圖1.2MV*模式1.2.3

MVVM模式1.3走近Vue.jsVue的發(fā)展歷程

Vue的生態(tài)系統(tǒng)漸進(jìn)式框架響應(yīng)式系統(tǒng)前端框架對比Vue.js是一套用于構(gòu)建用戶界面和單頁應(yīng)用程序（SPA）的漸進(jìn)式JavaScript框架，它基于標(biāo)準(zhǔn)HTML、CSS和JavaScript構(gòu)建，開發(fā)過程中可以創(chuàng)建可重用的UI組件。Vue.js提供了視圖模板引擎、組件系統(tǒng)、客戶端路由和大規(guī)模狀態(tài)管理等組件，開發(fā)者可以根據(jù)需要逐步添加或刪除這些功能組件，進(jìn)而高效地處理數(shù)據(jù)綁定和異步加載。1.3走近Vue.jsVue.js概述2013年12月7日，Vue的0.6.0版在GitHub上發(fā)布。2015年10月26日，正式發(fā)布了1.0.0版本，Vue被越來越多的開發(fā)者所接納。2016年10月1日，正式發(fā)布了2.0.0版本。2017年發(fā)布了多個Vue版本，該年度發(fā)布的第一個Vue版本是v2.1.9，該年度發(fā)布的最后一個版本為v2.5.13。2019年正式發(fā)布Vue的穩(wěn)定版本v2.5.13。2020年9月18日，Vue.js3.0正式發(fā)布，代號OnePiece。本書將基于新發(fā)布的Vue.js3.0版本進(jìn)行知識講解。1.3走近Vue.js1.3.1

Vue的發(fā)展歷程Vue擁有一套成熟的生態(tài)系統(tǒng)，包括腳手架工具（VueCLI）、路由管理工具（Router）、狀態(tài)管理（Vuex）、Axios數(shù)據(jù)請求、UI組件庫、Vue調(diào)試工具（devtools）、ESLint代碼規(guī)范、Webpack打包工具等。其中，Vue常用的UI組件庫包括Element-UI、Element-Plus、Vant-UI等。1.3走近Vue.js1.3.2Vue的生態(tài)系統(tǒng)Vue的生態(tài)系統(tǒng)結(jié)構(gòu)圖如下圖所示。1.3走近Vue.js1.3.2Vue的生態(tài)系統(tǒng)1.Vue.js的漸進(jìn)式結(jié)構(gòu)“漸進(jìn)式”就是將框架進(jìn)行分層規(guī)劃，框架的每層功能都是獨(dú)立可自選的，不同層可被替換為開發(fā)者所熟悉的其他方案。Vue漸進(jìn)式框架分層結(jié)構(gòu)如下圖所示。1.3走近Vue.js1.3.3

漸進(jìn)式框架2.Vue.js的主張每個Web框架均不可避免的會有自己的一些特點(diǎn)，并對使用者提出一定的使用要求，這些要求即為主張，主張有強(qiáng)有弱，其強(qiáng)勢程度會影響框架在業(yè)務(wù)開發(fā)中的使用效能。而Vue是弱主張的，這使得開發(fā)者在項目開發(fā)中可以只關(guān)注項目所需的功能特性，暫時忽略項目中不需要的功能，Vue并不強(qiáng)求讀者一次性掌握其所有的功能特性。1.3走近Vue.js1.3.3

漸進(jìn)式框架3.Vue.js的響應(yīng)式區(qū)別Vue的MVVM模式實(shí)現(xiàn)了數(shù)據(jù)的雙向數(shù)據(jù)綁定，為Vue構(gòu)建了一套響應(yīng)式系統(tǒng)。響應(yīng)式系統(tǒng)可在數(shù)據(jù)變化時自動渲染視圖，需要注意的是，Vue2與Vue3的響應(yīng)式原理并不完全一致，二者之間存在較大差別。1.3走近Vue.js1.3.4

響應(yīng)式系統(tǒng)4.Vue2的響應(yīng)式區(qū)別Vue2使用ES5的Object.defineProperty()方法，重新定義對象獲取屬性值的方法get()和設(shè)置屬性值的方法set()，實(shí)現(xiàn)了Vue的“雙向數(shù)據(jù)綁定”操作。需要注意的是，該方法存在一些不足，如性能較差、無法偵測對象新增屬性、無法偵測數(shù)組的length變化等。1.3走近Vue.js1.3.4

響應(yīng)式系統(tǒng)5.Vue3的響應(yīng)式區(qū)別Vue的作者重構(gòu)了Vue3響應(yīng)式系統(tǒng)，使用ES6中的Proxy替換Object.defineProperty()方法。Proxy被稱為代理器，可實(shí)現(xiàn)對其他對象的代理，外界對被代理對象進(jìn)行的所有操作，均會被Proxy攔截、過濾、代理操作。在Vue3中，無需像Object.defineProperty()方法一樣逐一遍歷被攔截對象的每個屬性，這大大提升了Vue的性能。除此之外，Proxy可直接監(jiān)聽數(shù)組類型的變化，無需借助包裝方法操作數(shù)組。1.3走近Vue.js1.3.4

響應(yīng)式系統(tǒng)近兩年前端技術(shù)層出不窮，目前市面上供前端人員使用的開發(fā)框架愈加豐富，前端框架領(lǐng)域也日趨成熟，基本形成了Angular、React和Vue三足鼎立的局面。1.Vue與Angular（1）Angular是強(qiáng)主張的，開發(fā)者使用Angular時，必須接受它的使用規(guī)則，如模塊機(jī)制、必須依賴注入、特殊形式定義組件等。（2）Angular帶有比較強(qiáng)的排它性，當(dāng)使用Angular框架所開發(fā)的項目需要不斷集成其他方案時，Angular的強(qiáng)主張會要求開發(fā)者花費(fèi)大量時間來掌握Angular的全部生態(tài)。1.3走近Vue.js1.3.5前端框架對比2.Vue與React（1）在響應(yīng)式原理上，React推崇函數(shù)式編程，堅持手動優(yōu)化，數(shù)據(jù)不可變。Vue依賴數(shù)據(jù)收集實(shí)現(xiàn)自動優(yōu)化，數(shù)據(jù)可變。（2）在組件寫法上，React推薦JSX寫法，也就是把HTML和CSS全都寫進(jìn)JavaScript中。Vue也支持JSX寫法，但Vue更推薦template的單文件組件格式，即HTML、CSS、JS寫在同一個文件。（3）在渲染效率上，React應(yīng)用程序的狀態(tài)被改變時，其全部子組件都會重新渲染。而Vue在渲染期間會自動跟蹤每一個組件的依賴關(guān)系，準(zhǔn)確把握需要重新渲染的組件，避免重新渲染整個組件樹，提升系統(tǒng)的渲染效率。1.3走近Vue.js1.3.5前端框架對比1.4Vue.js3.0的新變化響應(yīng)式系統(tǒng)性能優(yōu)化組合API（CompositionAPI）碎片（Fragment）Tree-shaking支持Teleport懸念（Suspense）更好的TypeScript支持2020年9月，Vue.js3.0（簡稱為Vue3.0或Vue3）正式發(fā)布。Vue3是一套組合拳，它帶來的變化全面而繁雜，Vue3采用TypeScript重寫了Vue2的框架，將新版API設(shè)為普通類型的函數(shù)，使開發(fā)者開發(fā)時獲得完整的類型推斷體驗(yàn)。1.響應(yīng)式系統(tǒng)Vue2利用Object.defineProperty()方法偵聽對象屬性的變化，但該方法存在一定的缺陷。Vue3對Vue2的響應(yīng)式系統(tǒng)進(jìn)行了重構(gòu)，使用Proxy替代Object.defineProperty()方法，彌補(bǔ)了Vue2的不足，響應(yīng)式系統(tǒng)的詳細(xì)介紹具體見本書1.3.4節(jié)，此處不再進(jìn)行贅述。1.4Vue.js3.0的新變化2.性能優(yōu)化隨著Vue3對虛擬DOM的重寫，編譯器的優(yōu)化，開發(fā)者可以根據(jù)編譯時的提示來減少運(yùn)行時的開銷，使系統(tǒng)渲染和更新的性能獲得大幅度提升，服務(wù)端渲染的性能也獲得2~3倍的提升。3.組合API（CompositionAPI）Vue3引入了基于函數(shù)設(shè)計的組合式API。組合式API是一組低侵入式的、函數(shù)式的API，使得開發(fā)者能夠更靈活地組合組件間的邏輯，無副作用地復(fù)用代碼，高效地進(jìn)行類型判斷。在Vue2中主要借助Mixin來實(shí)現(xiàn)功能復(fù)用，但大量的Mixin雜糅在一起使開發(fā)者很難判斷復(fù)用的功能來源于哪個Mixin，在開發(fā)中，推薦開發(fā)者使用組合式API。1.4Vue.js3.0的新變化4.碎片（Fragment）Vue2要求Vue文件必須擁有唯一的根節(jié)點(diǎn)，在Vue3中，這個限制已經(jīng)被移除。Vue3引入了碎片的概念，碎片是一種新的聲明方式，用于描述可能的、不唯一的節(jié)點(diǎn)樹。使用碎片，讀者可以在一個Vue文件中定義多個根節(jié)點(diǎn)。5.Tree-shaking支持Vue3僅打包真正需要的模塊，會對無用的模塊進(jìn)行“剪枝”，這會減少產(chǎn)品發(fā)布版本的體積大小。而在Vue2中，即使項目中用不到的功能模塊也會被打包進(jìn)來。1.4Vue.js3.0的新變化6.Teleport在開發(fā)中有些元素在邏輯上屬于組件，而在技術(shù)方面，最好將該元素放置在DOM中、Vue應(yīng)用程序之外的其他位置，即將該元素與Vue應(yīng)用程序的DOM完全剝離，此時可使用Vue3所支持的Teleport功能快速實(shí)現(xiàn)。7.懸念（Suspense）Suspense是一個內(nèi)置組件，用來在組件樹中協(xié)調(diào)對異步依賴的處理。它允許程序在等待異步組件時渲染一些后備的內(nèi)容，進(jìn)而提供一個平滑的用戶體驗(yàn)。需要注意的是，Suspense是一項實(shí)驗(yàn)性功能。它不一定會最終成為穩(wěn)定功能，并且在穩(wěn)定之前相關(guān)API也可能會發(fā)生變化。1.4Vue.js3.0的新變化8.更好的TypeScript支持Vue3是用TypeScript編寫的庫，對TypeScript具有較好的類型支持。TypeScript是JavaScript的一個超集，它擴(kuò)展了JavaScript的語法，JavaScript與TypeScript一起工作時無需進(jìn)行任何兼容性處理。在項目開發(fā)中，使用一些支持Vue3的TypeScript插件，可提高開發(fā)效率，使項目擁有類型檢查、自動補(bǔ)全等功能。1.4Vue.js3.0的新變化課后小結(jié)本章介紹了Web前端發(fā)展歷程，使讀者對前端技術(shù)的演變有一個基礎(chǔ)的了解，同時介紹了MVC、MVP及MVVM模式間的異同，并引出基于MVVM模式設(shè)計的Vue.js框架及Vue3的新特性。希望通過本章內(nèi)容的分析和講解，讀者能夠?qū)ue.js的生態(tài)系統(tǒng)、漸進(jìn)式特點(diǎn)、響應(yīng)式系統(tǒng)有初步了解，為使用Vue框架創(chuàng)建項目奠定基礎(chǔ)。第2章Vue.js環(huán)境搭建與項目創(chuàng)建2.1

HTML5語義化2.2

HTML5常用標(biāo)簽2.3

實(shí)例一：感恩母親節(jié)了解Vue.js的多種安裝方法掌握Vue.js開發(fā)工具的安裝熟悉Vue.js調(diào)試工具的安裝掌握Vue.js項目創(chuàng)建的技巧引言在開發(fā)Vue前端頁面之前，需要搭建好開發(fā)和測試環(huán)境，良好的開發(fā)環(huán)境對于穩(wěn)定開發(fā)者以及提高生產(chǎn)效率都有著不可忽視的作用。在創(chuàng)建Vue項目之前，需要先搭建良好的Vue.js開發(fā)環(huán)境，包括安裝Vue.js，理解Vue.js多種安裝方式的不同之處，選擇并安裝合適的開發(fā)工具，進(jìn)而提高開發(fā)效率，安裝為調(diào)試項目服務(wù)的調(diào)試工具vue-devtools等，使開發(fā)者在完成環(huán)境搭建的基礎(chǔ)上掌握Vue項目創(chuàng)建的方法。2.1安裝Vue.jsCDN方式安裝Vue.jsNPM方式安裝Vue.js使用VueCLI方式安裝Vue.js使用Vite方式安裝Vue.js2.1安裝Vue.js1.CDN的定義CDN（ContentDeliveryNetwork，內(nèi)容分發(fā)網(wǎng)絡(luò)）是構(gòu)建在現(xiàn)有網(wǎng)絡(luò)基礎(chǔ)之上的智能虛擬網(wǎng)絡(luò)，依靠部署在各地的邊緣服務(wù)器，通過中心平臺的負(fù)載均衡、內(nèi)容分發(fā)、調(diào)度等功能模塊，使用戶就近獲取所需內(nèi)容，降低網(wǎng)絡(luò)擁塞，提高用戶訪問響應(yīng)速度和命中率。2.1.1

CDN方式安裝Vue.js2.1安裝Vue.js2.CDN方式安裝Vue.js的語法格式使用CDN方式引入Vue.js，需要選擇一個可提供Vue.js鏈接的穩(wěn)定CDN服務(wù)商。開發(fā)者可借助script標(biāo)簽實(shí)現(xiàn)CDN方式安裝Vue.js，語法格式如下所示。2.1.1

CDN方式安裝Vue.js<scriptsrc="/vue@next"></script>2.1安裝Vue.js3.CDN方式安裝Vue.js的優(yōu)缺點(diǎn)（1）優(yōu)點(diǎn)不需要下載和安裝Vue.js，可以直接使用CDN文件，減少了本地文件占用和維護(hù)的成本。（2）缺點(diǎn)依賴于CDN服務(wù)商，可能會出現(xiàn)CDN服務(wù)不穩(wěn)定或者CDN文件更新不及時的情況。2.1.1

CDN方式安裝Vue.js2.1安裝Vue.js1.NPM的定義NPM（nodepackagemanager）是一個Node.js的包管理器和分發(fā)器。NPM是隨同Node.js一起安裝的，是Node.js社區(qū)中非常流行、支持大量第三方模塊的包管理器。Node.js集成了NPM，使用NPM方式安裝Vue框架時，可直接安裝Node.js實(shí)現(xiàn)NPM的免安裝。2.1.2

NPM方式安裝Vue.js2.1安裝Vue.js2.NPM方式安裝Vue.js的命令代碼NPM方式安裝Vue.js的命令代碼如下所示。#安裝最新穩(wěn)定版$npminstallvue@next2.1.2

NPM方式安裝Vue.js2.1安裝Vue.js3.CNPM方式安裝Vue.js的命令代碼由于NPM的官方鏡像是國外的服務(wù)器，而開發(fā)者在國內(nèi)訪問國外的服務(wù)器非常慢，本書推薦開發(fā)者使用淘寶的NPM鏡像CNPM，安裝CNPM的命令代碼如下所示。npminstall-gcnpm--registry=2.1.2

NPM方式安裝Vue.js2.1安裝Vue.js4.安裝項目所需模塊完成CNPM安裝后，開發(fā)者可使用cnpm命令安裝項目所需模塊，具體命令代碼如下所示。cnpminstall模塊名稱2.1.2

NPM方式安裝Vue.js2.1安裝Vue.js5.NPM方式安裝Vue.js的優(yōu)缺點(diǎn)（1）優(yōu)點(diǎn)可以自由選擇Vue的版本和更新方式；可以使用Vue的腳手架工具VueCLI，方便快捷地創(chuàng)建和管理Vue項目；可以和其他NPM包管理器配合使用，如Webpack或Browserify，方便進(jìn)行模塊打包和依賴管理。（2）缺點(diǎn)需要下載和安裝Node.js和NPM環(huán)境，增加了本地文件占用和維護(hù)成本。安裝速度可能會受到網(wǎng)絡(luò)環(huán)境的影響。2.1.1

CDN方式安裝Vue.js2.1安裝Vue.jsVue提供了一個官方的腳手架VueCLI，它可以快速搭建一個應(yīng)用，它為現(xiàn)代前端提供了batteries-included的構(gòu)建設(shè)置。只需幾分鐘就可以運(yùn)行起應(yīng)用，并帶有熱重載、保存時lint校驗(yàn)，以及生產(chǎn)環(huán)境可用的構(gòu)建版本。使用VueCLI創(chuàng)建項目要求開發(fā)者具備一定的Node.js及相關(guān)構(gòu)建工具的基礎(chǔ)知識，本書將在第9章將詳細(xì)介紹腳手架的安裝及使用。2.1.3

VueCLI安裝2.1安裝Vue.jsVite是Vue的作者開發(fā)的一個面向現(xiàn)代瀏覽器的，更加輕量、快捷的前端構(gòu)建工具，Vite可為前端工作者提供良好的開發(fā)體驗(yàn)。Vite采用了基于瀏覽器原生ES6模塊導(dǎo)入的方式，利用瀏覽器去解析import，可實(shí)現(xiàn)閃電般地冷服務(wù)器啟動。本書將在第9章詳細(xì)介紹Vite的安裝與使用。2.1.4

Vite安裝2.2Vue.js的開發(fā)與調(diào)試工具Web前端開發(fā)工具安裝VSCode安裝vue-devtoolsVisualStudioCode（簡稱VSCode）是微軟開發(fā)的一個輕量級代碼編輯器，軟件功能非常強(qiáng)大，界面簡潔明晰，操作方便快捷，設(shè)計十分人性化。VSCode支持常見的語法提示、代碼高亮、Git等功能，具有開源、免費(fèi)、跨平臺、插件擴(kuò)展豐富、運(yùn)行速度快、占用內(nèi)存少，開發(fā)效率高等特點(diǎn)，網(wǎng)頁開發(fā)中經(jīng)常會使用到該軟件，非常靈活方便。2.2Vue.js的開發(fā)與調(diào)試工具2.2.1

Web前端開發(fā)工具進(jìn)入VSCode官方頁面，下載VSCode的安裝包進(jìn)行安裝，官方頁面如下圖所示。2.2Vue.js的開發(fā)與調(diào)試工具2.2.1

Web前端開發(fā)工具VSCode的安裝2.2Vue.js的開發(fā)與調(diào)試工具2.2.2

安裝VSCodeVSCode的安裝2.2Vue.js的開發(fā)與調(diào)試工具2.2.2

安裝VSCodeVSCode的安裝2.2Vue.js的開發(fā)與調(diào)試工具2.2.2

安裝VSCodeVSCode的安裝2.2Vue.js的開發(fā)與調(diào)試工具2.2.2

安裝VSCodeVSCode插件的安裝VSCode作為編程IDE，可以方便地安裝一些插件進(jìn)行功能擴(kuò)展。VSCode插件可美化代碼格式，提供語法檢查功能，提高代碼開發(fā)效率，接下來將詳細(xì)介紹Vue開發(fā)中常用的4個插件。2.2Vue.js的開發(fā)與調(diào)試工具2.2.1

Web前端開發(fā)工具（1）Chinese中文VSCode默認(rèn)使用英文顯示界面，但VSCode允許開發(fā)者將默認(rèn)語言改為中文。首先打開VSCode，按下“Ctrl+Shift+P”的組合鍵，然后在搜索框中輸入config并選中ConfigureDisplayLanguage，在彈出的語言列表中選中“中文（簡體）”即可。隨后頁面詢問開發(fā)者是否確定更改顯示語言并重啟VSCode，此時單擊ReStart按鈕即可完成安裝，頁面上的文字將自動轉(zhuǎn)換為中文格式。2.2Vue.js的開發(fā)與調(diào)試工具2.2.1

Web前端開發(fā)工具（2）Vetur插件Vetur插件支持vue文件的語法高亮顯示，除了支持template模板以外，還支持大多數(shù)主流的前端開發(fā)腳本和插件，如Sass和TypeScript等。2.2Vue.js的開發(fā)與調(diào)試工具2.2.1

Web前端開發(fā)工具（3）ESLint代碼檢測校驗(yàn)ESLint是一個用來識別JavaScript并且按照規(guī)則給出報告的代碼檢測工具，使用它可以避免低級語法錯誤或統(tǒng)一代碼風(fēng)格，可以有效地控制項目中代碼的質(zhì)量。ESLint插件的安裝步驟與Vetur相同，在搜索框中輸入ESLint即可查找到該插件并進(jìn)行安裝。2.2Vue.js的開發(fā)與調(diào)試工具2.2.1

Web前端開發(fā)工具（4）CodeRunner快捷運(yùn)行CodeRunner可以使開發(fā)者在VSCode中以一種快捷的方式運(yùn)行各類代碼、代碼片段。CodeRunner插件的安裝步驟與Vetur相同，在搜索框中輸入CodeRunner即可查找到該插件并進(jìn)行安裝。安裝完成后，開發(fā)者可在代碼編輯窗口中單擊右鍵選擇RunCode選項運(yùn)行代碼，或在代碼編輯窗口中按下“Ctrl+Alt+N”的組合鍵運(yùn)行代碼。2.2Vue.js的開發(fā)與調(diào)試工具2.2.1

Web前端開發(fā)工具vue-devtools是一款基于GoogleChrome瀏覽器、用于調(diào)試Vue應(yīng)用的瀏覽器擴(kuò)展。vue-devtools可以顯示虛擬DOM樹和組件信息，可以極大地提高前端開發(fā)人員的調(diào)試效率。2.2Vue.js的開發(fā)與調(diào)試工具2.2.3

安裝vue-devtools1.下載壓縮包打開瀏覽器，進(jìn)入vue-devtools的官方下載頁面。單擊Code菜單下的DownloadZIP按鈕即可下載vue-devtools安裝包。2.2Vue.js的開發(fā)與調(diào)試工具2.2.3

安裝vue-devtools2.解壓安裝包vue-devtools安裝包下載成功后需要解壓該壓縮包，解壓后的文件名為devtools-main。進(jìn)入devtools-main文件夾，打開命令提示符窗口。2.2Vue.js的開發(fā)與調(diào)試工具2.2.3

安裝vue-devtools3.下載第三方依賴使用vue-devtools需要下載第三方依賴，一般使用npminstall下載第三方依賴。由于npm的安裝速度較低，建議借助yarn下載第三方依賴。執(zhí)行npminstall-gyarn命令安裝yarn。2.2Vue.js的開發(fā)與調(diào)試工具2.2.3

安裝vue-devtools3.下載第三方依賴執(zhí)行yarninstall命令下載第三方依賴，下載成功后，執(zhí)行yarnrunbuild命令編譯vue-devtools源程序。2.2Vue.js的開發(fā)與調(diào)試工具2.2.3

安裝vue-devtools4.Google瀏覽器的開發(fā)者模式（1）打開Google瀏覽器，單擊右上角的“”圖標(biāo)，并在下方彈出的快捷菜單中選中“更多工具”→“擴(kuò)展程序”選項。2.2Vue.js的開發(fā)與調(diào)試工具2.2.3

安裝vue-devtools4.Google瀏覽器的開發(fā)者模式（2）開Google瀏覽器的擴(kuò)展程序后，即可進(jìn)入擴(kuò)展程序管理頁面。需要確保Google瀏覽器的開發(fā)者模式處于打開狀態(tài)，如果處于未打開狀態(tài)，則需要單擊開發(fā)者模式右側(cè)的單選按鈕開啟開發(fā)者模式。2.2Vue.js的開發(fā)與調(diào)試工具2.2.3

安裝vue-devtools5.安裝vue-devtools開啟Google瀏覽器的開發(fā)者模式后，單擊“加載已解壓的擴(kuò)展程序”按鈕并選擇devtools-main文件夾下的packages\shell-chrome文件夾，即可安裝vue-devtools擴(kuò)展。2.2Vue.js的開發(fā)與調(diào)試工具2.2.3

安裝vue-devtools2.3實(shí)訓(xùn)：創(chuàng)建第一個Vue.js程序菜系介紹頁面結(jié)構(gòu)簡圖實(shí)現(xiàn)菜系介紹頁面效果中國餐飲文化歷史悠久，菜肴在烹飪中有許多流派，并最終形成了以魯、川、粵、蘇、閩、浙、湘、徽為主的“八大菜系”。菜系介紹頁面由川菜的代表菜名稱、圖片及詳情介紹組成，其中代表菜名稱、圖片及詳情介紹均是響應(yīng)式的。2.3實(shí)訓(xùn)：創(chuàng)建第一個Vue.js程序2.3.1

菜系介紹頁面結(jié)構(gòu)簡圖實(shí)現(xiàn)步驟:使用Vue創(chuàng)建程序非常簡單，具體步驟如下所示。第1步，安裝Vue.js庫并使用Vue.createApp()方法創(chuàng)建一個應(yīng)用程序?qū)嵗?。?步，在data()函數(shù)中定義頁面中需要渲染的數(shù)據(jù)，將data()中的數(shù)據(jù)通過{{}}插值語法展示在頁面中。第3步，調(diào)用mount()方法在指定的DOM元素上掛載應(yīng)用程序?qū)嵗母M件，實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，具體代碼如例2-1所示。2.3實(shí)訓(xùn)：創(chuàng)建第一個Vue.js程序2.3.2實(shí)現(xiàn)菜系介紹頁面效果<body><!--DOM容器--><divid="app"><h1>{{style}}-{{repDishes}}</h1><div><imgsrc="../ch02/img/tofu.jpg"alt=""style="width:250px;height:200px;"></div><p>{{detail}}</p></div><!--CDN方式引入vue--><scriptsrc="/vue@next"></script><script>//創(chuàng)建一個應(yīng)用程序?qū)嵗?/p>

constvm=Vue.createApp({//該函數(shù)返回數(shù)據(jù)對象data(){return{

主體代碼

例2-1style:'川菜',repDishes:'麻婆豆腐',detail:'此菜成菜麻、辣、鮮、香、燙、脆、嫩、酥，將川菜麻辣味型的特點(diǎn)展現(xiàn)的淋漓盡致。'}}}).mount('#app')//在指定的DOM元素容器上掛載應(yīng)用程序?qū)嵗母M件</script></body>2.3實(shí)訓(xùn)：創(chuàng)建第一個Vue.js程序2.3.2實(shí)現(xiàn)菜系介紹頁面效果Console選項調(diào)試代碼:在瀏覽器中運(yùn)行上述代碼，按下F12鍵打開控制臺，切換至Console選項，并輸入vm.detail="豆腐為補(bǔ)益、清熱養(yǎng)生食品"，按下Enter鍵，可以發(fā)現(xiàn)頁面中的詳情介紹內(nèi)容同步發(fā)生了變化。2.3實(shí)訓(xùn)：創(chuàng)建第一個Vue.js程序2.3.2實(shí)現(xiàn)菜系介紹頁面效果Vue選項調(diào)試代碼:使用vue-devtools進(jìn)行調(diào)試，按下F12鍵打開控制臺，切換至Vue選項，并修改detail="此菜夏天食用能生津止渴"，單擊“保存”按鈕，可以發(fā)現(xiàn)頁面中的內(nèi)容同步發(fā)生了變化。2.3實(shí)訓(xùn)：創(chuàng)建第一個Vue.js程序2.3.2實(shí)現(xiàn)菜系介紹頁面效果課后小結(jié)本章介紹了Vue.js的多種安裝方式，使讀者能夠靈活應(yīng)對多種開發(fā)環(huán)境，同時介紹了VSCode這一優(yōu)秀的前端開發(fā)工具的下載、安裝與插件配置，最后介紹vue-devtools調(diào)試工具的安裝，進(jìn)一步豐富Vue程序檢查與調(diào)試的途徑。通過對本章內(nèi)容的分析和講解，讀者能夠掌握Vue.js的安裝與配置，熟悉VSCode開發(fā)工具的使用，能快速編寫出一個簡單的Vue程序，為開啟Vue前端開發(fā)之旅奠定基礎(chǔ)。第3章

ECMAScript6語法3.1ECMAScript6介紹3.2塊作用域構(gòu)造let與const3.3模板字面量3.4默認(rèn)參數(shù)與rest參數(shù)3.5展開運(yùn)算符3.6解構(gòu)賦值3.7箭頭函數(shù)3.8Symbol3.9Promise3.10Class3.11Module模塊3.12async函數(shù)3.13實(shí)訓(xùn)：商品訂單頁面了解ECMAScript6基本知識掌握塊作用域構(gòu)造與模板字符串的使用掌握ECMAScript6默認(rèn)參數(shù)與rest參數(shù)的使用掌握展開運(yùn)算符、解構(gòu)賦值、箭頭函數(shù)的使用掌握Symbol、Promise、Class的基本語法掌握Module模塊與async函數(shù)的基本語法引言ECMAScript6（簡稱ES6）是ECMAScript5（簡稱ES5）之后發(fā)布的JavaScript語言的新一代標(biāo)準(zhǔn)，其中包含了很多新的特性和語法。以Chrome和Firefox為首的現(xiàn)代瀏覽器對ES6的支持相當(dāng)迅速，不僅支持了ES6的絕大多數(shù)特性，還使ES6的普及速度遠(yuǎn)超ES5。ES6的目標(biāo)是使JavaScript語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級的開發(fā)語言，在Vue項目中經(jīng)常使用ES6語法。3.1ECMAScript6介紹ECMAScript的誕生ECMAScript的版本信息3.1ECMAScript6介紹1.ECMAScript6的誕生1995年，網(wǎng)景通信公司(NetscapeCommunicationsCorporation)設(shè)計了JavaScript腳本語言，并將其集成到Navigator瀏覽器的2.0版本中。隨后，微軟公司模仿JavaScript開發(fā)出JScript和VBScript，將其添加到InternetExplorer(簡稱IE)瀏覽器中。這也導(dǎo)致了微軟公司和網(wǎng)景通信公司的兩個瀏覽器之間的產(chǎn)品競爭。后來Navigator在瀏覽器市場上落于下風(fēng)，于是網(wǎng)景通信公司將JavaScript提交到歐洲計算機(jī)制造商協(xié)會(EuropeanComputerManufacturersAssociation，ECMA)，推動制定了ECMAScript標(biāo)準(zhǔn)，這也是ECMAScript6的由來。3.1ECMAScript6介紹2.ECMAScript6的版本信息隨著JavaScript的一次次更新，ECMAScript也發(fā)布了多個版本。版本發(fā)布日期與前版本的差異ECMAScript1.01997年7月首版ECMAScript2.0版1998年6月該版本修改格式規(guī)范，使其完全符合ISO/IEC16262國際標(biāo)準(zhǔn)ECMAScript3.01999年12月該版本增加正則表達(dá)式，擁有更好的詞法作用域鏈處理，新的控制語句，try/catch異常處理，更加明確的錯誤定義，數(shù)據(jù)輸出的格式化等ECMAScript4.02008年7月由于該版本在語言的復(fù)雜性方面出現(xiàn)分歧，ECMA決定中止第4版本的開發(fā)，但該版本中的部分內(nèi)容成為第5版本及Harmony的基礎(chǔ)3.1ECMAScript6介紹2.ECMAScript6的版本信息ECMAscript5.02009年12月該版本完善了ECMAScript3.0版本、增加嚴(yán)格模式（strictmode），可進(jìn)行更加徹底的錯誤檢查。增加了多個新功能，如getters和setters等，支持JSON庫和更完整的對象屬性ECMAScript6.02015年6月該版本擁有多個新的概念和語言特性。ECMAScriptHarmony將會以ECMAScript6發(fā)布ECMAScript1.01997年7月首版ECMAScript2.0版1998年6月該版本修改格式規(guī)范，使其完全符合ISO/IEC16262國際標(biāo)準(zhǔn)ECMAScript3.01999年12月該版本增加正則表達(dá)式，擁有更好的詞法作用域鏈處理，新的控制語句，try/catch異常處理，更加明確的錯誤定義，數(shù)據(jù)輸出的格式化等3.2塊作用域構(gòu)造let與constlet聲明const聲明3.2

塊作用域構(gòu)造let與const在學(xué)習(xí)本節(jié)內(nèi)容之前，讀者需要先了解幾個基本概念，如塊級聲明、變量提升和暫時性死區(qū)。塊級聲明用于聲明在指定塊級作用域之外無法訪問的變量。塊級作用域指的是函數(shù)內(nèi)部或者字符{}內(nèi)的區(qū)域。變量提升指的是var所聲明的變量，會被提升至它所在作用域的頂部位置。暫時性死區(qū)指的是由于let、const聲明的變量不存在變量提升機(jī)制，若在變量聲明之前調(diào)用該變量，則該變量不可訪問，進(jìn)而形成暫時性死區(qū)效果。引言3.2

塊作用域構(gòu)造let與constES6新增了let命令用于聲明變量，其用法與var命令類似。但let命令聲明的變量具有塊級作用域，不存在變量提升機(jī)制，可產(chǎn)生暫時性死區(qū)效果，不可在同一作用域下重復(fù)聲明同名變量。3.2.1

let聲明3.2

塊作用域構(gòu)造let與const1.塊級作用域let命令所聲明的變量只在let命令所在的代碼塊內(nèi)有效。3.2.1

let聲明functioncube(flag){if(flag){leta=10;varb=1;}console.log(b);//此處可訪問b，輸出結(jié)果:1console.log(a);//此處不可訪問a，報錯:ReferenceError:aisnotdefined}console.log(cube(true));在代碼塊之外調(diào)用了變量a、變量b，var命令聲明的變量b返回1，let命令聲明的變量a報錯，這表明let命令聲明的變量只在它所在的代碼塊內(nèi)有效。例3-13.2

塊作用域構(gòu)造let與const2.暫時性死區(qū)（1）定義JavaScript的變量提升機(jī)制使var命令聲明的變量，無論在何處聲明均會被視為在當(dāng)前作用域頂部聲明的變量。但let命令聲明的變量不存在變量提升機(jī)制，在變量聲明之前使用該變量，該變量不可訪問且會形成暫時性死區(qū)。3.2.1

let聲明3.2

塊作用域構(gòu)造let與const2.暫時性死區(qū)（2）演示3.2.1

let聲明console.log(a);//undefined因?yàn)関ar存在變量提升vara='新新青年';console.log(b);//報錯:Cannotaccess'b'beforeinitializationletb='新新青年';在變量a、變量b聲明前，提前調(diào)用了變量a、變量b。var命令聲明的變量a存在變量提升機(jī)制，其調(diào)用結(jié)果未報錯，并返回undefined。let命令聲明的變量b報錯，這表明let命令不具有變量提升機(jī)制且存在暫時性死區(qū)。3.2

塊作用域構(gòu)造let與const3.不可重復(fù)聲明var命令可以重復(fù)聲明同名變量，后定義的變量將覆蓋先聲明的變量。在ES6中，let命令可用于避免變量的重復(fù)聲明。3.2.1

let聲明vara=1;vara=2;console.log(a);//輸出結(jié)果：2letb=10;letb=20;console.log(b);//報錯：'b'hasalreadybeendeclaredlet命令的不可重復(fù)聲明僅限于同一作用域下，在不同作用域下，let命令可重復(fù)聲明同名變量。例3-23.2

塊作用域構(gòu)造let與constES6新增了const命令用于聲明常量，其用法與let命令類似，同樣具有塊級作用域，不存在變量提升機(jī)制，可產(chǎn)生暫時性死區(qū)效果，不可重復(fù)聲明。但與let命令不同的是，const命令聲明的常量不可改變，且必須在聲明的同時對常量進(jìn)行初始化。3.2.2

const聲明3.2

塊作用域構(gòu)造let與const1.const常量初始化每個使用const命令聲明的常量都必須在聲明的同時進(jìn)行初始化賦值。consta=10;//正確constb;//報錯:'const'declarationsmustbeinitializedb=100;const命令聲明常量a時對其進(jìn)行了初始化賦值，而聲明常量b時沒有對其進(jìn)行初始化賦值，會導(dǎo)致執(zhí)行這段代碼時提示語法錯誤，因此開發(fā)者必須初始化const命令聲明的常量。3.2.2

const聲明3.2

塊作用域構(gòu)造let與const2.const常量的一次賦值當(dāng)const命令聲明的常量是基礎(chǔ)數(shù)據(jù)類型時，不可修改該常量的值。const命令聲明的常量實(shí)際上是棧內(nèi)存地址中保存的值，const常量的值不可更改指的是棧內(nèi)存中保存的數(shù)據(jù)不可更改。consta="hello";a="你好";//報錯:"Assignmenttoconstantvariable."左側(cè)代碼中，首先使用const命令聲明了常量a，并為其進(jìn)行初始化賦值。隨后嘗試將常量a的值重新賦值為“你好”，執(zhí)行該段代碼時，會拋出語法錯誤提示。這是因?yàn)槌Ａ縜在初始化時已經(jīng)賦過值，并且值的數(shù)據(jù)類型為字符串，該數(shù)據(jù)類型為基礎(chǔ)數(shù)據(jù)類型。上述操作違背了const的一次賦值規(guī)則。3.2.2

const聲明3.2

塊作用域構(gòu)造let與const3.const對象常量當(dāng)const命令聲明的常量是引用數(shù)據(jù)類型的時候，其棧內(nèi)存的引用地址不可更改，其堆內(nèi)存中保存的值可以被更改。這意味著使用const命令聲明對象后，可以修改對象的屬性，不可修改對象的引用。constobj={prices:'100'};obj.prices="200";//可修改對象的屬性值console.log(obj);//輸出：{prices:'200'}//不可修改對象的引用地址，拋出錯誤提示"Assignmenttoconstantvariable."obj={prices="300"};左側(cè)代碼中，綁定obj是一個包含屬性的對象，改變的值，不會拋出任何語法錯誤，這是因?yàn)榇藭r修改的是obj中包含的name屬性的值。如果直接給對象obj賦值，會拋出語法錯誤，因?yàn)榇藭r要改變的是對象obj的內(nèi)存地址。3.2.2

const聲明3.2

塊作用域構(gòu)造let與const4.全局塊作用域綁定var命令與let、const命令的另一個區(qū)別是它們在全局作用域中的行為。在全局作用域中，使用var命令會創(chuàng)建一個新的全局變量作為全局對象（window）的屬性，這意味著var命令聲明的變量可能會覆蓋一個已經(jīng)存在的全局屬性。在全局作用域中使用let命令或const命令，會在全局作用域下創(chuàng)建一個新的綁定，但該綁定不會添加為全局對象的屬性，不會覆蓋全局變量。3.2.2

const聲明3.3模板字面量模板字面量的基礎(chǔ)用法多行字符串字符串占位符模板字面量的嵌套示例3.2

塊作用域構(gòu)造let與constES6引入了模板字面量（TemplateLiterals），以模板字面量的方式對ES5的字符串操作進(jìn)行了增強(qiáng)，如新增了多行字符串、字符串占位符等。1.模板字面量的基礎(chǔ)用法（1）模板字面量的基礎(chǔ)用法是使用反引號（`）替換字符串的單引號和雙引號。letmessage=`HelloWorld`;console.log(message);//輸出結(jié)果:"HelloWorld"左側(cè)代碼中，使用模板字面量語法創(chuàng)建了一個字符串，并將字符串賦值給變量message，此時message的值與普通字符串效果相同。3.2

塊作用域構(gòu)造let與const1.模板字面量的基礎(chǔ)用法（2）當(dāng)讀者需要在模板字面量包裹的字符串中顯示反引號時，可將反斜杠（\）插進(jìn)需要顯示的反引號之前，對其進(jìn)行轉(zhuǎn)義。letmessage2=`\`Hello\`World`;console.log(message2);//輸出結(jié)果:"`Hello`World"3.2

塊作用域構(gòu)造let與const2.多行字符串（1）ES5的多行字符串創(chuàng)建方法在ES5中，可在一行字符串的結(jié)尾處添加反斜杠（\），表示承接下一行代碼。letmessage3="Hello\World";console.log(message3);//輸出結(jié)果:"HelloWorld"左側(cè)代碼中，輸出結(jié)果并未實(shí)現(xiàn)跨行顯示，這是由于反斜杠（\）僅表示行的承接與延續(xù)，并非代表新的一行。3.2

塊作用域構(gòu)造let與const2.多行字符串（1）ES5的多行字符串創(chuàng)建方法若希望輸出多行字符串，則需手動加入換行符（\n）或使用加號（+）拼接多個字符串與換行符（\n）。letmessage="Hello\n\World";letmessage5="Hello"+"\n"+"World";console.log(message);console.log(message5);//第4行代碼與第5行代碼輸出結(jié)果相同，如下：HelloWorld例3-33.2

塊作用域構(gòu)造let與const2.多行字符串（2）ES6的多行字符串創(chuàng)建方法在ES6中，讀者可使用模板字面量快速創(chuàng)建多行字符串。只需要使用反引號（`）包裹字符串，并在字符串中直接換行，就可以在字符串中添加新的一行，實(shí)現(xiàn)多行字符串效果。letmessage6=`HelloWorld`;console.log(message6);//輸出結(jié)果：HelloWorld例3-43.2

塊作用域構(gòu)造let與const3.字符串占位符在ES6新增的模板字面量中，可將JavaScript變量或合法的JavaScript表達(dá)式嵌入字符串占位符并將其作為字符串的組成部分輸出到頁面中。占位符由左側(cè)的“${”及右側(cè)的“}”組成，中間可放置變量或表達(dá)式。letname="北京烤鴨",price="88",detail=`一只${name}的價格為:${price}`console.log(detail);//輸出結(jié)果：一只北京烤鴨的價格為:88<body><h1>歡迎語展示頁面</h1><h4id="hi"></h4></body><script>(functionhello(){letusername="張三",identity="level1",Days="66";letstrings=`歡迎進(jìn)入后臺首頁，${`親愛的${identity}用戶-${username}`},您已連續(xù)上線${Days}天`document.getElementById("hi").innerText=strings;})()</script>例3-53.2

塊作用域構(gòu)造let與const4.模板字面量的嵌套示例事實(shí)上，模板字面量也是JavaScript表達(dá)式，讀者可在一個模板字面量內(nèi)嵌套另一個模板字面量。接下來將以頁面的歡迎語為主題，演示模板字面量的嵌套使用3.4默認(rèn)參數(shù)與rest參數(shù)默認(rèn)參數(shù)rest參數(shù)3.4默認(rèn)參數(shù)與rest參數(shù)JavaScript函數(shù)存在一個特點(diǎn)，即無論在函數(shù)中定義了多少個形參，都可傳入任意數(shù)量的參數(shù)，當(dāng)無參數(shù)傳入時，則可以為其指定一個默認(rèn)參數(shù)。下面對ES5中的模擬默認(rèn)參數(shù)和ES6中的默認(rèn)參數(shù)進(jìn)行介紹。1.ES5中模擬默認(rèn)參數(shù)在ES5中，沒有直接在函數(shù)參數(shù)列表中設(shè)置默認(rèn)值的語法，如果想為函數(shù)參數(shù)設(shè)置默認(rèn)值，需要使用短路運(yùn)算符來模擬。3.4.1

默認(rèn)參數(shù)3.4默認(rèn)參數(shù)與rest參數(shù)1.ES5中模擬默認(rèn)參數(shù)3.4.1

默認(rèn)參數(shù)unctionmakeRequest(url,timeout,callback){timeout=timeout||2000;callback=callback||function(){};console.log(url,timeout,callback);}makeRequest()//輸出結(jié)果：undefined2000?(){}例3-7左側(cè)代碼中，timeout與callback為可選參數(shù)，若不為其傳入對應(yīng)的參數(shù)，系統(tǒng)會借助“邏輯或”操作符的短路運(yùn)算為它們賦予一個默認(rèn)值。對于函數(shù)的命名參數(shù)url，若不為其傳入對應(yīng)的參數(shù)，且未使用短路運(yùn)算為其設(shè)置默認(rèn)值，則系統(tǒng)默認(rèn)其值為undefined。3.4默認(rèn)參數(shù)與rest參數(shù)2.ES6中的默認(rèn)參數(shù)在ES6中，可以為任意參數(shù)指定默認(rèn)值，在已指定默認(rèn)值的參數(shù)后，可以繼續(xù)聲明無默認(rèn)值的參數(shù)。3.4.1

默認(rèn)參數(shù)functionmakeRequest(url,timeout=2000,callback){console.log(url,timeout,callback);}//使用url和timeout的默認(rèn)值makeRequest()//輸出結(jié)果：undefined2000?(){}左側(cè)代碼中，當(dāng)形參timeout未接收到參數(shù)傳入值或參數(shù)傳入值為undefined時，函數(shù)才使用timeout的默認(rèn)值。需要注意的是，null是一個合法值，函數(shù)形參接收的參數(shù)傳入值為null時，不使用默認(rèn)值。3.4默認(rèn)參數(shù)與rest參數(shù)1.arguments對象JavaScript允許開發(fā)者聲明任意數(shù)量的形參，可以傳入任意數(shù)量的實(shí)參，并提供了arguments對象接收傳入的所有實(shí)參。使用arguments對象獲取函數(shù)傳入的實(shí)參時存在以下不足之處。（1）arguments對象要求讀者獲悉該函數(shù)可接收任意數(shù)量參數(shù)的事實(shí)。（2）遍歷arguments對象時應(yīng)避開第一個參數(shù)，因?yàn)榈谝粋€參數(shù)已被命名參數(shù)占用，因此要從索引為1處開始遍歷。（3）arguments獲取實(shí)參后會返回一個偽數(shù)組，該偽數(shù)組不可調(diào)用數(shù)組方法，數(shù)據(jù)處理效率較低。3.4.2

rest參數(shù)3.4默認(rèn)參數(shù)與rest參數(shù)2.rest參數(shù)的語法格式ES6為彌補(bǔ)arguments對象的不足引入了不定參數(shù)（RestParameters，簡稱rest參數(shù)）。在函數(shù)的命名參數(shù)前添加3個點(diǎn)（···）即可定義一個rest參數(shù)，該參數(shù)是一個數(shù)組，包含自它之后傳入的所有參數(shù)，使用該命名參數(shù)即可逐一訪問里面的參數(shù)。與arguments不同，rest參數(shù)可調(diào)用JavaScript的數(shù)組方法。function(op,...data){}左側(cè)代碼中，每個函數(shù)僅可聲明唯一的rest參數(shù)，且該rest參數(shù)必須是函數(shù)參數(shù)列表的最后一個參數(shù)。3.4.2

rest參數(shù)<script>functionfourOpt(op,...data){if(op==="+"){letresult=0;for(leti=0;i<data.length;i++){result+=data[i];}console.log(result);}例3-73.2

塊作用域構(gòu)造let與const3.rest參數(shù)示例：用rest參數(shù)設(shè)計一個一則運(yùn)算函數(shù)。elseif(op==="-"){letresult=0;for(leti=0;i<data.length;i++){result-=data[i];}console.log(result);}}fourOpt("-",1,2,3,4,5)</script>左側(cè)代碼中，向fourOpt()函數(shù)傳入了6個實(shí)參，其中“+”字符串傳入命名參數(shù)op中，其余參數(shù)均傳入rest參數(shù)data中。計算器經(jīng)由data獲取到所有需要計算的數(shù)據(jù)，并根據(jù)op操作符判斷進(jìn)行加法運(yùn)算或減法運(yùn)算。在瀏覽器中運(yùn)行上述代碼，控制臺渲染結(jié)果為15。3.4.2

rest參數(shù)3.5展開運(yùn)算符函數(shù)調(diào)用與展開運(yùn)算符數(shù)組與展開運(yùn)算符對象與展開運(yùn)算符3.5展開運(yùn)算符在ES6的所有新增功能中，展開運(yùn)算符（SpreadOperator，也稱為擴(kuò)展運(yùn)算符）與rest參數(shù)在語法上最為相似，它們的聲明方式均是3個點(diǎn)（···）。展開運(yùn)算符可將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列，即“展開”一個數(shù)組使其變?yōu)槎鄠€元素，也可取出對象的所有可遍歷屬性，而rest參數(shù)則會收集多個各自獨(dú)立的元素并將其“壓縮”成一個偽數(shù)組。引言//ES5中調(diào)用Math.max()functiontest(){letarr=[1,2,3,4,5];console.log(Math.max.apply(Math,arr))}test();//輸出結(jié)果：5//ES6中調(diào)用Math.max()functiontest2(){letarr=[1,2,3,4,5];console.log(Math.max(...arr))}test2();//輸出結(jié)果：5例3-81.函數(shù)調(diào)用與展開運(yùn)算符在函數(shù)調(diào)用中使用展開運(yùn)算符，可將數(shù)組中的全部數(shù)據(jù)作為實(shí)參傳入函數(shù)中。左側(cè)代碼中，Math.max()方法可接受任意數(shù)量的參數(shù)并返回最大值，但該方法不允許傳入數(shù)組。在ES5中，需要手動遍歷數(shù)組取值或使用apply()方法將數(shù)組轉(zhuǎn)換成偽數(shù)組，該方法代碼理解性較差。在ES6中，向Math.max()方法傳入數(shù)組，并在數(shù)組前使用···符號，JavaScript引擎會自動將數(shù)組轉(zhuǎn)換為獨(dú)立的參數(shù)并逐一傳入Math.max()方法內(nèi)，實(shí)現(xiàn)參數(shù)的批量與高效傳遞。3.5展開運(yùn)算符//展開運(yùn)算符實(shí)現(xiàn)數(shù)組的深拷貝letarr1=[1,2,3,4,5];letarr2=arr1;//淺拷貝letarr3=[...arr1];//深拷貝arr1[0]=6;console.log("arr2："+arr2);//輸出結(jié)果:arr2：6,2,3,4,5console.log("arr3："+arr3);//輸出結(jié)果:arr3：1,2,3,4,5例3-92.數(shù)組與展開運(yùn)算符（1）復(fù)制數(shù)組。在數(shù)組中使用展開運(yùn)算符可實(shí)現(xiàn)數(shù)組的深拷貝。左側(cè)代碼中，使用展開運(yùn)算符實(shí)現(xiàn)了數(shù)組的快速復(fù)制，這種復(fù)制方式實(shí)現(xiàn)了數(shù)組的深拷貝，即使改變原數(shù)組的值也不會影響新數(shù)組。3.5展開運(yùn)算符2.數(shù)組與展開運(yùn)算符（2）合并數(shù)組展開運(yùn)算符可實(shí)現(xiàn)數(shù)組的快速合并。左側(cè)代碼中，利用展開運(yùn)算符將數(shù)組array1、array2合并于數(shù)組array3中，實(shí)現(xiàn)了數(shù)組的快速合并。3.5展開運(yùn)算符letarray1=['北京','上海'];letarray2=['廣東','深圳','成都'];letarray3=['杭州','南京',...array1];//直接合并array3.push(...array2);//push()方法合并console.log(array3);//輸出結(jié)果:['杭州','南京','北京','上海','廣東','深圳','成都']letstrawberry={name:'紅顏草莓',point:'果形大',sweetness:'15%'};letstrawberryPrice={...strawberry,unitPrice:35.5};console.log(strawberryPrice);//輸出結(jié)果:{name:"紅顏草莓",point:"果形大",sweetness:"15%",unitPrice:35.5}3.對象與展開運(yùn)算符展開運(yùn)算符還可用于取出對象的所有可遍歷屬性，并將其復(fù)制于當(dāng)前對象中。上方代碼中，利用展開運(yùn)算符將數(shù)組array1、array2合并于數(shù)組array3中，實(shí)現(xiàn)了數(shù)組的快速合并。3.5展開運(yùn)算符例3-103.6解構(gòu)賦值解構(gòu)的必要性對象解構(gòu)數(shù)組解構(gòu)3.6解構(gòu)賦值在編碼過程中經(jīng)常需要聲明大量的對象和數(shù)組，并有組織地從中提取數(shù)據(jù)。ES6新增了可簡化這種任務(wù)的特性，即解構(gòu)（Destructuring）。解構(gòu)允許按照一定模式，從數(shù)組或?qū)ο笾刑崛≈祷驅(qū)ψ兞窟M(jìn)行賦值。引言3.6解構(gòu)賦值在ES5中，從數(shù)組或?qū)ο笾刑崛≈付〝?shù)據(jù)并賦值給變量需要大量的同質(zhì)化代碼。3.6.1

解構(gòu)的必要性letuser={username:'張明明',identify:'vip',favorable:'99%'};letname=user.username;letid=user.identify;console.log(name,id);//輸出結(jié)果：張明明vip左側(cè)代碼中，從對象user中提取了username和identify的值并分別將其存儲為變量name和變量id，高度同質(zhì)化的數(shù)據(jù)提取，造成了代碼的冗余。當(dāng)目標(biāo)對象的數(shù)據(jù)結(jié)構(gòu)復(fù)雜，提取的數(shù)據(jù)量較大時，不建議使用該方法。例3-113.6解構(gòu)賦值對象解構(gòu)的語法形式是在一個賦值操作符的左側(cè)放置一個對象字面量。1.對象解構(gòu)的基本用法（1）在解構(gòu)對象時，等號左側(cè)的變量與其右側(cè)對象的屬性必須同名，才可取到正確的值。對象的屬性沒有次序，變量順序與屬性順序無需保持一致。3.6.2

對象解構(gòu)letmsg={foo:'aaa',bar:'bbb'}let{foo,bar}=msg;//對象解構(gòu)console.log(foo,bar);//輸出結(jié)果:"aaa,bbb"左側(cè)代碼中，msg.foo的值被保存至名為foo的本地變量中，msg.bar的值被保存至名為bar的本地變量中。需要注意的是，使用var、let、const命令聲明變量必須提供初始化程序，也就是等號右側(cè)的值。3.6解構(gòu)賦值1.對象解構(gòu)的基本用法（2）當(dāng)?shù)忍栕髠?cè)的變量沒有對應(yīng)的同名屬性時，對象解構(gòu)失敗，變量獲取不到值，則變量的值為undefined。3.6.2

對象解構(gòu)letmsg={foo:'aaa',bar:'bbb'}let{baz}=msg;console.log(baz);//輸出結(jié)果:undefined左側(cè)代碼中，等號右側(cè)的對象內(nèi)無baz屬性，變量baz取不到對應(yīng)屬性值，因此baz的值為undefined。3.6解構(gòu)賦值2.對象解構(gòu)賦值至此，已實(shí)現(xiàn)對象解構(gòu)與變量聲明的組合使用，接下來將介紹如何在為變量賦值時使用解構(gòu)語法。在已聲明變量的前提下，使用解構(gòu)賦值語法修改變量值，需要使用圓括號包裹整個解構(gòu)賦值語句，語法格式如下所示。3.6.2

對象解構(gòu)({變量1,變量2}=對象1);3.6解構(gòu)賦值2.對象解構(gòu)賦值以商品信息為主題，使用解構(gòu)語法實(shí)現(xiàn)多個變量的賦值。//聲明對象letapple={weight:'200g',sweet:'5%'};//聲明變量letweight='0',sweet='0%';console.log(weight,sweet);//輸出結(jié)果:'00%'//為已聲明的變量賦值，即修改變量的值({weight,sweet}=apple);console.log(weight,sweet);//輸出結(jié)果:'200g5%'左側(cè)代碼中，聲明了對象apple與變量weight、sweet，在聲明變量weight、sweet時對其進(jìn)行了初始化賦值。在此情況下，可使用解構(gòu)賦值語法從apple對象中讀取對應(yīng)的屬性值，并重新為變量weight、sweet賦值，實(shí)現(xiàn)變量值的批量修改。例3-123.6.2

對象解構(gòu)3.6解構(gòu)賦值3.對象解構(gòu)的默認(rèn)值在對象解構(gòu)中，當(dāng)指定的本地變量名稱在對象中不存在時，則該本地變量的值會被賦值為undefined，具體案例可參考對象解構(gòu)的基本語法中對象解構(gòu)失敗演示。在此類情況下，讀者可考慮為該本地變量定義一個默認(rèn)值，即在變量后添加一個等號（=）和相應(yīng)的默認(rèn)值。3.6.2

對象解構(gòu)3.6解構(gòu)賦值3.對象解構(gòu)的默認(rèn)值接下來將演示對象解構(gòu)的默認(rèn)值設(shè)置，示例代碼如下。左側(cè)代碼中，設(shè)置變量baz的默認(rèn)值為hello，當(dāng)msg對象中無該屬性或該屬性值為undefined時，默認(rèn)值生效。letmsg={foo:'aaa',bar:'bbb'};let{baz='hello'}=msg;console.log(baz);//輸出結(jié)果:'hello'3.6.2

對象解構(gòu)3.6解構(gòu)賦值1.數(shù)組解構(gòu)的基本語法數(shù)組解構(gòu)依賴于數(shù)組字面量（[]），解構(gòu)操作在數(shù)組內(nèi)進(jìn)行。在解構(gòu)數(shù)組時，變量值是根據(jù)數(shù)組中元素的順序進(jìn)行獲取的。數(shù)組解構(gòu)的語法格式如下所示。3.6.3

數(shù)組解構(gòu)let對象=[元素1,元素2,元素3];let[變量1,變量2,變量3]=對象;console.log(變量1,變量2,變量3);//輸出結(jié)果:"元素1,元素2,元素3"3.6解構(gòu)賦值1.數(shù)組解構(gòu)的基本語法需要注意的是，數(shù)組解構(gòu)與對象解構(gòu)類似的是，使用var、let、const命令聲明數(shù)組解構(gòu)的綁定時，必須為其提供初始化程序。與對象解構(gòu)不同的是，在數(shù)組解構(gòu)語法中，變量與數(shù)組中的值會進(jìn)行位置匹配，數(shù)組對應(yīng)位置的值會被存儲至變量中。數(shù)組中的元素若不存在與其匹配的顯式變量時，該元素會被直接忽略。3.6.3

數(shù)組解構(gòu)3.6解構(gòu)賦值2.數(shù)組的不完全解構(gòu)數(shù)組的不完全解構(gòu)即忽略數(shù)組中的部分元素，只為部分元素提供變量名。3.6.3

數(shù)組解構(gòu)//聲明對象letapple={weight:'200g',sweet:'5%'};//聲明變量letweight='0',sweet='0%';console.log(weight,sweet);//輸出結(jié)果:'00%'//為已聲明的變量賦值，即修改變量的值({weight,sweet}=apple);console.log(weight,sweet);//輸出結(jié)果:'200g5%'例3-13左側(cè)代碼中