思圖前端課程8-ecmascript

1、ES6 課程1 ES61-ES6 是什么ECMAScript6.0（以下簡稱 ES6）是 JavaScript6JavaScriptES6 課程1 ES61-ES6 是什么ECMAScript6.0（以下簡稱 ES6）是 JavaScript6JavaScript1-常用語Parameters（默認(rèn)參數(shù)） initerals（模板文本）inMulti-line Strings （多行字符串）in ES6 Destructuring Assignment （解構(gòu)賦值）in ES6 EnhancedObjectLiterals（增強的對象文本）inES6 Arrow Functions （箭頭函數(shù)

2、）in ES6PromisesinBlock-ScopedConstructsLetandConst（LetandConst） Classes（類） in ES6Modules（模塊） in22-varname=while(true)var name = obama console.log(name) /obama console.log(name) letname=whileconsole.log(name) letname=while(true)let name = obama console.log(name) /obama console.log(name) vara=for(vari

3、=0;i10;i+) ai = function () a6();/vara=for(leti=0;i）varf=v=varES6 允許使用“箭頭”（=）varf=v=varf=function(v) return v;varf=()=varf=function()returnvarsum=(num1,num2)=varsum=function(num1,num2) return num1 + num2;+return(x,y)=x+;y-;returnfunction(x,yy-returnx+報letgetTempItem=id=id:id,name:Temp letgetTempItem

4、=id=(id:id,name:TempletgetTempItem=id=(id:id,name:Templetfn=(i,j)= constfull=,last)+functionfull( )+. class Animal this.type=console.log(this.type+says+say),varanimal=newanimal.says(hi) /undefinedsaysthisselfselfvar self = this; console.log(self.type+says+,console.log(self.type+says+,console.log(thi

5、s.type+says+say)class Animal this.type=setTimeout()=console.log(this.type+says+,var animal = new Animal() animal.says(hi) /animalsayshi當(dāng)thisthis2-模板字符串/變Thereare+basket.count+ items in your basket, +basket.onSale+ are on sale!上面這種寫法相當(dāng)繁瑣不方便，+9Thereare$basket.countinyourbasket,$basket.onSale are on sa

6、le!模板字符串（ZKSVRGZK XO上面這種寫法相當(dāng)繁瑣不方便，+9Thereare$basket.countinyourbasket,$basket.onSale are on sale!模板字符串（ZKSVRGZK XO）是增強版的字符串，用反引號（F）標(biāo)識。它可以當(dāng)普通字InJavaScriptnisaline-多行字Inthisisnot字符串中嵌入letname=Bob,time=o$name,howareyou換行。如果你不想要這個換行，可以使用 XOS 方法消除它 )GYY（類）的基本語 IXOVZ 語言中，生成實例對象的傳統(tǒng)方法是通過構(gòu)造函數(shù)。下面是一個例子function

7、 Po(x,y) this.x = x;this.y=.prototype.toString=function()return(+this.x+,function Po(x,y) this.x = x;this.y=.prototype.toString=function()return(+this.x+,+this.y+varp=new(1,classES6classclassconstructor(x,y) this.x = x; this.y = y;toString()return(+this.x+,+this.y+的ES6classtypeof=class Bar doStuff()

8、varb=newBar(); prototypeES6class Bar doStuff()varb=newBar(); prototypeES6this對象上），否則都是定義在原型上（class上）。classtoString().prototype=toString()classBletb=newb.constructor=bclassprototypeconstructorES5ClassextendsES5classprototypeconstructorES5ClassextendsES5classclassextends類classextendsconstructor(x,y,co

9、lor)super(x,y調(diào)用父類的constructor(x,this.color=toString()returnthis.colorsuper.toString調(diào)用父類的this對象。constructorsuperclass/*.*/classextendsletcp=new();/this上面（Parent.apply(this)）。ES6letcp=new();/this上面（Parent.apply(this)）。ES6classextendsclassextendsconstructor(.args) super之后，才可以使super方法才能返回父類實例。classconst

10、ructor(x,y) this.x = x; this.y = y;classextendsconstructor(x,y,color)this.color=color;/ReferenceError super(x, y);this.colorcolor;正super方法之后就是正確的。letcp=new(25,8,cpinstanceof/cpinstanceof/和cpinstanceof/cpinstanceof/和ES5classAso()oclassBextendsAo() osupersuper函數(shù)。classAclassBextendsA constructor() 必須的，

11、否則 JavaScript 引擎會報錯。classAclassBextendsA constructor() newA()/A newB()/newA()/A newB()/thisB。classAclassBextendsA m() super報classA p() returnclassBextendsA constructor() ();/letb=newsuper在普通方法之中，指向A.prototype，所以supsuper調(diào)用的。class A constructor()this.p=classBextendsA get m() returnletb=newclassBextend

12、sA get m() returnletb=newb.m/就classAA.prototype.x=classBextendsA constructor() console.log(super.x)/2letb=newclass A constructor()this.x=()classBextendsA constructor() this.x=2;m()rletb=newb.m()/letb=newb.m()/thisclass A constructor()this.x=classBextendsA constructor() this.x=2;super.x=console.log(s

13、uper.x);/undefined console.log(this.x); / 3letb=newclassAclassBextendsA constructor() console.log(super報錯JavaScriptclassAclassBJavaScriptclassAclassBextendsA constructor() console.log(super.valueOf()instanceofB);/letb=newsuperBthissuper.valueOf()返回的是一個Bvar obj = toString()returnMyObject:+obj.toStrin

14、g();/MyObject:object2-Module（模塊）語 一直沒有模塊RubyrequireimportCSSimportJavaScriptES6CommonJSAMD前者用于服務(wù)器，后者用于瀏覽器。ES6而且實現(xiàn)得相當(dāng)簡單，完全可以取代 CommonJS 和 AMD 規(guī)范，成為瀏覽器和服務(wù)ES6如，CommonJS 模塊就是對象，輸入時必須查找對象屬性。CommonJS模let,exists,readFile=let_fsES6如，CommonJS 模塊就是對象，輸入時必須查找對象屬性。CommonJS模let,exists,readFile=let_fs=let=;let ex

15、ists = _fs.exists; letreadfile=_fs.readfile;（_fsES6模import,exists,readFilefromES6ES6 JavaScript（macro）和類型檢驗（typesystem）這些只能UMDES6APIexport望外部能模JSexport/exportName=exportvarlastName=Jackson; export var year = 1958;exportName=exportvarlastName=Jackson; export var year = 1958;/Name=varlastName=varyear=

16、exportName,lastName,exportfunctionmultiply(x,y) return x * y;functionv1().functionv2().exportv1asstreamV1, v2asv2as報export/ 報錯 varm1; export m;m1。1只是一個值，不是接口。正確的寫法是下exportvarm=varexportvarm=varm=exportvar n = 1; exportnasm;報functionf()export正exportfunctionf()/ 正確 functionf export f;可以取到模塊 實時的值。expor

17、t var foo = bar; setTimeout()=foo=baz,500);CommonJSCommonJS態(tài)更新，詳見下文Module 的加載實現(xiàn)一節(jié)。最后，export命令可以出現(xiàn)在模塊的任何位置，只要處于模塊頂層就可以。如果ES6functionfoo()exportdefaultbar/importexportJS/importName,lastName,yearfromfunction/importName,lastName,yearfromfunctionsetName(element) element.textContent =Name+importprofile.js

18、文件，并從中輸入變量。import importlastNamernamefrom.jsJavaScript 引擎該模塊的位置。importmyMethodfromimportfoofromimport是靜態(tài)執(zhí)行，所以不能使用表達式和變量，這些只有在運行時才能得報importf+oofrom報letmodule=importfoofrom報if(x=1)importfoofromelseimportfoofromimportimportimportlodash; importimportfoofrommy_module; importbarfromimportfoo,barfrommy_mod

19、ule實例。也就是說，importSingletonCommonJSimport React from React;export defaultimport命令的時候，用戶需要知道所要加載的變量default命令，為模塊指定默認(rèn)輸出。/export-exportdefaultfunction() 其他模塊加載該模塊時，import命令可以為該/import-importcustomNamefrom./export-default; customName(); / fooexportdefault/export-exportdefaultfunctionfoo()或者寫function foo() exportdefault或者寫function foo() exportdefaultexportdefaultfunctioncrc32輸/importcrc32fromcrc32輸exportfunctioncrc32輸/importcrc32fromcrc32輸上面代碼的兩組寫法，第一組是使用 export de