思图前端课程8-ecmascript

1、ES6 课程1 ES61-ES6 是什么ECMAScript6.0（以下简称 ES6）是 JavaScript6JavaScriptES6 课程1 ES61-ES6 是什么ECMAScript6.0（以下简称 ES6）是 JavaScript6JavaScript1-常用语Parameters（默认参数） initerals（模板文本）inMulti-line Strings （多行字符串）in ES6 Destructuring Assignment （解构赋值）in ES6 EnhancedObjectLiterals（增强的对象文本）inES6 Arrow Functions （箭头函数

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当thisthis2-模板字符串/变Thereare+basket.count+ items in your basket, +basket.onSale+ are on sale!上面这种写法相当繁琐不方便，+9Thereare$basket.countinyourbasket,$basket.onSale are on sa

6、le!模板字符串（ZKSVRGZK XO上面这种写法相当繁琐不方便，+9Thereare$basket.countinyourbasket,$basket.onSale are on sale!模板字符串（ZKSVRGZK XO）是增强版的字符串，用反引号（F）标识。它可以当普通字InJavaScriptnisaline-多行字Inthisisnot字符串中嵌入letname=Bob,time=o$name,howareyou换行。如果你不想要这个换行，可以使用 XOS 方法消除它 )GYY（类）的基本语 IXOVZ 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子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调用父类的constructor(x,this.color=toString()returnthis.colorsuper.toString调用父类的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函数。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调用的。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前者用于服务器，后者用于浏览器。ES6而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务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态更新，详见下文Module 的加载实现一节。最后，export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果ES6functionfoo()exportdefaultbar/importexportJS/importName,lastName,yearfromfunction/importName,lastName,yearfromfunctionsetName(element) element.textContent =Name+importprofile.js

18、文件，并从中输入变量。import importlastNamernamefrom.jsJavaScript 引擎该模块的位置。importmyMethodfromimportfoofromimport是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得报importf+oofrom报letmodule=importfoofrom报if(x=1)importfoofromelseimportfoofromimportimportimportlodash; importimportfoofrommy_module; importbarfromimportfoo,barfrommy_mod

19、ule实例。也就是说，importSingletonCommonJSimport React from React;export defaultimport命令的时候，用户需要知道所要加载的变量default命令，为模块指定默认输出。/export-exportdefaultfunction() 其他模块加载该模块时，import命令可以为该/import-importcustomNamefrom./export-default; customName(); / fooexportdefault/export-exportdefaultfunctionfoo()或者写function foo() exportdefault或者写function foo() exportdefaultexportdefaultfunctioncrc32输/importcrc32fromcrc32输exportfunctioncrc32输/importcrc32fromcrc32输上面代码的两组写法，第一组是使用 export de