現(xiàn)代JavaScript：ES6+中的ImportsExportsLetConst和Promise講義

在過去幾年里，JavaScript有很多的更新。如果你想提升寫代碼的能力，這些更新將會對你有非常大的幫助。對于程序員來說，了解這門語言的最新發(fā)展是非常重要的。它能使你跟上最新趨勢，提高代碼質(zhì)量，在工作中出類拔萃，從而進一步提升你的薪資待遇。特別地，如果你想學(xué)習(xí)像React、Angular或Vue這樣的框架，你必須掌握這些最新的特性。最近，JavaScript增加了許多有用的功能，Nullishcoalescingoperator,optionalchaining.Promises,async/await,ES6destructuring,等等。那么現(xiàn)在，我們將探討每個JavaScript開發(fā)者都應(yīng)該知道的概念。JavaScript中的Let和const在ES6之前，JavaScript使用var關(guān)鍵字來聲明變量，var只有全局作用域和函數(shù)作用域，所謂全局作用域就是在代碼的任何位置都能訪問var聲明的變量，而函數(shù)作用域在變量聲明的當(dāng)前函數(shù)內(nèi)部訪問變量。此時是沒有塊級作用域的。隨著let和const這兩個關(guān)鍵字的添加，JS增加了塊級作用域的概念。如何在JavaScript中使用let當(dāng)我們在用let聲明變量時，用于聲明一次之后就不能再以相同的名稱重新聲明它。//ESSCodevavvalue=工。con$oledog(value);//tovarvalue="hell。";consote.log(value);//hellovarvalue=30;console.log^alue);//30如上所示，我們多次使用var關(guān)鍵字重新聲明了變量值。在ES6之前，我們可以使用var重新聲明之前已經(jīng)聲明過的變量，這就會導(dǎo)致了一個問題：如果我們在不知情的情況下，在其他地方重新聲明了該變量，很有可能會覆蓋原先變量的值，造成一些難以調(diào)試的問題。所以，Let解決很好地解決此問題。當(dāng)你使用let重新聲明變量值時，將會報錯。//ES6Codeletvalue=console.log(valbie);//t-Oletvalue=,lMlou;//UMauglatSyiataxError:Identifier'value'hasalreadybeendeclared但是，以下代碼是合法的：//ES6Codeletvalue=XO,comole.log^alue),//工。value="hello";co^ole.logCvalue),//hello我們發(fā)現(xiàn)上面的代碼看起來沒什么問題，是因為我們重新給value變量賦了一個新值，但是并沒有重新聲明。我們來看下下面的代碼：//ES5Codevari$Valid=true;if(i^Valid){var =W;consoleJog。inside:',nuFwfeer);//inside：IO}co^ole.log('outride：1j八ukube。//outside:XO如上所示，在使用var聲明變量時，可以在if塊之外訪問該變量。而使用let聲明的number變量只能在if塊內(nèi)訪問，如果在if塊外訪問將會報錯。我們來看下接下來的代碼//ES6Codeletinvalid=true;if(i$Valid){let^.ui^ber-W;console.logCinsi-nukwber);//inside：XO^oiasole.logCoutside:1jnumber);//UncaughtReferenceError：nukvxfeerisMtdefied如上述代碼所示，使用let分別在if塊內(nèi)、if塊外聲明了number變量。在if塊外，number無法被訪問，因此會出現(xiàn)引用錯誤。但是，如果變量number在if塊外已經(jīng)聲明，將會出現(xiàn)下面的結(jié)果。//ES6CodeletisValid=truejetnuwfeer=20;if(isValid){let八"Mber=W;co八soleJog。inside:',n.uFv\ber);//Mside：IO}console.logCoutside:1,nunAber);//outside：2.0現(xiàn)在在單獨的范圍內(nèi)有兩個number變量。在if塊外，number的值為20。//ES5 i=。；i<工。i++){consote.log(i);ycoi^sole.logCoutside：'ji);//XO當(dāng)使用var關(guān)鍵字時，i在for循環(huán)之外也可以訪問至ij。//ES6Codefor(leti-O;i<20;i++){console.log(i);console.logCoutside:',i);//UncaughtReferenceError：iisnotdefined而使用let關(guān)鍵字時，在for循環(huán)外部是不可訪問的。因此，正如上述示例代碼所示，let聲明的變量只能在塊內(nèi)部可用，而在塊外部不可訪問。我們可以使用一對大括號創(chuàng)建一個塊，如下:leti=leti=20;console.logCinside：1,i);//inside：2.0=3(9;con$ole>.log('iagaiiai'ji);//iagain:"50]console.logCoutside:1ji);//outside：IO前面有提到，let在同一個塊中不能重新聲明變量，不過可以在另一個塊中重新聲明。如上代碼所示，我們在塊內(nèi)重新聲明了i,并賦值20,該變量僅可在該塊中使用。在塊外，當(dāng)我們打印變量時，我們得到的是10而不是之前分配的值，這是因為塊外，內(nèi)部變變量i是不存在的。如果在塊外未聲明變量，那么將會報錯：(leti=26code.logC沁i-i);//inside：2.0i=3(2;console.logCiagain:1,i);//iagai^:"50}co^oledogCoutside:',i);//UncaugktReferenceError:iisnotdefined如何在JavaScript使用constconst關(guān)鍵字在塊級作用域中的工作方式與let關(guān)鍵字完全相同。因此，我們來看下他們的區(qū)別。const聲明的變量為常量，其值是不能改變的。而let聲明的變量，可以為其賦一個新值，如下所示：letnumber-工。;八〃叱區(qū)匕=2。conso/e./ogSuMber);//2.0但是以下情況，我們不能這樣使用constoconstnumber=Wjnuwfaer=2-0,//UMaughtTypeError:Assigi^^enttoconstantvariable.我們甚至不能使用const像下面一樣重新聲明。constnukvxber=20;console.log(^ui^ber);//2.0consttaukv\ber=IO;//UMaugktSyiataxError：Identifier^lA^ber1kasalreadybeendeclared現(xiàn)在，看下面的代碼：constarr=[t,2,3,4];八so/e./ogS");//[1,2,3,4,5]我們說過const聲明的常量，它的值永遠不會改變——但是我們改變了上面的常量數(shù)組并沒有報錯。這是為什么呢？注意:數(shù)組是引用類型，而不是JavaScript的基本類型實際存儲在arr中的不是數(shù)組，而是數(shù)組存儲的內(nèi)存位置的引用(地址)。執(zhí)行arr.push(5),并沒有改變arr指向的引用，而是改變了存儲在那個引用上的值。對象也是如此：constobj-{'David1age："50obj.age=4。；console.log(obj);//(laakvxe:'David'fage：40)這里，我們也沒有改變。bj指向的引用，而是改變了存儲在引用的值。因此，上述的代碼將會起作用，但下面的代碼是無效的。constobj={'Davidsage：30};constobj工={0。叱：age:40};obj=。句工；//UMaughtTypeError.Assignmenttocoiastai^tvariable.這樣寫會拋出異常，因為我們試圖更改const變量指向的引用。因此，在使用const時要記住一點：使用const聲明常量時，不能重新聲明，也不能重新賦值。如果聲明的常量是引用類型，我們可以更改存儲在引用的值。同理，下面的代碼也是無效的。const=口,2, 4];=[IO,20,50];//UncaughtTypeError:Assynwenttoconstantvariable.總結(jié)：關(guān)鍵字let和const在JavaScript中添加塊級作用域。當(dāng)我們將一個變量聲明為let時，我們不能在同一作用域（函數(shù)或塊級作用域）中重新定義或重新聲明另一個具有相同名稱的let變量，但是我們可以重新賦值。當(dāng)我們將一個變量聲明為const時，我們不能在同一作用域（函數(shù)或塊級作用域）中重新定義或重新聲明具有相同名稱的另一個const變量。但是，如果變量是引用類型（如數(shù)組或?qū)ο螅覀兛梢愿拇鎯υ谠撟兞恐械闹?。好了，我們繼續(xù)下一個話題：promises。JavaScript中的promises對于很多新開發(fā)者來說，promises是JavaScript中較難理解的部分。ES6中原生提供了Promise對象，那么Promise究竟是什么呢？Promise對象代表了未來將要發(fā)生的事件，用來傳遞異步操作的消息。如何創(chuàng)造一個promise使用promise構(gòu)造函數(shù)創(chuàng)建一個promise,如下所示：constpromise=newPro^v\ise（functioi^（re^olve,reject）{}）；Promise的構(gòu)造函數(shù)接收一個函數(shù)作為參數(shù)，并且在內(nèi)部接收兩個參數(shù)：resolve,rejectoreserve和reject參數(shù)實際上是我們可以調(diào)用的函數(shù)，具體取決于異步操作的結(jié)果。Promise有三種狀態(tài)：pending:初始狀態(tài)，不是成功或失敗狀態(tài)。fulfilled:表示操作成功完成。rejected:表示操作失敗。當(dāng)我們創(chuàng)建Promise時，它處于等待的狀態(tài)。當(dāng)我們調(diào)用resolve函數(shù)時，它將進入已完成狀態(tài)。如果調(diào)用reject,他將進入被拒絕狀態(tài)。在下面的代碼中，我們執(zhí)行了一個異步操作，也就是setTimeout,2秒后，調(diào)用resolve方法。constpromise=ncwPro^v\ise(furesolve>reject){constsum=4+5;resolve(suw)；}>2.OOO);));我們需要使用以下方法注冊一個回調(diào).then獲得lpromise執(zhí)行成功的結(jié)果，如下所示:constprokvu'se=mvj 八ct7。八reject){setTikv\eout(fuMtion(){constSUkvv=4+5;res。/砥s〃叫；b2000);})；prow/se.theH(function(result){con$ole.log(result);//q!)；then接收一個參數(shù)，是函數(shù)，并且會拿到我們在promise中調(diào)用resolve時傳的的參數(shù)。如果操作不成功，則調(diào)用reject函數(shù)：constprokvu'se=newPr0kvuMe(f〃八ct7。八(resolve,reject){setTikv\eout(f(AnctionO{constsukvv=4+S+W;rejectCErrorwklecalculatingsuha/);}eke(reso/vefsuw);}卜2000);))；promise.tken(function(result){console.log(result);1)；如果sum不是一個數(shù)字，那么我們調(diào)用帶有錯誤信息的reject函數(shù)，否則我們調(diào)用resolve函數(shù)。執(zhí)行上述代碼，輸出如下：G0DvnaroConaoie8MoMMatwortiPartornwwMemory S?xr?y Redui?iO：X咆0 10P ?? OalBUt, 2Bdvs。>48，tprcaiw?*?*?Fr?Biw(funttresolw,eject)<c?Mt1?，?$?*a*irtjectCt?r?r?*itoc*l<?Ut??0.*>s>?Im<>HlfwMt<coamU.U9lrewlt13>h9 (in.rw2)frrertAiWcalcvlatiavwb? ntrtAfr-Mtt/xl?調(diào)用reject函數(shù)會拋出一個錯誤，但是我們沒有添加用于捕獲錯誤的代碼。需要調(diào)用catch方法指定的回調(diào)函數(shù)來捕獲并處理這個錯誤。prokv\/$e.theH(funct/o^(resu(t){console.log(result);}).catck(Fc<nction(error){console.log(erroir);})；輸出如下:Gj]EtonartsConaoi*SourcmNMwcrtiPvlornwK*MamoryAopacationSecurwyUgMhouMRadha 0 ：X囪0top *G>Gar DataJi? 1Miar。?const ?newRtobimIf??Ktlo?(rVMlv*. tCOA?t3?4?3????：iSWMMd)<r*)?ct(*trr?rwhitecalcvUt><)/????;>H3sl?.U?(rvwtthM>C4t<h(fuA<tief?(?rf?f)(COOMU.>h?FroMMtr*?r?MltstcvlatSw*??I所以建議大家在使用promise時加上catch方法，以此來避免程序因錯誤而停止運行。鏈?zhǔn)讲僮魑覀兛梢韵騿蝹€promise添加多個then方法，如下所示：proi^ise.tkek\(fuMtioia(result){c。八sole.log('fidt.theiahandler1);returnresult;}).tkeia(f(AMtiok\(result){console.logCsecoiad.the八k〃八d/eL);consoIe.Iog(result);}).c?tch(fuiact/OH(error){console.log(error);!)；

當(dāng)添加多個then方法時，前一個then方法的返回值將自動傳遞給下一個then方法。Rfl MemoryA^tcaaonS?M?yUgr*ouMRM*囿0 8 ■ .Htar DaMlwaM.?c8ttprtBtM?new^ro>l*?(fu*ctloe(rvMlv*.reject)<<8，，tW?4?>；rcj?<t(*trr?rtAiUc?lcuUtififwa.>?lw<prwiM.tMn<fwA<ir?wlt)<.Q2MMWr*)2retuemwlt;>).thM(ftrfICtio?<r??vltI<C??MU.<?<<dh?Mter*)；c?MMl?.(ov(r*wUh>).catcB(fufictiofl(?rrer)<?l?FrMJMmuaujWUUiUwoiaa;muaujWUUiUwoiaa;WCOM.?M?MMUr如上圖所示,我們在第一個then方法中輸出字符串，并將接收的參數(shù)result(sum)返回給下一個resulto在下一個then方法中，輸出字符串，并輸出上一個then方法傳遞給它的result。如何在JavaScript中延遲promise的執(zhí)行很多時候，我們不希望立即創(chuàng)建promise,而是希望在某個操作完成后再創(chuàng)建。我們可以將promise封裝在一個函數(shù)中，然后從函數(shù)中返回promise,如下所示：fuiactioncreateProFvu'seO{returnnewPr*0kvu'se(fu八ct7。八(resolve,reject){setTYkweoat(Function。{constsum=4+5;if(isN〃N(S”Fvk)){re.je.ct('Errorwhilecalculatesum.，}else(resolve(sum);}1,2.000);1);)這樣，我們就可以通過函數(shù)將參數(shù)傳遞給promise,達到動態(tài)的目的。functioncreate?b){returnnewPromise(fun.ct/o^(resol\/eJreject){setTimeout(fu^ctio^(){coastsum=a+b;if(isNaZ(s〃m))(rejectCErrorwki他calculatingsum?);}else{resolve(sum);1bZOOO);1);)

crenteProkvu'se(工8)console.log(output);//91)；//OR"eatePr0Fvu'se(f24).then(functio^(output){console.Iog(output);//34QflEWwtaCcnaoi*Scx?omNrtwortiPvlomwK*MemoryA9pteMOA9ao#?rUfiT*<ouwAadus QflEWwtaCcnaoi*Scx?omNrtwortiPvlomwK*MemoryA9pteMOA9ao#?rUfiT*<ouwAadus 。|X>fuMttMerf■，《?<???)<Eve0 r?)?Ct>(?etTiaeowtlfiiACti?R<)<c?Htua???b：r?)ect(*KrrorwhileC?l<Ml?tM*9M*.*)|>?lw<>>.”M);H:>c te，*aI”<8??).thc?(f?MKtlon(??tRlt?<cmmU.Uglwtput);//9crMtc^roaiMlie.HIC??t4U.lMl?vt9ut)://34>h?FnwiM? tftUUMM MU4U1此外，我們只能向resolve或reject函數(shù)傳遞一個值。如果你想傳遞多個值到resolve函數(shù)，可以將它作為一個對象傳遞，如下：constpromise=newProkv\ise(functioi^(resolveJreject){setTikv\eo(At(functioi^O{constsuha=4+5;%soHe({4j5,suha.})；}>zooo)；));prom/sefav\ctio^(r6^ult){console,fo3frescxlt);}).catch(fui^ction(error){co^ole.log(error);})；孱(J]BvmntsOomotoSoucmNaeworHf**rtormano?MemoryAppicafaonS?u?fUqWioumRadui 。：X00top ■?F?v DetaJtiMiv 2M01rQ>co*?Hprg*i?9-fFraaiMtlunct>??< <MtTkaeotfttftfhctkMO<co*it*■>4?5jr*Mlw(<?:%fc!九MB?S>.hiIHoam.1????(fw?Ktion(result?<coitv?lc4104Irrt?ltJ：I8l”er>(con?lc.lO9(?rr??rH?：*f?r，65.Mif| ?2t);U>I如何在JavaScript中使用箭頭函數(shù)上述示例代碼中，我們使用常規(guī)的ES5語法創(chuàng)建了promise。但是，通常使用箭頭函數(shù)代替ES5語法，如下:constpromise=mvj reject)=>{setTikv\eout(0=>{constsum=4+5+'a1;if(isN〃N(su叫){rejectCErrorwhilecalculatingsuw/);}else(resolve(sunA);}上2000);!)；promise.the八((res〃/t)=>{console.log(result);!)；你可以根據(jù)自己需要使用ES5或ES6語法。ES6Import和Export語法在ES6之前，我們在一個HTML文件中可以使用多個script標(biāo)簽來引用不同的JavaScript文件，如下所示：scripttype-"text/javascript1$rc=,,kokv\e.js,,x/$cript><scripttype-ute)ct/javascnpt"we="psfileJScHptxscHpttype-"text/javascript11src="〃serjs">〈/scr7P亡》但是如果我們在不同的JavaScript文件中有一個同名的變量，將會出現(xiàn)命名沖突,你實際得到的可能并不是你期望的值。ES6增加了模塊的概念來解決這個問題。在ES6中，我們編寫的每一個JavaScript文件都被稱為模塊。我們在每個文件中聲明的變量和函數(shù)不能用于其他文件，除非我們將它們從該文件中導(dǎo)出并、在另一個文件中得到引用。因此，在文件中定義的函數(shù)和變量是每個文件私有的，在導(dǎo)出它們之前，不能在文件外部訪問它們。export有兩種類型：?命名導(dǎo)出:在一個文件中可以有多個命名導(dǎo)出?默認(rèn)導(dǎo)出:單個文件中只能有一個默認(rèn)導(dǎo)出JavaScript中的命名導(dǎo)出如下所示，將單個變量命名導(dǎo)出：exportconstte^v\p="Thisisdu339text11,如果想導(dǎo)出多個變量，可以使用大括號指定要輸出的一組變量。constte.iAA,p2.="Thisissomcdukwkuyconst =11Thisissokvvedukv\i^ytextZ"export{ tei^v\p2.);需要注意的是，導(dǎo)出語法不是對象語法。因此，在ES6中，不能使用鍵值對的形式導(dǎo)出。</pre>//ThisisinvalidsyntaxofexportMES6export{keyl：valued,key2：valued}import命令接受一對大括號，里面指定要從其他模塊導(dǎo)入的變量名import{tenApl,teMp2)froku'./filename1;注意，不需要在文件名中添加Js擴展名，因為默認(rèn)情況下會考慮該拓展名。//importFkomafu八ctions.jsfileF/okwcurrentdirectoryimport{ tap2)froFw'./fu八c力'。八s';//importfroMfu八ctions.jsfilefrokv\parentofcurrentdirectoryimport{tempi}frokvx,../fmactioi^1;提示一點，導(dǎo)入的變量名必須與被導(dǎo)入模塊對外接口的名稱相同。因此，導(dǎo)出應(yīng)使用：//con$tant$.jsexportconstPI=3.14159;那么在導(dǎo)入的時候，必須使用與導(dǎo)出時相同的名稱：import{PI} '/constMts';//Thiswillthrowanerrorimport{PiValue}frona\/constants1;如果想為輸入的變量重新命名，可以使用as關(guān)鍵字，語法如下：import{PtasPiValue}frow'./constants';我們以為PI重命名為PiValue,因此不能再使用PI變量名。導(dǎo)出時也可使用下面的重命名語法://constantsjsconstPI=3.14159;export{PIasPIValue);然后在導(dǎo)入是，必須使用PIValue。import{PIValue}frow'./constn八ts';命名導(dǎo)出某些內(nèi)容之前必須先聲明它。export'hello1;//thiswillresultMerrorexportconstgreeting='hello1;//thiswillworkexport{八amc:'David1};//ThiswillresultMerrorexportconstobject={nakvte：'David*};//Thiswillwork我們來看下面的validations.js文件：//utils/validatio^s.jsconstisValidEi^ail=function(ekv\ail){if(/八［八@］+@［人@J+\.［人@\.］{2 {return"eMailisvalid”;}eke(return"ei^ailisinvalid”;

consti^ValidPkoM=functio^(phoM)(return}ekereturn"phoiaeHUhAfaerisinvalid";returnfunctionisEkv^pty(value){functionisEkv^pty(value){if(/八W.test(v4/ue))(return"stHngise叫元gorcontainon/yspaces";}eke(return"stirMgisnotenaptyanddoeslaotc。八t〃，八spaces";]}export{isValidEmaiLisValidPho八e,isEmptg);在index.js中，我們可以使用如下函數(shù)：//index.jsimport{isEmptg,isValidEMail}firoM"./util^/validatioy^";c。八sole.logC'isEMptg:",i^Ekv\pty(uabcd"));//isEi^pty：strMgisnote^ptya^ddoes八。七containspacesccmsole.logC'kValiclEMail:",isValidEi^ail(,,abc^lt.gi^.ail.co^v\,,y)://isValidEmail:Ckvxailisvalidco^o(e.log(,lisValidE^ail:ujisValidEi^ailC'ab^c^Xlg^ail.co^y);//isValidEMail：ekvxailisinvalidJavaScript的默認(rèn)導(dǎo)出如上所述，單個文件中最多只能有一個默認(rèn)導(dǎo)出。但是，你可以在一個文件中使用多個命名導(dǎo)出和一個默認(rèn)導(dǎo)出。要聲明一個默認(rèn)導(dǎo)出，我們需要使用以下語法:const八〃kv\e='David1;exportdefault八〃Rue;在導(dǎo)入時就不需要再使用花括號了。importna^vxefrow/constants1;如下，我們有多個命名導(dǎo)出和一個默認(rèn)導(dǎo)出://constantsjsexportconstPI=3.141^47;exportconstAGE=30;constNAME="David";exportdefaultNAME;此時我們使用import導(dǎo)入時，只需要在大括號之前指定默認(rèn)導(dǎo)出的變量名。//NAMEisdefaultexportav\dPla^dAGEare.v\aw\edexportshereimportNAME,{PI,AGE}frow'./c。八st。八七s';使用exportdefault導(dǎo)出的內(nèi)容，在導(dǎo)入的時候，import后面的名稱可以是任意的。//。。八八tsjsconstAGE=30;exportdefaultAGE;importi^yAge(Yom'./constants’;console.log(i^yAge);//~50另外，exportdefault的變量名稱從Age到myAge之所以可行，是因為只能存在一個exportdefault。因此你可以隨意命名。還需注意的是，關(guān)鍵字不能在聲明變量之前。//constaiats.jsexportdefaultconstAGE=30;//Thisis〃八erroraiadwillnotwork因此，我們需要在單獨的一行使用關(guān)鍵字。//COnStMtsJsconstAGE=exportdefaultAGE;不過以下形式是允許的：〃c。八stantsjsexportdefault{iaakv\e:''Billy",age:40}；并且需要在另一個文件中使用它importuserfrokvv'./constants';console.log(user.nai^e);//Billyc。八so/e」og(，wge);//40還有，可以使用以下語法來導(dǎo)入constants.js文件中導(dǎo)出的所有變量：//test”import*asconstantsfrokvx。/constM切；下面,我們將導(dǎo)入所有我們constants.js存儲在constants變量中的命名和exportdefaulto因此，constants現(xiàn)在將成為對象。//constaiatsjsexportconstUSERNAME-"David";exportdefault{八〃Me:"Billg",age：40在另一個文件中，我們按一下方式使用。//test”import*asconstantsf/OM,./con$tants,;console.Iog(co八貪antS.USERNAME);//Davidco^ole.log(con$ta^ts.default);//{name："Billg1^age:40}co^ole,log(co^tav\t^.default.age);//40也可以使用以下方式組合使用命名導(dǎo)出和默認(rèn)導(dǎo)出：//const^ntsjsconstPI=3.1415句constAGE=36);constUSERNAME="David";constUSER={八akwe：age:401；export{PI,ACE,USERNAME,USERasdefault];importUSERj{PGACE,USERNAME}from"./co八s±m(xù)±s";總而言之：ES6中，一個模塊就是一個獨立的文件，該文件內(nèi)部的所有變量，外部都無法獲取。如果想從外部讀取模塊內(nèi)的某個變量，必須使用export關(guān)鍵字導(dǎo)出該變量，使用import關(guān)鍵字導(dǎo)入該變量。JavaScript中的默認(rèn)參數(shù)ES6增加了一個非常有用的特性，即在定義函數(shù)時提供默認(rèn)參數(shù)。假設(shè)我們有一個應(yīng)用程序，一旦用戶登錄系統(tǒng)，我們將向他們顯示一條歡迎消息,如下所示：function {return"Welcome.back,11+firstA/^kue;)co八S0/e」og(skowMessage(UoW));//Welcomeback,Johia但是，如果數(shù)據(jù)庫中沒有用戶名，那該怎么辦呢?所以，我們首先需要檢查是否提供了firstName,然后再顯示相應(yīng)的信息。在ES6之前，我們必須寫這樣的代碼：functions〃owMessage(fMstNe){if(firstNa^e){return"VJelco^eback,11+firstName;}else(return"We/co*^eback.Guest1;})consoleJog(sko\A/Messag&('Joh^.'))://VJelcoi^eback,J?！ò薱。八sHeJog(skowMessageO);//Welcomeback,Guest但現(xiàn)在使用ES6提供的默認(rèn)參數(shù)，我們可以這樣寫:fuMtio^showMess^efftrstAJ?kwe='Guest'){return"We/cokneback,"+firstName;1co八sole?/og(sh0wMessage('JoW));//Welcomeback,Johiac。八so/e」og(skowMessageO);//Welcomeback,Guest函數(shù)的默認(rèn)參數(shù)可以為任意值。fuHCt/ondisplay(a=b=2.0,c-b){console.Iog(ajb,c);)displagO；//IO2-02。display(4O);//402.020displagj,70);//17070display^,30,70);//13(970在上面的代碼中，我們沒有提供函數(shù)的所有參數(shù)，實際代碼等同于:displayO；//等同于力sp/ag((x八^?行八0/u八defined,〃八deFked)display(4O);等同于d/Mp/a9(4O,uiadefiMdjuiadefiMd)display(lJ70);等同于disp/〃g(，IO.undefined)因此，如果傳遞的參數(shù)是undefined,則對應(yīng)的參數(shù)將使用默認(rèn)值。我們還可以將對象或計算值指定為默認(rèn)值，如下：constdefaultUseir={八ame:UaM^location:'NY,job:'SoftwareDeveloper1)；constdisplay=(user=defaultU^efjage=bO/2)=>{console.logCu^eiTjage);display();/*output八ame：Umc',location:^Y,job:'SoftwareDevdoper1}3(2*/ES5代碼如下：//ES5CodefunctiongetUsers(page,resu/ts,gender,nationality){varparams=

if(page===O||page.){params■>■二params十二、煙〃依二，｛匕s“灼&'；if(gender)params十二、gc八der■二$的end"}&';params十=Vationaf/'ty=^{nat/onality}v;+pa曰ms).fwiactiov\(response){returnrespo八sejson();!).tiAenffunct/onfresult){，。八so/e./og(煙uft);!).catch(fuv\ctioi^(error){co^ole.logCerror1,error);!)；getUsevs。1。,As);在這段代碼中，我們通過在getUsers函數(shù)中傳遞各種可選參數(shù)來進行API調(diào)用。在進行API調(diào)用之前，我們添加了各種if條件來檢查是否添加了參數(shù)，并基于此構(gòu)造查詢字符串，如下所示：https://夕acdoMuser.Me/api/?page=O&res川ts;工。&ge八der=kv\He&八。七'。八使用ES6的默認(rèn)參數(shù)則不必添這么多if條件，如下所示：functiongetUsers(page=O,results=XOtgender=^ale^natioi^ality=ts'){fetchChttps：//iraiadokv\u$er.kv\e/api/?page=^{pageJ&：results=f{result$j&geiader=${gender}&：nationality=${v\atioi^alityy).thenffuk\ct/01^(response){returnresponsejsoh();!).t/ien(funct/on(resu(t){console.Iog(re$ult);!).catck(fuMtioia(eKror){consoledogCerror1,error);!)；)getUsersO；這樣一來，代碼得到了大量的簡化，即便我們不為getUsers函數(shù)提供任何參數(shù)時，它也能采用默認(rèn)值。當(dāng)然，我們也可以傳遞自己的參數(shù)：getUseHS(lj20'female^'gby,它將覆蓋函數(shù)的默認(rèn)參數(shù)。null不等于未定義注意：定義默認(rèn)參數(shù)時，null和undefined是不同的。我們來看下面的代碼：Fuccti。八di$play(nakv\e='David1,age=^>5,location='NY){coyote.Iog(^akv\ejage,location);displayCDavid1jdisplayCDavid1j5S);//David3SNYdisplayCDavid'jUndefined);displayCDavid'jUndefined);//David3SNY//ORdisplayCDavid1j3S,undefined);displayCDavid1j3S,undefined);//David3SNYdisplay(,David,J八川f);//David3S八〃〃當(dāng)我們傳遞null作為參數(shù)時，它實際是給location參數(shù)賦一個空值,與undefined不一樣。所以它不會取默認(rèn)值"NY"。</pre>Atotype.includesES7增加了數(shù)組的includes方法，用來判斷一個數(shù)組是否包含一個指定的值，如果是返回true,否則false。//ESSCodeconstnuknfaers=["om","two","three","four"];coin.sole.log(in.u^v\bers.ir\d.exOf("oin.e.")>-1);//truecoia.sote.log(i^uv>A.bers.indexOf("five")>-1);//false數(shù)組可以使用includes方法://ES7Codeconstnukufaers=["om","two","three","four''];co^sole.log(^ui^bers.i^cludes("oM,,y);//trueconso/e?/ogWukv\Sers.kc/udes("f20a));//fakeincludes方法可以使代碼簡短且易于理解，它也可用于比較不同的值。<prestgle="ice-height:18.Opt;vertical-align:baseliM">constday=11Monday";</pre>if(day===''Monday11||day==="tuesday"||day==="Wednesday)(//dosomething]//以上代碼使用include方法可以簡化如下：constday