技术前端es6特性ES6全称ECMAScript6.0是JavaScript的

Es6ES6，全称ECMAScript6.0，是JavaScript的下一个版本标准，2015.06发版。ES6主要是为了解决ES5的不足，比如JavaScript里并没有类的概念，但是目前JavaScriptES5ES6，不过只实现了ES6的部分特性和功能。Tableofvar与let/const类Asyncvarversuslet/除了var以外，我们现在多了两个新的标识符来变量的存letconst。不同于var，let和const语句不会造成提升。var的例子:varvarsnack='MeowfunctiongetFood(food)if(food)varsnack=return}return}getFood(false);//letletsnack='MeowfunctiongetFood(food)if(food)letsnack=return}return}getFood(false);//'Meowvar后可能会导致预期意外的结果。注意：letconst是块级作用域语句。所以在语句块以外这些变量时，会造成错误ReferenceError。letletx='hi';//ReferenceError:xisnot最佳实践:在重构老代码时，var需要格外的注意。在创建个新项目时，使用let一个变量，使用const来一个不RecingIIFEswithES6支持块级作用域（更贴近其他语言），((function()varfood='Meowconsole.log(food);//ReferenceES6{{letfood='Meow}console.log(food);//ReferenceArrow一些时候，我们在函数嵌套中需要上下文中的this。比如下面的例子(name)=}.prototype.prefixName=function(arr)returnarr.map(function(character)+character;//Cannotreadproperty'name'of(name)=}.prototype.prefixName=function(arr)varthat=this;//Storethecontextofreturnarr.map(function(character)+(name)=}.prototype.prefixName=function(arr)returnarr.map(function(character)+},(name)=}.prototype.prefixName=function(arr)returnarr.map(function(character)+(name)=}.prototype.prefixName=function(arr)returnarr.map(character=>+varvarsquares=arr.map(function(x){returnx*x});//Functionconstarr=[1,2,3,4,5];constsquares=arr.map(x=>x*x);ArrowFunctionforterserES6中，标准库也被同样增强了，像字符串对象就新增.includes.repeat方法。.includes(varvarstring='food';varsubstring=console.log(string.indexOf(substring)>-.inclues1.includes()方极简地返回一个布尔值结果constconststring='food';constsubstring=console.log(string.includes(substring));//.repeat(functionrepeatfunctionrepeat(string,count){varstrings=[];while(strings.length<count){}}return}ES6////String.repeat(numberOfRepetitions)'meow'.repeat(3);Temte varvartext="Thisstringcontains\"doublequotes\"whicharelettext=`Thisstringcontains"doublequotes"whichdon'tneedtobeescapedanymore.`;varvarname='Tiger';varage=console.log('Mycatisnamed'+name+'andis'+age+'yearsconstconstname='Tiger';constage=console.log(`Mycatisnamed${name}andis${age}yearsES5varvartext='cat\n'+'dog\n'+varvartext=letlettext=(`catletlettoday=newDate();lettext=`ThetimeanddateDestructuringvarvararr=[1,2,3,4];vara=arr[0];varb=arr[1];varc=arr[2];vard=arr[3];let[a,b,c,d]=[1,2,3,console.log(a);//1console.log(b);//Destructuringvarvarluke={occupation:'jedi',father:'anakin'};varoccupation=luke.occupation;//'jedi'varfather=luke.father;//'anakin'letluke={occupation:'jedi',father:'anakin'};let{occupation,father}=luke;console.log(occupation);//'jedi'console.log(father);//ES6Browserify这样的库，Node.jsrequire。ES6AMD和CommonJSExportinginmodule.exportsmodule.exports=1;module.exports={foo:'bar'};module.exports['foo','bar'];module.exports=functionbar()ExportinginES6中，提供了多种设置模块出口的方式，比如我们要导出一个变量，那么：exportexportletname='David';exportletage=functionfunctionsumTwo(a,b)returna+}functionsumThree(a,b,c)returna+b+}export{sumTwo,sumThreeexportexportfunctionsumTwo(a,b)returna+}exportfunctionsumThree(a,b,c)returna+b+}functionfunctionsumTwo(a,b)returnreturna+}functionsumThree(a,b,c)returna+b+}letapi=exportdefault最佳实践exportdefaultCommonJS模块中，通用的习惯是设置一个出CommonJSES6ImportinginES6importimport就像Python一样，我们还可以命 importimport{sumTwo,sumThree}fromimportimportsumTwoasaddTwoNumbers,sumThreeassumThreeNumbers}from引入所有的东西（原文：importallthethings）（也称为命名importimport*asutilfromimportimport*asadditionUtilfrom'math/addtion';const{sumTwo,sumThree=像这样默认对象我们建议一个模块导出的值应该越简洁越好，不过有时候有必要的话命名我们建议一个模块导出的值应该越简洁越好，不过有时候有必要的话命名和默 可以混着用。如果一个模块是这样导出的// port{fooasdefault,foo1,foo2importapifrom'math/addition';//Sameas:import{defaultasapifromimportimportfoo,{foo1,foo2}fromcommonjsimportimportReactfrom'react';const{Component,PropTypes}=importimportReact,{Component,PropTypes}from所以，改变一个模块中的值的话，会影响其他本模块的代ES5参数默认值（defaultvalues），参数数量（indefinitearguments），参数命名（namedparameters）。ES6DefaultfunctionfunctionaddTwoNumbers(x,y){x=x||0;y=y||returnreturnx+}ES6functionfunctionaddTwoNumbers(x=0,y=0)returnx+}addTwoNumbers(2,4);//addTwoNumbers(2);//addTwoNumbers();//RestES5functionfunctionlogArguments()for(vari=0;i<arguments.length;i++){}}restfunctionfunctionlogArguments(...args){for(letargofargs){}}NamedES5的方式，jQuery采用。functioninitializeCanvasfunctioninitializeCanvas(options){varheight=options.height||600;varwidth=options.width||varlineStroke=options.lineStroke||}}Wecanachievethesamefunctionalityusingdestructuringasaformaltoafunctionfunction{height=600,width=400,lineStroke='black'})//}//Usevariablesheight,width,lineStrokefunctionfunction{height=600,width=400,lineStroke='black'}={})//}Spread我们可以利用展开操作符（SpreadOperator）来把一组数组的值，当作参数传Math.max(...[-1,Math.max(...[-1,100,9001,-32]);//ES6以前，我们实现一个类的功能的话，需要首先创建一个构造函数，然后 (name,age,gender) =name; =age;this.gender=gender;}.prototype.incrementAtotype.incrementAge=function()returnthis.age+= al(name,age,gender,occupation,hobby).call(this,name,age,gender);this.occupation=occupation;this.hobby=hobby;}totype=totype.incrementAge=function() .prototype.incrementAge.call(this)+=ES6{constructor(name,age,gender) =name; =age;this.gender=gender;}incrementAge()this.age+=}}al{constructor(name,age,gender,occupation,hobby)super(name,age,gender);this.occupation=occupation;this.hobby=hobby;}incrementAge()this.age+=20;} 最佳实践：ES6中出来，这是个非常适合初学者的功能，而且能让我们写出符号（Symbols）ES6版本之前就已经存在了，但现在我们拥有一个公共的Symbols对象是一旦创建就不可以被更改的（immutable）Symbol(Symbol()Symbol(描述文本会创建一个唯一的、在全局中不可以一个Symbol()的应用场景是：在自己的项目中使用第代码库，且你需要他们的对象或者命名空间打补丁代码，又不想改动或升级第原有代码的时 ponent这个类添加一个 法，但又确定不了这个方不会在下个版本中加入，你可以这么做：ponent=//doponent]=()=>}Symbol.for(key)Symbol对象，但区别于上面的创建方法，这个对象是在全局中可以被到的。Symbol('foo')Symbol('foo')===Symbol('foo')//falseSymbol.for('foo')Symbol('foo')//falseSymbol.for('foo')===Symbol.for('foo')//SymbolsSymbol.for(key)方法来实现这能让你在你的代码中，查找包含已知的接口的 代码中Symbol成员（译者：这句话好难翻。。。原文：ThiscanachievedbyhavingyourcodelookforaSymbolmemberonargumentsfromthirdpartiesthatcontainsomeknowninterface.）举个例functionfunctionreader(obj)constspecialRead=if(obj[specialRead])constreader=//dosomethingwith}elsethrownewTypeError('objectcannotbe}}constconstspecialRead=classSomeReadableType{[specialRead](){constreader=return}} ble在ES6中像其他可枚举的对象，如数组字符串，generators一样，当这个方法被调用时会激活一个枚举MapsJavascript中很重要（迫切需要）的数据结构。ES6hash通常是使用一个对象：varvarmap=newObject();map[key1]='value1';map[key2]=getOwnProperty({getOwnProperty({hasOwnProperty:'Hah,overwritten'},TypeError:Property'hasOwnProperty'isnotaMapsset，getsearchletletmap=newMap();map.set('name','david');map.get('name');//map.has('name');//Mapskey了，现在可以使用keykey不会被强制类型转换为字符串。letletmap=newMap([['name','david'],[true,[1,[{},[function(){},for(letkeyofmap.keys()){console.log(typeofkey);//>string,boolean,number,object,}.entries()map对象：forfor(let[key,value]ofmap.entries()){console.log(key,value);}在ES5之前的版本，我们为了私有数据，有好几种方法。像使用这种下划{constructor(age)this._age=}_incrementAge()this._age+=}}此时，我们可以选择使用WeakMaps来替代Maps来我们的数据letlet_age=newconstructor(age)_age.set(this,}{incrementAge()letage=_age.get(this)+_age.set(this,if(age>50){console.log('Midlifecrisis');}}}使用WeakMaps来保存我们私有数据的理由之一是不会出属性名，就像下Reflect.ownKeys()：=.incrementAge();//'Midlife );//一个使用WeakMaps数据更实际的例子，就是有关于一个DOM元素和对DOM元素（有污染）地操作：letletmap=newWeakMap();letel //Storeaweakreferencetotheelementwithamap.set(el,//Accessthevalueoftheelementletvalue=map.get(el);////Removethereferenceel=null;value=map.get(el);//上面的例子中，一个对象被回收期给销毁了，WeakMaps会自动的把自己提示jQuery是如何实现缓存带有DOMWeakMaps的话，当被缓存的DOM元素被移除的时，jQuery可以自动释放相应元素的内存。通常情况下，在涉及DOM元素和缓存的情况下，使用WeakMaps是非常适合的。Promises让我们让我们多缩进难看的代码（回 func1(func1(function(value1){func2(value1,function(value2){func3(value2,function(value3){func4(value3,function(value4){func5(value4,function(value5)//Dosomethingwithvalue.then(func5,value5=>//DosomethingwithvalueES6bluebirdQ。现在我们有了原生版本的newnewPromise((resolve,reject)reject(newError('Failedtofulfill.catch(reason=>这里有两个处理函数，resolve（Promise执行成功完毕时调用的回调函数）reject（Promise执行不接受时调用的回调函数）Promises的好处：大量嵌套错误回调函数会使代码变得难以阅读此外，Promise处理后的值，无论是解决还是的结果值，都PromisesvarvarfetchJSON=function(url)returnnewPromise((resolve,reject)=>.done((json)=>.fail((xhr,status,err)=>reject(status+varvarurls=''varurlPromises=.then(function(results){results.forEach(function(data){.catch(function(err){console.log('Failed:',err);就像Promises如何让我们避免回调 一样，Generators也可以使我们的代Generators本质上是一种支持的函数，随后返回表达式的值。Generators实际上是支持暂停运行，随后根据上一步的返回值再继续运行的一generatorsfunctionfunction*sillyGenerator()yieldyieldyieldyield}vargenerator=sillyGenerator();console.log(generator.next());//{value:1,done:false}console.log(generator.next());//{value:2,done:false}console.log(generator.next());//{value:3,done:falseconsole.log(generator.next());//{value:4,done:falsenextgenerator向前“推动”，同时Generators////Hidingasynchronousitywithfunctionrequest(url)getJSON(url,function(response){}generatorfunc