技術(shù)前端es6特性ES6全稱ECMAScript6.0是JavaScript的

Es6ES6，全稱ECMAScript6.0，是JavaScript的下一個版本標(biāo)準(zhǔn)，2015.06發(fā)版。ES6主要是為了解決ES5的不足，比如JavaScript里并沒有類的概念，但是目前JavaScriptES5ES6，不過只實現(xiàn)了ES6的部分特性和功能。Tableofvar與let/const類Asyncvarversuslet/除了var以外，我們現(xiàn)在多了兩個新的標(biāo)識符來變量的存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后可能會導(dǎo)致預(yù)期意外的結(jié)果。注意：letconst是塊級作用域語句。所以在語句塊以外這些變量時，會造成錯誤ReferenceError。letletx='hi';//ReferenceError:xisnot最佳實踐:在重構(gòu)老代碼時，var需要格外的注意。在創(chuàng)建個新項目時，使用let一個變量，使用const來一個不RecingIIFEswithES6支持塊級作用域（更貼近其他語言），((function()varfood='Meowconsole.log(food);//ReferenceES6{{letfood='Meow}console.log(food);//ReferenceArrow一些時候，我們在函數(shù)嵌套中需要上下文中的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中，標(biāo)準(zhǔn)庫也被同樣增強了，像字符串對象就新增.includes.repeat方法。.includes(varvarstring='food';varsubstring=console.log(string.indexOf(substring)>-.inclues1.includes()方極簡地返回一個布爾值結(jié)果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中，提供了多種設(shè)置模塊出口的方式，比如我們要導(dǎo)出一個變量，那么：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模塊中，通用的習(xí)慣是設(shè)置一個出CommonJSES6ImportinginES6importimport就像Python一樣，我們還可以命 importimport{sumTwo,sumThree}fromimportimportsumTwoasaddTwoNumbers,sumThreeassumThreeNumbers}from引入所有的東西（原文：importallthethings）（也稱為命名importimport*asutilfromimportimport*asadditionUtilfrom'math/addtion';const{sumTwo,sumThree=像這樣默認(rèn)對象我們建議一個模塊導(dǎo)出的值應(yīng)該越簡潔越好，不過有時候有必要的話命名我們建議一個模塊導(dǎo)出的值應(yīng)該越簡潔越好，不過有時候有必要的話命名和默 可以混著用。如果一個模塊是這樣導(dǎo)出的// port{fooasdefault,foo1,foo2importapifrom'math/addition';//Sameas:import{defaultasapifromimportimportfoo,{foo1,foo2}fromcommonjsimportimportReactfrom'react';const{Component,PropTypes}=importimportReact,{Component,PropTypes}from所以，改變一個模塊中的值的話，會影響其他本模塊的代ES5參數(shù)默認(rèn)值（defaultvalues），參數(shù)數(shù)量（indefinitearguments），參數(shù)命名（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）來把一組數(shù)組的值，當(dāng)作參數(shù)傳Math.max(...[-1,Math.max(...[-1,100,9001,-32]);//ES6以前，我們實現(xiàn)一個類的功能的話，需要首先創(chuàng)建一個構(gòu)造函數(shù)，然后 (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中出來，這是個非常適合初學(xué)者的功能，而且能讓我們寫出符號（Symbols）ES6版本之前就已經(jīng)存在了，但現(xiàn)在我們擁有一個公共的Symbols對象是一旦創(chuàng)建就不可以被更改的（immutable）Symbol(Symbol()Symbol(描述文本會創(chuàng)建一個唯一的、在全局中不可以一個Symbol()的應(yīng)用場景是：在自己的項目中使用第代碼庫，且你需要他們的對象或者命名空間打補丁代碼，又不想改動或升級第原有代碼的時 ponent這個類添加一個 法，但又確定不了這個方不會在下個版本中加入，你可以這么做：ponent=//doponent]=()=>}Symbol.for(key)Symbol對象，但區(qū)別于上面的創(chuàng)建方法，這個對象是在全局中可以被到的。Symbol('foo')Symbol('foo')===Symbol('foo')//falseSymbol.for('foo')Symbol('foo')//falseSymbol.for('foo')===Symbol.for('foo')//SymbolsSymbol.for(key)方法來實現(xiàn)這能讓你在你的代碼中，查找包含已知的接口的 代碼中Symbol成員（譯者：這句話好難翻。。。原文：ThiscanachievedbyhavingyourcodelookforaSymbolmemberonargumentsfromthirdpartiesthatcontainsomeknowninterface.）舉個例functionfunctionreader(obj)constspecialRead=if(obj[specialRead])constreader=//dosomethingwith}elsethrownewTypeError('objectcannotbe}}constconstspecialRead=classSomeReadableType{[specialRead](){constreader=return}} ble在ES6中像其他可枚舉的對象，如數(shù)組字符串，generators一樣，當(dāng)這個方法被調(diào)用時會激活一個枚舉MapsJavascript中很重要（迫切需要）的數(shù)據(jù)結(jié)構(gòu)。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了，現(xiàn)在可以使用keykey不會被強制類型轉(zhuǎn)換為字符串。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之前的版本，我們?yōu)榱怂接袛?shù)據(jù)，有好幾種方法。像使用這種下劃{constructor(age)this._age=}_incrementAge()this._age+=}}此時，我們可以選擇使用WeakMaps來替代Maps來我們的數(shù)據(jù)letlet_age=newconstructor(age)_age.set(this,}{incrementAge()letage=_age.get(this)+_age.set(this,if(age>50){console.log('Midlifecrisis');}}}使用WeakMaps來保存我們私有數(shù)據(jù)的理由之一是不會出屬性名，就像下Reflect.ownKeys()：=.incrementAge();//'Midlife );//一個使用WeakMaps數(shù)據(jù)更實際的例子，就是有關(guān)于一個DOM元素和對DOM元素（有污染）地操作：letletmap=newWeakMap();letel //Storeaweakreferencetotheelementwithamap.set(el,//Accessthevalueoftheelementletvalue=map.get(el);////Removethereferenceel=null;value=map.get(el);//上面的例子中，一個對象被回收期給銷毀了，WeakMaps會自動的把自己提示jQuery是如何實現(xiàn)緩存帶有DOMWeakMaps的話，當(dāng)被緩存的DOM元素被移除的時，jQuery可以自動釋放相應(yīng)元素的內(nèi)存。通常情況下，在涉及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。現(xiàn)在我們有了原生版本的newnewPromise((resolve,reject)reject(newError('Failedtofulfill.catch(reason=>這里有兩個處理函數(shù)，resolve（Promise執(zhí)行成功完畢時調(diào)用的回調(diào)函數(shù)）reject（Promise執(zhí)行不接受時調(diào)用的回調(diào)函數(shù)）Promises的好處：大量嵌套錯誤回調(diào)函數(shù)會使代碼變得難以閱讀此外，Promise處理后的值，無論是解決還是的結(jié)果值，都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如何讓我們避免回調(diào) 一樣，Generators也可以使我們的代Generators本質(zhì)上是一種支持的函數(shù)，隨后返回表達式的值。Generators實際上是支持暫停運行，隨后根據(jù)上一步的返回值再繼續(xù)運行的一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