ECMAScript 6git.io/es6features

Introduction

ECMAScript 6 Features

Arrows

// Expression bodiesvarodds=evens.map(v=>v+1);varnums=evens.map((v,i)=>v+i);varpairs=evens.map(v=>({even:v,odd:v+1}));// Statement bodiesnums.forEach(v=>{if(v%5===0)fives.push(v);});// Lexical thisvarbob={_name:"Bob",_friends:[],printFriends(){this._friends.forEach(f=>console.log(this._name+" knows "+f));}}

Classes

classSkinnedMeshextendsTHREE.Mesh{constructor(geometry,materials){super(geometry,materials);this.idMatrix=SkinnedMesh.defaultMatrix();this.bones=[];this.boneMatrices=[];//...}update(camera){//...super.update();}getboneCount(){returnthis.bones.length;}setmatrixType(matrixType){this.idMatrix=SkinnedMesh[matrixType]();}staticdefaultMatrix(){returnnewTHREE.Matrix4();}}

Enhanced Object Literals

varobj={// __proto____proto__:theProtoObj,// Shorthand for ‘handler: handler’    handler,// MethodstoString(){// Super callsreturn"d "+super.toString();},// Computed (dynamic) property names['prop_'+(()=>42)()]:42};

Template Strings

// Basic literal string creation`In JavaScript '\n' is a line-feed.`// Multiline strings`In JavaScript this is not legal.`// String interpolationvarname="Bob",time="today";`Hello${name}, how are you${time}?`// Construct an HTTP request prefix is used to interpret the replacements and constructionPOST`http://foo.org/bar?a=${a}&b=${b}     Content-Type: application/json     X-Credentials:${credentials}     { "foo":${foo},       "bar":${bar}}`(myOnReadyStateChangeHandler);

Destructuring

// list matchingvar[a,,b]=[1,2,3];// object matchingvar{op:a,lhs:{op:b},rhs:c}=getASTNode()// object matching shorthand// binds `op`, `lhs` and `rhs` in scopevar{op, lhs, rhs}=getASTNode()// Can be used in parameter positionfunctiong({name:x}){console.log(x);}g({name:5})// Fail-soft destructuringvar[a]=[];a===undefined;// Fail-soft destructuring with defaultsvar[a=1]=[];a===1;

Default + Rest + Spread

functionf(x,y=12){// y is 12 if not passed (or passed as undefined)returnx+y;}f(3)==15

functionf(x, ...y){// y is an Arrayreturnx*y.length;}f(3,"hello",true)==6

functionf(x,y,z){returnx+y+z;}// Pass each elem of array as argumentf(...[1,2,3])==6

Let + Const

functionf(){{letx;{// okay, block scoped nameconstx="sneaky";// error, constx="foo";}// error, already declared in blockletx="inner";}}

Iterators + For..Of

letfibonacci={[Symbol.iterator](){letpre=0,cur=1;return{next(){[pre,cur]=[cur,pre+cur];return{done:false,value:cur}}}}}for(varnoffibonacci){// truncate the sequence at 1000if(n>1000)break;console.log(n);}

interfaceIteratorResult{done:boolean;value:any;}interfaceIterator{next():IteratorResult;}interfaceIterable{[Symbol.iterator]():Iterator}

Generators

varfibonacci={[Symbol.iterator]:function*(){varpre=0,cur=1;for(;;){vartemp=pre;pre=cur;cur+=temp;yieldcur;}}}for(varnoffibonacci){// truncate the sequence at 1000if(n>1000)break;console.log(n);}

interfaceGeneratorextendsIterator{next(value?:any):IteratorResult;throw(exception:any);}

Unicode

// same as ES5.1"𠮷".length==2// new RegExp behaviour, opt-in ‘u’"𠮷".match(/./u)[0].length==2// new form"\u{20BB7}"=="𠮷"=="\uD842\uDFB7"// new String ops"𠮷".codePointAt(0)==0x20BB7// for-of iterates code pointsfor(varcof"𠮷"){console.log(c);}

Modules

// lib/math.jsexportfunctionsum(x,y){returnx+y;}exportvarpi=3.141593;

// app.jsimport*asmathfrom"lib/math";alert("2π = "+math.sum(math.pi,math.pi));

// otherApp.jsimport{sum,pi}from"lib/math";alert("2π = "+sum(pi,pi));

// lib/mathplusplus.jsexport*from"lib/math";exportvare=2.71828182846;exportdefaultfunction(x){returnMath.log(x);}

// app.jsimportln,{pi,e}from"lib/mathplusplus";alert("2π = "+ln(e)*pi*2);

Module Loaders

// Dynamic loading – ‘System’ is default loaderSystem.import('lib/math').then(function(m){alert("2π = "+m.sum(m.pi,m.pi));});// Create execution sandboxes – new Loadersvarloader=newLoader({global:fixup(window)// replace ‘console.log’});loader.eval("console.log('hello world!');");// Directly manipulate module cacheSystem.get('jquery');System.set('jquery',Module({$:$}));// WARNING: not yet finalized

Map + Set + WeakMap + WeakSet

// Setsvars=newSet();s.add("hello").add("goodbye").add("hello");s.size===2;s.has("hello")===true;// Mapsvarm=newMap();m.set("hello",42);m.set(s,34);m.get(s)==34;// Weak Mapsvarwm=newWeakMap();wm.set(s,{extra:42});wm.size===undefined// Weak Setsvarws=newWeakSet();ws.add({data:42});// Because the added object has no other references, it will not be held in the set

Proxies

// Proxying a normal objectvartarget={};varhandler={get:function(receiver,name){return`Hello,${name}!`;}};varp=newProxy(target,handler);p.world==='Hello, world!';

// Proxying a function objectvartarget=function(){return'I am the target';};varhandler={apply:function(receiver, ...args){return'I am the proxy';}};varp=newProxy(target,handler);p()==='I am the proxy';

varhandler={get:...,set:...,has:...,deleteProperty:...,apply:...,construct:...,getOwnPropertyDescriptor:...,defineProperty:...,getPrototypeOf:...,setPrototypeOf:...,enumerate:...,ownKeys:...,preventExtensions:...,isExtensible:...}

Symbols

varMyClass=(function(){// module scoped symbolvarkey=Symbol("key");functionMyClass(privateData){this[key]=privateData;}MyClass.prototype={doStuff:function(){      ...this[key]...}};returnMyClass;})();varc=newMyClass("hello")c["key"]===undefined

Subclassable Built-ins

// Pseudo-code of ArrayclassArray{constructor(...args){/* ... */}static[Symbol.create](){// Install special [[DefineOwnProperty]]// to magically update 'length'}}// User code of Array subclassclassMyArrayextendsArray{constructor(...args){super(...args);}}// Two-phase 'new':// 1) Call @@create to allocate object// 2) Invoke constructor on new instancevararr=newMyArray();arr[1]=12;arr.length==2

Math + Number + String + Array + Object APIs

Number.EPSILONNumber.isInteger(Infinity)// falseNumber.isNaN("NaN")// falseMath.acosh(3)// 1.762747174039086Math.hypot(3,4)// 5Math.imul(Math.pow(2,32)-1,Math.pow(2,32)-2)// 2"abcde".includes("cd")// true"abc".repeat(3)// "abcabcabc"Array.from(document.querySelectorAll('*'))// Returns a real ArrayArray.of(1,2,3)// Similar to new Array(...), but without special one-arg behavior[0,0,0].fill(7,1)// [0,7,7][1,2,3].find(x=>x==3)// 3[1,2,3].findIndex(x=>x==2)// 1[1,2,3,4,5].copyWithin(3,0)// [1, 2, 3, 1, 2]["a","b","c"].entries()// iterator [0, "a"], [1,"b"], [2,"c"]["a","b","c"].keys()// iterator 0, 1, 2["a","b","c"].values()// iterator "a", "b", "c"Object.assign(Point,{origin:newPoint(0,0)})

Binary and Octal Literals

0b111110111===503// true0o767===503// true

Promises

functiontimeout(duration=0){returnnewPromise((resolve,reject)=>{setTimeout(resolve,duration);})}varp=timeout(1000).then(()=>{returntimeout(2000);}).then(()=>{thrownewError("hmm");}).catch(err=>{returnPromise.all([timeout(100),timeout(200)]);})

Reflect API

// No sample yet

Tail Calls

functionfactorial(n,acc=1){'use strict';if(n<=1)returnacc;returnfactorial(n-1,n*acc);}// Stack overflow in most implementations today,// but safe on arbitrary inputs in ES6factorial(100000)