免費AI編程助手
ECMAScript 2015 簡易教程
背景
本文最初源自es6features，你可以到github上去加星。你可以使用REPL在線預(yù)覽這些特性。
簡介
ECMAScript 6 是ECMAScript標(biāo)準(zhǔn)的最新版本，于2015年6月批準(zhǔn)通過。ES2015是對語言的一次重大更新，是自從2009年ES5標(biāo)準(zhǔn)化后的第一次重大更新。主要的JavaScript引擎正在逐步實現(xiàn)這些特性，點擊這里查看瀏覽器的兼容情況。
查看ES2015 標(biāo)準(zhǔn)，了解關(guān)于ECMAScript 6語言的完整規(guī)范。
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)this
var bob = {
_name: "Bob",
_friends: [],
printFriends() {
this._friends.forEach(f =>
console.log(this._name + " knows " + f));
}
};
類（Classes）
ES2015中的類是對基于原型面向?qū)ο竽Ｊ降囊粋€簡單語法糖。有一個單一的聲明形式可以使類模式更容易使用，并鼓勵互操作性。類支持基于原型的繼承，超類調(diào)用(super)，實例方法，靜態(tài)方法和構(gòu)造函數(shù)。
class SkinnedMesh extends THREE.Mesh {
constructor(geometry, materials) {
super(geometry, materials);
this.idMatrix = SkinnedMesh.defaultMatrix();
this.bones = [];
this.boneMatrices = [];
//...
}
update(camera) {
//...
super.update();
}
static defaultMatrix() {
return new THREE.Matrix4();
}
}
增強(qiáng)對象字面量（Enhanced Object Literals）
對象字面量被擴(kuò)展支持直接設(shè)置原型，簡潔屬性賦值和方法，超類調(diào)用。這也讓對象字面量和類聲明的關(guān)系更密切，并讓基于對象的設(shè)計更便利。
var obj = {
// __proto__
__proto__: theProtoObj,
// 下面的寫法不會設(shè)置內(nèi)部原型
'__proto__': somethingElse,
// ‘handler: handler’的簡寫
handler,
// 方法
toString() {
// 調(diào)用父對象的方法
return "d " + super.toString();
},
// 屬性名是一個表達(dá)式
[ "prop_" + (() => 42)() ]: 42
};
__proto__屬性需要原生支持，這一屬性在ECMAScript前一個版本中一度被廢棄。目前為止，大部分引擎支持這一屬性。同時需要注意，僅僅web瀏覽器需要實現(xiàn)這一屬性，在Node中現(xiàn)在就可使用。
模版字符串（Template Strings）
模版字符串提供構(gòu)建字符串的語法糖。這類似Perl，Python等其他語言中的字符串插值?？梢赃x擇性添加一個標(biāo)簽，允許對字符串構(gòu)建的定制化，避免注入攻擊或其他需求。
// 普通字符串
`This is a pretty little template string.`
// 多行字符串
`In ES5 this is
not legal.`
// 字符串中嵌入變量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
// 模版標(biāo)簽
String.raw`In ES5 "\n" is a line-feed.`
// 下面構(gòu)造一個HTTP請求頭，來解釋差值替換和構(gòu)造
GET`http://foo.org/bar?a=${a}&b=$
Content-Type: application/json
X-Credentials: ${credentials}
{ "foo": ${foo},
"bar": ${bar}}`(myOnReadyStateChangeHandler);
解構(gòu)（Destructuring）
按照一定模式，從數(shù)組和對象中提取值，對變量進(jìn)行賦值，這被稱為解構(gòu)。解構(gòu)失敗是靜默的，類似標(biāo)準(zhǔn)的對象屬性查找foo[“bar”]，找不到值則為undefined。
// 列表匹配
var [a, , b] = [1,2,3];
// 對象匹配
var { op: a, lhs: { op: b }, rhs: c }
= getASTNode()
// 對象匹配簡寫
// 綁定作用域中的 `op`, `lhs` 和 `rhs`
var {op, lhs, rhs} = getASTNode()
// 函數(shù)參數(shù)
function g({name: x}) {
console.log(x);
}
g({name: 5})
// 解構(gòu)失敗，賦值為undefined
var [a] = [];
a === undefined;
// 如果有默認(rèn)值，則為默認(rèn)值
var [a = 1] = [];
a === 1;
默認(rèn)值 + Rest參數(shù) + 擴(kuò)展運算符（Default + Rest + Spread）
現(xiàn)在函數(shù)調(diào)用可以傳遞默認(rèn)參數(shù)了；擴(kuò)展運算符允許將數(shù)組轉(zhuǎn)化為函數(shù)的參數(shù)傳入；rest參數(shù)，用于獲取函數(shù)的多余參數(shù)，這樣就不需要使用arguments對象了。
function f(x, y=12) {
// 如果不傳遞y或傳遞undefined，y的值為12
return x + y;
}
f(3) == 15
function f(x, ...y) {
// y是一個數(shù)組
return x * y.length;
}
f(3, "hello", true) == 6
function f(x, y, z) {
return x + y + z;
}
// 將數(shù)組擴(kuò)展為三個參數(shù)
f(...[1,2,3]) == 6
Let + Const
let類似于var，但是所聲明的變量，只在let命令所在的代碼塊內(nèi)有效。const也用來聲明變量，但是聲明的是常量。一旦聲明，常量的值就不能改變。
function f() {
{
let x;
{
// 塊作用域
const x = "sneaky";
// const常量重新賦值會報錯
x = "foo";
}
// let變量可以再次賦值
x = "bar";
// 在塊作用域中重復(fù)聲明將會報錯
let x = "inner";
}
}
Iterator和for..of循環(huán)（Iterators + For..Of）
遍歷器對象能夠自定義遍歷行為，這很像Java的Iterable。新增的for..of用來代替for..in。并不需要是數(shù)組，任何數(shù)據(jù)結(jié)構(gòu)只要部署Iterator接口，就可以完成遍歷操作。
let fibonacci = {
[Symbol.iterator]() {
let pre = 0, cur = 1;
return {
next() {
[pre, cur] = [cur, pre + cur];
return { done: false, value: cur }
}
}
}
}
for (var n of fibonacci) {
if (n > 1000)
break;
console.log(n);
}
遍歷器基于弱類型接口（下面是使用TypeScript語法的展示）：
interface IteratorResult {
done: boolean;
value: any;
}
interface Iterator {
next(): IteratorResult;
}
interface Iterable {
[Symbol.iterator](): Iterator
}
需要膩子腳本（Support via polyfill）
使用遍歷器需要引用Babel膩子腳本。
Generator 函數(shù)（Generators）
Generator函數(shù)是ES6提供的一種異步編程解決方案，語法行為與傳統(tǒng)函數(shù)完全不同。Generator函數(shù)有多種理解角度。從語法上，首先可以把它理解成，Generator函數(shù)是一個狀態(tài)機(jī)，封裝了多個內(nèi)部狀態(tài)。
執(zhí)行Generator函數(shù)會返回一個遍歷器對象，也就是說，Generator函數(shù)除了狀態(tài)機(jī)，還是一個遍歷器對象生成函數(shù)。返回的遍歷器對象，可以依次遍歷Generator函數(shù)內(nèi)部的每一個狀態(tài)。
形式上，Generator函數(shù)是一個普通函數(shù)，但是有兩個特征。一是，function命令與函數(shù)名之間有一個星號；二是，函數(shù)體內(nèi)部使用yield語句，定義不同的內(nèi)部狀態(tài)（yield語句在英語里的意思就是“產(chǎn)出”）。
注意：也可以使用‘a(chǎn)wait’——類似異步編程，參見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) {
// 截斷1000以后的數(shù)據(jù)
if (n > 1000)
break;
console.log(n);
}
generator接口原理如下（使用TypeScript語法的模擬）：
interface Generator extends Iterator {
next(value?: any): IteratorResult;
throw(exception: any);
}
需要膩子腳本（Support via polyfill）
為了使用Generator，需要引用Babel的膩子腳本。
Unicode
ES6增強(qiáng)了對Unicode的支持，包括新的unicode字面量和新的正則匹配參數(shù)u模式，以及新的API來處理超過兩個字節(jié)的字符。
// ES5.1中
"????".length == 2
// 新的正則參數(shù) u
"????".match(/./u)[0].length == 2
// 新的表示法
"\u{20BB7}" == "????" == "\uD842\uDFB7"
// 新字符串方法
"????".codePointAt(0) == 0x20BB7
// for-of
for(var c of "????") {
console.log(c);
}
模塊（Modules）
語言級支持定義模塊和組件。新模塊的設(shè)計匯總了流行JavaScript模塊加載器（AMD，CommonJS）的優(yōu)點。模塊的實現(xiàn)機(jī)制由運行時環(huán)境實現(xiàn)。隱式異步模型——模塊加載完成之前代碼不會執(zhí)行。
// lib/math.js
export function sum(x, y) {
return x + y;
}
export var pi = 3.141593;
// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));
// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));
可以設(shè)置導(dǎo)出默認(rèn)值和導(dǎo)出全部：
// lib/mathplusplus.js
export * from "lib/math";
export var e = 2.71828182846;
export default function(x) {
return Math.exp(x);
}
// app.js
import exp, {pi, e} from "lib/mathplusplus";
alert("2π = " + exp(pi, e));
模塊格式化
Babel可以將ES2015的模塊轉(zhuǎn)譯成幾種不同的模塊格式，包括Common.js，AMD，System和UMD。你甚至可以創(chuàng)建自己的模塊格式，更多細(xì)節(jié)可以查看模塊的文檔。
Map + Set + WeakMap + WeakSet
專為常見算法設(shè)計的高效數(shù)據(jù)結(jié)構(gòu)。WeakMaps提供對象的弱引用作為鍵名的索引表。
// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;
// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;
// Weak Maps
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined
// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });
// Because the added object has no other references, it will not be held in the set
需要使用polyfill
為了使用這些新數(shù)據(jù)結(jié)構(gòu)，你必須引入babel的膩子腳本。
代理（Proxies）
Proxy可以理解成，在目標(biāo)對象之前架設(shè)一層“攔截”，外界對該對象的訪問，都必須先通過這層攔截，因此提供了一種機(jī)制，可以對外界的訪問進(jìn)行過濾和改寫。
// 代理對象
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 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 =
{
// target.prop
get: ...,
// target.prop = value
set: ...,
// 'prop' in target
has: ...,
// delete target.prop
deleteProperty: ...,
// target(...args)
apply: ...,
// 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 instanceof 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）
由于ES5的局限性，Proxy不能被轉(zhuǎn)換和填補(bǔ)。點擊這里查看瀏覽器支持情況。
Symbols
Symbol 可以作為對象的鍵值，是一種新的原始類型。Symbol函數(shù)可以接受一個字符串作為參數(shù)，表示對Symbol實例的描述，主要是為了在控制臺顯示，或者轉(zhuǎn)為字符串時，比較容易區(qū)分。Symbol是獨一無二的，但可以通過Object.getOwnPropertySymbols獲取到。
(function() {
// 塊級作用域
var key = Symbol("key");
function MyClass(privateData) {
this[key] = privateData;
}
MyClass.prototype = {
doStuff: function() {
... this[key] ...
}
};
// Babel不能支持下面的操作，需要原生支持
typeof key === "symbol"
})();
var c = new MyClass("hello")
c["key"] === undefined
需要膩子腳本（不完備）（Limited support via polyfill）
需要使用Babel的膩子腳本，但無法全部支持。由于語言的限制，有些特性無法被轉(zhuǎn)義和填補(bǔ)。更多細(xì)節(jié)請查看core.js的相關(guān)說明。
繼承內(nèi)建父類（Subclassable Built-ins）
在ES2015中，語言內(nèi)置父類如Array，Date和Dom元素能夠被子類繼承。
// 子類繼承Array
class MyArray extends Array {
constructor(...args) { super(...args); }
}
var arr = new MyArray();
arr[1] = 12;
arr.length == 2
部分支持（Partial support）
能夠子類化的父類必須是基于類的，比如HTMLElement能被子類繼承，然后由于ES5引擎的限制許多父類不能被子類化，如Date，Array和Error等。
Math + Number + String + Object APIs
ES2015擴(kuò)展了很多新的API，包括核心數(shù)學(xué)函數(shù)，數(shù)組轉(zhuǎn)換接口和實現(xiàn)對象復(fù)制功能的Object.assign。
Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false
Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2
"abcde".includes("cd") // true
"abc".repeat(3) // "abcabcabc"
Array.from(document.querySelectorAll("*")) // 返回一個真正的數(shù)組
Array.of(1, 2, 3) // 類似new Array(...)，但只有一個參數(shù)時語義不變
[0, 0, 0].fill(7, 1) // [0,7,7]
[1,2,3].findIndex(x => x == 2) // 1
["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: new Point(0,0) })
需要使用膩子腳本（不能完全模擬）（Limited support from polyfill）
通過Babel的膩子腳本，能夠支持大部分API，然而，由于各種原因（例如，String.prototype.normalize需要添加大量代碼）并未全部支持。你可以點擊這里找到更多膩子腳本。
二進(jìn)制和八進(jìn)制字面量（Binary and Octal Literals）
新增了二進(jìn)制和八進(jìn)制字面量表示法（注意和原來的ES5廢棄的八進(jìn)制表示法不同）。
0b111110111 === 503 // true
0o767 === 503 // true
僅支持字面量形式（Only supports literal form）
Babel僅能轉(zhuǎn)換0o767，不支持Numver("0o767")。
Promises
所謂Promise，就是一個對象，用來傳遞異步操作的消息。它代表了某個未來才會知道結(jié)果的事件（通常是一個異步操作），并且這個事件提供統(tǒng)一的API，可供進(jìn)一步處理。目前JavaScript庫已在使用中。
function timeout(duration = 0) {
return new Promise((resolve, reject) => {
setTimeout(resolve, duration);
})
}
var p = timeout(1000).then(() => {
return timeout(2000);
}).then(() => {
throw new Error("hmm");
}).catch(err => {
return Promise.all([timeout(100), timeout(200)]);
})
需要使用膩子腳本（Support via polyfill）
要想使用Promises需要引用Babel膩子腳本。
反射（Reflect API）
Reflect對象與Proxy對象一樣，也是ES6為了操作對象而提供的新API。
var O = {a: 1};
Object.defineProperty(O, 'b', {value: 2});
O[Symbol('c')] = 3;
Reflect.ownKeys(O); // ['a', 'b', Symbol(c)]
function C(a, b){
this.c = a + b;
}
var instance = Reflect.construct(C, [20, 22]);
instance.c; // 42
需要使用膩子腳本（Support via polyfill）
Reflect API需要引用babel 膩子腳本。
尾調(diào)用（Tail Calls）
尾調(diào)用（Tail Call）是函數(shù)式編程的一個重要概念，本身非常簡單，一句話就能說清楚，就是指某個函數(shù)的最后一步是調(diào)用另一個函數(shù)。
對于尾遞歸來說，由于只存在一個調(diào)用幀，所以永遠(yuǎn)不會發(fā)生“棧溢出”錯誤。
function factorial(n, acc = 1) {
"use strict";
if (n <= 1) return acc;
return factorial(n - 1, n * acc);
}
// 現(xiàn)在的實現(xiàn)大部分都會移除，但在ES2015中不會
factorial(100000)
原文鏈接
https://babeljs.io/docs/learn-es2015/
更多資料
原文網(wǎng)址：http://yanhaijing.com/javascript/2015/09/11/learn-es2015/
打賞其他方式
本文對你有幫助？那就賞杯咖啡吧
微信掃一掃轉(zhuǎn)賬
支付寶掃一掃轉(zhuǎn)賬
掃描二維碼
下載編程獅App
編程獅公眾號
更多建議：