[翻譯] Learn ES2015

最近開始在項目中使用 Babel，利用十一的假期，將官方文檔 Learn ES2015 翻譯成中文，歡迎你們批評指正。

原文連接：https://babeljs.io/docs/learn-es2015/

簡介

ECMAScript 6是目前最新的ECMAScript標準，於2015年6月被批准。ES2015是該語言的一個顯著更新，也是自2009年ES5標準肯定後的第一個重大更新。如今，這些功能正在逐漸主要的JavaScript引擎實現。

查看ECMAScript 6語言ES2015版本的完整規範

ECMAScript 6 的新特性

箭頭函數

箭頭函數是使用=>符號對函數定義的簡寫，語法上相似於C#，Java8和CoffeeScript中的相關特性。他支持兩種寫法：表達式（Expression bodies）和函數體（Statement bodies）。值得注意的是，與通常的函數不一樣，函數體內的this對象，綁定定義時所在的對象，而不是使用時所在的對象。

// 使用表達式（Expression bodies）
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);

// 使用函數體（Statement bodies）
nums.forEach(v => {
  if (v % 5 === 0)
    fives.push(v);
});

// this 對象
var bob = {
  _name: "Bob",
  _friends: [],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f)
    );
  },
  // _printFriend 爲譯者添加 是使用function時的等價寫法
  _printFriends() {
    this._friends.forEach(function(f){
      console.log(this._name + " knows " + f)
    }.bind(this))
  }
};

類

ES2015的類只是一個語法糖，經過class關鍵字讓語法更接近傳統的面向對象模式，本質上仍是基於原型的。使用單一便捷的聲明格式，使得類使用起來更方便，也更具互操做性。類支持基於原型的繼承，調用父類的構造函數，生成實例，靜態方法和構造函數。

class SkinnedMesh extends THREE.Mesh {
  constructor(geometry, materials) {
    // 調用父類的構造函數 super是父類的實例
    super(geometry, materials);

    this.idMatrix = SkinnedMesh.defaultMatrix();
    this.bones = [];
    this.boneMatrices = [];
    //...
  }
  update(camera) {
    //...
    super.update();
  }
  // 靜態方法
  static defaultMatrix() {
    return new THREE.Matrix4();
  }
}

加強的對象字面量

經擴展後的對象字面量，容許在結構中設置原型，簡化了foo: foo這樣的賦值，定義方法和父級調用。這使對象字面量更接近類的聲明，並使得基於對象的設計更加方便。

var obj = {
    // __proto__
    __proto__: theProtoObj,
    // 不要設置內部原型
    '__proto__': somethingElse, //SyntaxError: Redefinition of __proto__ property
    // ‘handler: handler’的簡寫
    handler,
    // 聲明方法
    toString() {
     // 調用父級
     return "d " + super.toString();
    },
    // 計算（動態）屬性名
    [ "prop_" + (() => 42)() ]: 42
};

該__proto__須要原生支持，並在以前的ECMAScript版本中被棄用。目前大多數引擎支持該屬性，但仍有一些不支持。一樣注意到，僅web瀏覽器須要支持該屬性，參見附錄B。該屬性在Node環境中被支持。

模板字符串（Template Strings）

模板字符串提供了構建字符串的語法糖，相似於像Perl，Python等語言中的字符串插值。你也能夠構建一個自定義標籤，避免注入攻擊或用字符串內容構建更高層次的數據結構。

// 建立基本的模板字符串
`This is a pretty little template string.`

// 多行字符串
`In ES5 this is
 not legal.`

// 插入變量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

// 在模板字符串中不使用轉義
String.raw`In ES5 "\n" is a line-feed.`

// 建立一個HTTP請求頭的模板字符串，經過替換內容來構建請求
GET`http://foo.org/bar?a=${a}&b=${b}
    Content-Type: application/json
    X-Credentials: ${credentials}
    { "foo": ${foo},
      "bar": ${bar}}`(myOnReadyStateChangeHandler);

解構（Destructuring）

解構容許數組和對象使用模式匹配進行綁定。解構是故障弱化的，相似於標準對象以foo['foo']方式查找變量，當沒有找到時返回undefined。

// 列表（數組）匹配
var [a, , b] = [1,2,3];

// 對象匹配
var { op: a, lhs: { op: b }, rhs: c }
       = getASTNode()

// 對象匹配的簡寫
// 綁定當前做用域的 `op`, `lhs` 和 `rhs`
var {op, lhs, rhs} = getASTNode()

// 能夠用在函數的參數中
function g({name: x}) {
  console.log(x);
}
g({name: 5})

// 弱化解構
var [a] = [];
a === undefined;

// Fail-soft destructuring with defaults
var [a = 1] = [];
a === 1;

默認參數（Default） + 不定參數（Rest） + 擴展運算符（Spread）

調用具備默認參數的函數，將數組轉換爲連續的函數參數，將連續的函數參數轉換爲數組。Rest讓咱們再也不須要arguments，而且更直接地解決了一些常見的問題。

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

function f(x, ...y) {
  // ...運算符將x以後的參數轉換爲名爲y的數組
  return x * y.length;
}
f(3, "hello", true) == 6

function f(x, y, z) {
  return x + y + z;
}
// ...運算符將數組轉換爲連續的參數
f(...[1,2,3]) == 6

Let（局部變量） + Const（常量）

新增塊級做用域。let是新的var。const是單賦值（僅容許被賦值一次）。靜態限制（Static restrictions ）阻止變量在賦值前被使用。

function f() {
  {
    let x;
    {
      // 能夠執行，由於是在塊級做用域內
      const x = "sneaky";
      // 錯誤，常量不容許被賦值
      x = "foo";
    }
    // 能夠執行，由於是使用let聲明
    x = "bar";
    // 錯誤，在當前塊級做用域內已經被聲明瞭一次
    let x = "inner";
  }
}

迭代器（Iterators） + For..Of循環

迭代器對象容許像 CLR IEnumerable 或者 Java Iterable 同樣自定義迭代器。將for..in轉換爲自定義的基於迭代器的形如for..of的迭代，不須要實現一個數組，支持像 LINQ 同樣的惰性設計模式。

// 實現斐波那契數列的迭代器
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) {
  // 循環將在n > 1000 時結束
  if (n > 1000)
    break;
  console.log(n);
}

迭代器基於以下的鴨子類型的藉口（使用TypeScript類型的語法來解析）：

interface IteratorResult {
  done: boolean;
  value: any;
}
interface Iterator {
  next(): IteratorResult;
}
interface Iterable {
  [Symbol.iterator](): Iterator
}

要使用迭代器，你須要在項目中包含Babel的polyfill。

Generator

Generator經過使用function*和yield關鍵字簡化了迭代器的編寫。一個經過function*聲明的函數會返回一個Generators實例。Generator是迭代器包含額外的next和throw方法的子類型。這些特性使得值能夠流回Generator，故yield是一個能夠返回（或拋出）值的表達式。

標註：也能夠用於使用‘await’這樣的異步編程，詳見ES7await協議。

// 實現斐波那契數列
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) {
  // truncate the sequence at 1000
  if (n > 1000)
    break;
  console.log(n);
}

Generator一樣（使用TypeScript類型的語法來解析）：

interface Generator extends Iterator {
    next(value?: any): IteratorResult;
    throw(exception: any);
}

要使用Generator，你須要在項目中包含Babel的polyfill。

Comprehensions

在此頁面瞭解詳情。該功能目前屬於ES7 Strawman 協議。

該功能在Babel中默認是關閉的，只有當你在開啓實驗選項的時候纔可使用。詳見實驗選項。

Unicode 編碼

新增了一系列的擴展來支持完整的unicode編碼，其中包括字符串中新的unicode語法格式，正則表達式的u模式來處理代碼點，新的API也讓字符串能夠處理21位的代碼點（code points）。這些新特性容許咱們使用JavaScript構建國際化的應用。

// 和ES5.1相同
"?".length == 2

// 正則表達式新的u模式
"?".match(/./u)[0].length == 2

// 新的unicode格式
"\u{20BB7}" == "?" == "\uD842\uDFB7"

// 新的字符串方法
"?".codePointAt(0) == 0x20BB7

// for of迭代代碼點
for(var c of "?") {
  console.log(c);
}

模塊（Modules）

爲了定義組件，從語言層面對模塊進行了支持。編寫方式借鑑了流行的JavaScript模塊加載器（AMD, CommonJS）。由主機定義的默認加載器定義運行時的行爲。使用隱式異步模式——在模塊能夠被獲取和加載前不會有代碼執行。

// 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));

以及一些額外的功能：export default和export *

// 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的模塊轉換爲一下幾種格式：Common.js，AMD，System，以及UMD。你甚至能夠建立你本身的方式。詳見模塊文檔。

模塊加載器（Module Loaders）

並非ES2015的一部分：這部分ECMAScript 2015規範是由實現定義（implementation-defined）的。最終的標準將在WHATWG的Loader（加載器）規範中肯定。下面的內容來自於以前的ES2015草稿。

模塊加載器支持如下功能：

• 動態加載（Dynamic loading）
• 狀態一致性（State isolation）
• 全局空間一致性（Global namespace isolation）
• 編譯鉤子（Compilation hooks）
• 嵌套虛擬化（Nested virtualization）

你能夠對默認的加載器進行配置，新的加載器能構建評估並在獨立或受限的上下文中加載代碼。

// 動態加載 – ‘System’ 是默認的加載器
System.import("lib/math").then(function(m) {
  alert("2π = " + m.sum(m.pi, m.pi));
});

// 建立執行沙箱 – new Loaders
var loader = new Loader({
  global: fixup(window) // replace ‘console.log’
});
loader.eval("console.log(\"hello world!\");");

// 直接操做模塊的緩存
System.get("jquery");
System.set("jquery", Module({$: $})); // WARNING: not yet finalized

須要額外的polyfill：因爲Babel默認使用common.js的模塊，你須要一個polyfill來使用加載器API。點擊獲取。
使用模塊加載器：爲了使用此功能，你須要告訴Babel使用System模塊格式化工具。在此查看System.js。

Map + Set + WeakMap + WeakSet

爲常見算法的實現提供了更有效的數據結構。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 });
// 因爲傳入的對象沒有其餘引用，故將不會被set保存。

須要polyfill支持：爲了在全部環境下使用Maps，Sets，WeakMaps和WeakSets，你須要使用Babel的polyfill。

Proxies（代理對象）

代理對象能夠建立一個具備目標對象所有行爲的對象。可用於攔截，對象的虛擬化，記錄/分析等。

// 代理普通對象
var target = {};
var handler = {
  get: function (receiver, name) {
    return `Hello, ${name}!`;
  }
};

var p = new Proxy(target, handler);
p.world === "Hello, world!";

// 代理函數對象
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";

下面是全部運行級別元操做（meta-operations）中可能出現的traps：

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 :...
}

不支持的特性：因爲ES5的侷限性，Proxies沒法被轉換或者經過polyfill兼容，查看不一樣JavaScript引擎對該功能的支持。

Symbols

Symbol對對象的狀態進行訪問控制。Symbol容許對象的屬性不只能夠經過string（ES5）命名，還能夠經過symbol命名。symbol是一種基本數據類型。可選的name參數用於調試——但並非他自己的一部分。Symbol是惟一的，但不是私有的，由於他們使用諸如Object.getOwnPropertySymbols這樣的方法來使用。

(function() {

  // 模塊內的symbol
  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

經過polyfill部分實現：經過Babel的polyfill部分實現。因爲語言的限制，部分功能不能轉換或經過polyfill兼容。您能夠查看code.js的注意事項獲取更多信息。

可繼承內建對象

在ES2015中，能夠建立內建對象如Array，Date以及DOMElement的子類。

// 建立Array的子類
class MyArray extends Array {
    constructor(...args) { super(...args); }
}

var arr = new MyArray();
arr[1] = 12;
arr.length == 2

部分支持：因爲ES5引擎的限制，能夠建立HTMLElement的子類，但不能建立諸如Array，Date和Error等對象的子類。

Math + Number + String + Object APIs

新增不少功能，如核心的Math庫，數組轉換和用於對象複製的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("*")) // 將相似數組的對象轉換爲真正的數組
Array.of(1, 2, 3) // 相似與new Array()，可是當僅有一個參數時，二者表現不一樣
[0, 0, 0].fill(7, 1) // [0,7,7]
[1,2,3].findIndex(x => x == 2) // 1
["a", "b", "c"].entries() // 迭代結果 [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // 迭代結果 0, 1, 2
["a", "b", "c"].values() // 迭代結果 "a", "b", "c"

Object.assign(Point, { origin: new Point(0,0) })

經過polyfill有限的支持：上述許多API都經過polyfill進行了支持，可是部分特性因爲多種緣由沒有被實現（如，String.prototype.normalize須要編寫大量額外的代碼來實現），你能夠在這裏找到更多的polyfill。

二進制和八進制字面量

新增兩種數字字面量：二進制b和八進制o。

0b111110111 === 503 // true
0o767 === 503 // true

僅支持字面模式：Babel僅能夠轉換0o767，並不能轉換Number("0o767")。

Promises

Promises是一種異步編程的方式。Promises在未來可能會獲得支持。目前不少的JavaScript庫都使用了Promises。

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)]);
})

經過polyfill支持：要使用Promises，你須要引入Babel的polyfill。

Reflect API

完整的Reflect API使得能夠在運行級別對對象進行元操做。它至關與是Proxy API的逆，並容許調用對應的元操做，如proxy traps。這使得它在實現Proxy時很是有用。

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

經過polyfill支持：要使用Reflect API，你須要引入Babel的polyfill。

Tail Calls

如今遞歸調用函數不用擔憂棧無限增加，使得遞歸算法在面對無限的輸入時更加安全。

function factorial(n, acc = 1) {
    "use strict";
    if (n <= 1) return acc;
    return factorial(n - 1, n * acc);
}

// 現在運行這段代碼會致使棧溢出
// 可是在ES2015中，即使輸入很隨意也能夠安全運行
factorial(100000)

部分支持：該特性僅支持直接對自身引用的遞歸。因爲功能自己的複雜性和表現衝突，使得該特性沒法在全局下支持。

參考

• lukehoban/es6features
• ECMAScript 6新特性介紹
• ECMAScript6-下一代Javascript標準
• ECMAScript 6 入門