ECMAScript6新特性分析

1、ECMAScript 6 新特性箭頭函數(shù)和靜態(tài) this (Arrows and Lexical This )箭頭函數(shù)使用胖箭頭(=)語法，與C# , Java 8和CoffeeScript類似。支持表達(dá)式和語句作為函數(shù)體。不像普通函數(shù)，箭頭函數(shù)的 this是和文法作用域綁定的。/表達(dá)式作為函數(shù)體var odds = evens.map(v = v + 1);var nums = evens.map(v, i) = v + i);/語句作為函數(shù)體nums.forEach(v = if (v % 5 = 0)fives.push(v);)；/ 靜態(tài)thisvar bob = _name: Bob

2、,_friends:,printFriends() this._friends.forEach(f =console.log(this._name + knows + f);；類(Classes)ES2015中的類是對(duì)基于原型面向?qū)ο竽Ｊ降囊粋€(gè)簡(jiǎn)單語法糖。有一個(gè)單一的聲明形式可以使類模式更容易使用，并鼓勵(lì)互操作性。類支持基于原型的繼承，超類調(diào)用(super)， 實(shí)例方法，靜態(tài)方法和構(gòu)造函數(shù)。class SkinnedMesh extends THREE.Mesh constructor(geometry, materials) super(geometry, materials);this.i

3、dMatrix = SkinnedMesh.defaultMatrix();this.bones =;this.boneMatrices =;update(camera) super.update();static defaultMatrix() return new THREE.Matrix4();增強(qiáng)對(duì)象字面量(En ha need Object Literals )對(duì)象字面量被擴(kuò)展支持直接設(shè)置原型，簡(jiǎn)潔屬性賦值和方法，超類調(diào)用。這也讓對(duì)象字 面量和類聲明的關(guān)系更密切，并讓基于對(duì)象的設(shè)計(jì)更便利。var obj = / _proto_proto_: theProtoObj,/下面的寫法不會(huì)設(shè)

4、置內(nèi)部原型_proto_: somethingElse,/ handler: handler 的簡(jiǎn)寫handler,/ 方法toString() / 調(diào)用父對(duì)象的方法return d + super.toString();,/屬性名是一個(gè)表達(dá)式prop_ + () = 42)() : 42；_proto_ 屬性需要原生支持，這一屬性在ECMAScript前一個(gè)版本中一度被廢棄。目前為止，大部分引擎支持這一屬性。同時(shí)需要注意，僅僅web瀏覽器需要實(shí)現(xiàn)這一屬性，在Node中現(xiàn)在就可使用。模版字符串(Template Strings )模版字符串提供構(gòu)建字符串的語法糖。這類似 Perl，Python

5、等其他語言中的字符串插值?？梢赃x擇性添加一個(gè)標(biāo)簽， 允許對(duì)字符串構(gòu)建的定制化，避免注入攻擊或其他需求。/ 普通字符串This is a pretty little template string./多行字符串In ES5 this isnot legal./ 字符串中嵌入變量var name = Bob, time = today;Hello $name, $time?/模版標(biāo)簽String.rawIn ES5 n is a line-feed./下面構(gòu)造一個(gè)HTTP請(qǐng)求頭，來解釋差值替換和構(gòu)造GET/bar?a=$a&b=$bConten

6、t-Type: application/jsonX-Credentials: $credentials foo: $foo,bar: $bar(myOnReadyStateChangeHandler);解構(gòu)(Destructuring )按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)。解構(gòu)失敗是 靜默的，類似標(biāo)準(zhǔn)的對(duì)象屬性查找foo “bar”，找不到值則為undefined 。/列表匹配var a, , b = 1,2,3;/對(duì)象匹配var op: a, lhs: op: b , rhs: c =getASTNode()/對(duì)象匹配簡(jiǎn)寫/ 綁定作用域中的op, lhs 和rh

7、svar op, lhs, rhs = getASTNode()/函數(shù)參數(shù)function g(name: x) console .lo g(x);g(name: 5)/ 解構(gòu)失敗，賦值為 undefinedvar a=；a = undefined;/如果有默認(rèn)值，則為默認(rèn)值var a = 1=;a = 1;默認(rèn)值+ Rest參數(shù)+擴(kuò)展運(yùn)算符(Default +Rest + Spread )現(xiàn)在函數(shù)調(diào)用可以傳遞默認(rèn)參數(shù)了；擴(kuò)展運(yùn)算符允許將數(shù)組轉(zhuǎn)化為函數(shù)的參數(shù)傳入； rest參數(shù)，用于獲取函數(shù)的多余參數(shù)，這樣就不需要使用arguments對(duì)象了。function f(x, y=12) /如果不傳

8、遞y或傳遞undefined ，y的值為12return x + y;f(3) = 15function f(x, .y) / y 是一個(gè)數(shù)組return x * y.l ength;f(3, hello, true) = 6function f(x, y, z) return x + y + z;/將數(shù)組擴(kuò)展為三個(gè)參數(shù)f(1,2,3) = 6Let + Constlet類似于var，但是所聲明的變量，只在let命令所在的代碼塊內(nèi)有效。con st也用來 聲明變量，但是聲明的是常量。一旦聲明，常量的值就不能改變。function f() let x;/塊作用域const x = sneaky;

9、II const常量重新賦值會(huì)報(bào)錯(cuò)x = foo;II let變量可以再次賦值x = bar;II在塊作用域中重復(fù)聲明將會(huì)報(bào)錯(cuò)let x = inner;Iterator禾口 for.of 循環(huán)(Iterators + For .Of)遍歷器對(duì)象能夠自定義遍歷行為，這很像Java的Iterable 。新增的for.of用來代替for.in。并不需要是數(shù)組，任何數(shù)據(jù)結(jié)構(gòu)只要部署Iterator 接口，就可以完成遍歷操作。let fibonacci = () let pre = 0, cur = 1;return next() pre, cur = cur, pr

10、e + cur;return done: false, value: cur for (var n of fibonacci) if (n 1000)break;console .Io g(n);遍歷器基于弱類型接口(下面是使用 TypeScript 語法的展示)：interface IteratorResult done: boolean;value: any;interface Iterator next(): IteratorResult;interface Iterable Symbol.iterator(): Iterator需要膩?zhàn)幽_本(Support via polyfill )

11、使用遍歷器需要引用 Babel膩?zhàn)幽_本。Generator函數(shù)(Generators)Generator函數(shù)是ES6提供的一種異步編程解決方案，語法行為與傳統(tǒng)函數(shù)完全不同。Gen erator函數(shù)有多種理解角度。從語法上，首先可以把它理解成，Gen erator函數(shù)是一個(gè)狀態(tài)機(jī)，封裝了多個(gè)內(nèi)部狀態(tài)。執(zhí)行Generator函數(shù)會(huì)返回一個(gè)遍歷器對(duì)象， 也就是說，Generator函數(shù)除了狀態(tài)機(jī)， 還是一個(gè)遍歷器對(duì)象生成函數(shù)。返回的遍歷器對(duì)象，可以依次遍歷Gen erator 函數(shù)內(nèi)部的每一個(gè)狀態(tài)。形式上，Gen erator 函數(shù)是一個(gè)普通函數(shù)，但是有兩個(gè)特征。一是，fun ction 命令與函數(shù)

12、名之間有一個(gè)星號(hào)；二是，函數(shù)體內(nèi)部使用yield語句，定義不同的內(nèi)部狀態(tài)(yield 語句在英語里的意思就是產(chǎn)出”。注意：也可以使用，await?類似異步編程，參見 ES7 await 提案。var fibonacci = Symbol.iterator: function*。var pre = 0, cur = 1;for (;) var temp = pre;pre = cur;cur += temp;yield cur;for (var n of fibonacci) / 截?cái)?000以后的數(shù)據(jù)if (n 1000)break;console .lo g(n);gen erator接口原

13、理如下(使用 TypeScript語法的模擬)：interface Generator extends Iterator next(value?: any): IteratorResult;throw(exception: any);需要膩?zhàn)幽_本(Support via polyfill )為了使用Generator ，需要引用Babel的膩?zhàn)幽_本。Uni codeu模式,ES6增強(qiáng)了對(duì)Unicode的支持，包括新的unicode字面量和新的正則匹配參數(shù) 以及新的API來處理超過兩個(gè)字節(jié)的字符。/ ES5.1 中? .length = 2/新的正則參數(shù)u? .match(/./u)O.leng

14、th = 2/新的表示法u20BB7 = ? = uD842uDFB7/新字符串方法? .codePointAt(0) = 0x20BB7/ for-offor(var c of ? ) console .lo g(c);模塊(Modules )語言級(jí)支持定義模塊和組件。新模塊的設(shè)計(jì)匯總了流行 JavaScript模塊加載器(AMD , Commo nJS )的優(yōu)點(diǎn)。模塊的實(shí)現(xiàn)機(jī)制由運(yùn)行時(shí)環(huán)境實(shí)現(xiàn)。隱式異步模型一一模塊加載完成之前代碼不會(huì)執(zhí)行。/ lib/math.jsexport function sum(x, y) return x + y;export var pi = 3.141593

15、;/ app.jsimport * as math from lib/math;alert(2 n = + math.sum(math.pi, math.pi);/ otherApp.jsimport sum, pi from lib/math;alert(2 n = + sum(pi, pi);可以設(shè)置導(dǎo)出默認(rèn)值和導(dǎo)出全部：/ lib/mathplusplus.jsexport * from lib/math;export var e = 2.71828182846;export default function(x) return Math.exp(x);/ app.jsimport ex

16、p, pi, e from lib/mathplusplus;alert(2 n = + exp(pi, e);模塊格式化Babel可以將ES2015的模塊轉(zhuǎn)譯成幾種不同的模塊格式，包括Common.js , AMD ,System 和UMD。你甚至可以創(chuàng)建自己的模塊格式，更多細(xì)節(jié)可以查看模塊的文檔。Map + Set + WeakMap + WeakSet專為常見算法設(shè)計(jì)的高效數(shù)據(jù)結(jié)構(gòu)。WeakMaps提供對(duì)象的弱引用作為鍵名的索引表。/ Setsvar s = new Set();s.add(hello).add(goodbye).add(hello);s.size = 2;s.has(h

17、ello) = true;/ Mapsvar m = new Map();m.set(hello, 42);m.set(s, 34);m.get(s) = 34;/ Weak Mapsvar wm = new WeakMap();wm.set(s, extra: 42 );wm.size = undefined/ Weak Setsvar ws = new WeakSet();ws.add( data: 42 );/ Because the added object has no other references, it will not be held in the set需要使用polyf

18、ill為了使用這些新數(shù)據(jù)結(jié)構(gòu)，你必須引入babel的膩?zhàn)幽_本。代理(Proxies)Proxy可以理解成，在目標(biāo)對(duì)象之前架設(shè)一層攔截”外界對(duì)該對(duì)象的訪問，都必須先通過這層攔截，因此提供了一種機(jī)制，可以對(duì)外界的訪問進(jìn)行過濾和改寫。/代理對(duì)象var target = ;var handler = get: function (receiver, name) return Hello, $name!;var p = new Proxy(target, handler);p.world = Hello, world!;/代理函數(shù)var target = function () return I am

19、the target; ;var handler = apply: function (receiver, .args) return I am the proxy;var p = new Proxy(target, handler);p() = I am the proxy;下面是Proxy支持的攔截操作一覽：var handler =/ pget: .,/ p = valueset: .,/ prop in targethas: .,/ delete pdeleteProperty: .,/ target(.args)apply:

20、 .,/ new target(.args)construct: .,/ Object.getOwnPropertyDescriptor(target, prop)getOwnPropertyDescriptor: .,/ Object.defineProperty(target, prop, descriptor) defineProperty: .,/ Object.getPrototypeOf(target), Reflect.getPrototypeOf(target),/ target._proto_, object.isPrototypeOf(target), object ins

21、tanceof target getPrototypeOf: .,/ Object.setPrototypeOf(target), Reflect.setPrototypeOf(target)setPrototypeOf:,/ for (let i in target) enumerate:，/ Object.keys(target)ownKeys:，/ Object.preventExtensions(target)preventExtensions:，/ Object.isExtensible(target)isExtensible :.不支持的特性(Unsupported feature

22、 )由于ES5的局限性，Proxy不能被轉(zhuǎn)換和填補(bǔ)。SymbolsSymbol可以作為對(duì)象的鍵值，是一種新的原始類型。Symbol函數(shù)可以接受一個(gè)字符串作為參數(shù)，表示對(duì)Symbol實(shí)例的描述，主要是為了在控制臺(tái)顯示，或者轉(zhuǎn)為字符串時(shí)，比較容易區(qū)分。 Symbol是獨(dú)一無二的，但可以通過Object.getOw nPropertySymbols獲取到。(function。/ 塊級(jí)作用域var key = Symbol(key);function MyClass(privateData) thiskey = privateData;MyC = doStuff: fu

23、nction() . thiskey .;/ Babel不能支持下面的操作，需要原生支持typeof key = symbol)()；var c = new MyClass(hello)ckey = undefined需要膩?zhàn)幽_本(不完備)(Limited support via polyfill )需要使用Babel的膩?zhàn)幽_本，但無法全部支持。由于語言的限制，有些特性無法被轉(zhuǎn)義和填補(bǔ)。更多細(xì)節(jié)請(qǐng)查看core.js的相關(guān)說明。繼承內(nèi)建父類(Subclassable Built-ins )在ES2015中，語言內(nèi)置父類如 Array ，Date和Dom元素能夠被子類繼承。/ 子類繼承Arrayc

24、lass MyArray extends Array constructor(args) super(args); var arr = new MyArray();arr1 = 12;arr.length = 2部分支持(Partial support)能夠子類化的父類必須是基于類的，比如HTMLElement 能被子類繼承，然后由于ES5引擎的限制許多父類不能被子類化，如Date，Array和Error等。Math + Number + Stri ng + Object APIsES2015擴(kuò)展了很多新的API ,包括核心數(shù)學(xué)函數(shù)，數(shù)組轉(zhuǎn)換接口和實(shí)現(xiàn)對(duì)象復(fù)制功能的 Object.assign

25、。Number.EPSILONNumber.islnteger(lnfinity) / falseNumber.isNaN(NaN) / falseMath.acosh(3) / 1.762747174039086Math.hypot(3, 4) / 5Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) / 2abcde.includes(cd) / trueabc.repeat(3) / abcabcabcArray.from(document.querySelectorAII(*) /返回一個(gè)真正的數(shù)組Array.of(1,2, 3) /

26、類似new Array(.)，但只有一個(gè)參數(shù)時(shí)語義不變0, 0, 0.fill(7, 1) / 0,7,71,2,3.findlndex(x = x = 2) / 1a, b, c.entries() / iterator 0, a, 1,b, 2,ca, b, c.keys() / iterator 0, 1,2a, b, c.values() / iterator a, b, cObject.assign(Point, origin: new Point(0,0) )需要使用膩?zhàn)幽_本(不能完全模擬)(Limited support frompolyfill )通過Babel的膩?zhàn)幽_本，能夠

27、支持大部分API，然而，由于各種原因(例如，Strin totype .n ormalize需要添加大量代碼)并未全部支持。你可以點(diǎn)擊這里找到更多膩?zhàn)幽_本。二進(jìn)制和八進(jìn)制字面量(Bi nary and Octal Literals )新增了二進(jìn)制和八進(jìn)制字面量表示法(注意和原來的ES5廢棄的八進(jìn)制表示法不同)。0b111110111 = 503 / true0o767 = 503 / true僅支持字面量形式(Only supports literal form )Babel 僅能轉(zhuǎn)換 0o767，不支持 Numver(0o767)。Promises所謂Promise，就是一個(gè)對(duì)象，用來傳遞異步操作的消息。 它代表了某個(gè)未來才會(huì)知道 結(jié)果的事件(通常是一個(gè)異步操作)，并且