一文快速解读ES6新特性

摘要：是一项标准，于年月获得批准。静态限制在分配之前阻止使用。使用通用到基于自定义迭代器的迭代。迭代基于这些鸭子类型接口仅使用类型语法进行展示生成器生成器使用和简化迭代器。生成器是迭代器的子类型，包括额外的和。

ECMAScript 2015是一项ECMAScript标准，于2015年6月获得批准。

ES2015是该语言的重要更新，也是自2009年ES5标准化以来该语言的第一次重大更新。现在正在主要JavaScript引擎中实现这些功能。

有关 ECMAScript 2015语言的完整规范，请参阅ES2015标准。以下简要介绍仅供参考。

箭头函数是使用=>语法的函数简写。它们在语法上类似于C＃，Java 8和CoffeeScript中的相关功能。它们支持表达式和语句体。与函数不同，箭头函数与this周围的代码拥有相同的作用域。如果箭头函数在另一个函数内，它共享其父函数的“arguments”变量。

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

// Lexical this
var bob = {
  _name: "Bob",
  _friends: [],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f));
  }
};

// Lexical arguments
function square() {
  let example = () => {
    let numbers = [];
    for (let number of arguments) {
      numbers.push(number * number);
    }

    return numbers;
  };

  return example();
}

square(2, 4, 7.5, 8, 11.5, 21); // returns: [4, 16, 56.25, 64, 132.25, 441]

ES2015类比基于原型的OO模式简单。拥有一个方便的声明形式使类模式更易于使用，并鼓励互操作性。类支持基于原型的继承，super调用，实例和静态方法以及构造函数。

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

扩展了对象字面量，以支持在构造时设置原型，为foo: foo分配提供简写，定义方法和进行super调用。它们一起使对象字面量和类声明更加紧密，让基于对象的设计更方便。

var obj = {
    // Sets the prototype. "__proto__" or "__proto__" would also work.
    __proto__: theProtoObj,
    // Computed property name does not set prototype or trigger early error for
    // duplicate __proto__ properties.
    ["__proto__"]: somethingElse,
    // Shorthand for ‘handler: handler’
    handler,
    // Methods
    toString() {
     // Super calls
     return "d " + super.toString();
    },
    // Computed (dynamic) property names
    [ "prop_" + (() => 42)() ]: 42
};

该__proto__属性需要原生支持，并且在之前的ECMAScript版本中已弃用。大多数引擎现在支持该属性，但有些则不支持。

模板字符串为构造字符串提供语法糖。这类似于Perl，Python等中的字符串插值功能。可选的，可以添加标签以允许定制字符串构造，避免注入攻击或从字符串内容构造更高级别的数据结构。

// Basic literal string creation
`This is a pretty little template string.`

// Multiline strings
`In ES5 this is
 not legal.`

// Interpolate variable bindings
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

// Unescaped template strings
String.raw`In ES5 "
" is a line-feed.`

// Construct an HTTP request prefix is used to interpret the replacements and construction
GET`http://foo.org/bar?a=${a}&b=${b}
    Content-Type: application/json
    X-Credentials: ${credentials}
    { "foo": ${foo},
      "bar": ${bar}}`(myOnReadyStateChangeHandler);

解构允许使用模式匹配进行绑定，并支持匹配数组和对象。类似于标准对象查找foo["bar"]，在未找到时产生值undefined。

// list matching
var [a, ,b] = [1,2,3];
a === 1;
b === 3;

// object matching
var { op: a, lhs: { op: b }, rhs: c }
       = getASTNode()

// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var {op, lhs, rhs} = getASTNode()

// Can be used in parameter position
function g({name: x}) {
  console.log(x);
}
g({name: 5})

// Fail-soft destructuring
var [a] = [];
a === undefined;

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

// Destructuring + defaults arguments
function r({x, y, w = 10, h = 10}) {
  return x + y + w + h;
}
r({x:1, y:2}) === 23

被调用者的默认参数值。在函数调用中将数组转换为连续的参数。将跟随参数绑定到数组。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) {
  // y is an Array
  return x * y.length;
}
f(3, "hello", true) == 6


function f(x, y, z) {
  return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6

块范围的绑定构造。let是新的var，const是单一任务。静态限制在分配之前阻止使用。

function f() {
  {
    let x;
    {
      // this is ok since it"s a block scoped name
      const x = "sneaky";
      // error, was just defined with `const` above
      x = "foo";
    }
    // this is ok since it was declared with `let`
    x = "bar";
    // error, already declared above in this block
    let x = "inner";
  }
}

Iterator对象支持自定义迭代，如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) {
  // truncate the sequence at 1000
  if (n > 1000)
    break;
  console.log(n);
}

迭代基于这些duck-typed(鸭子类型)接口（仅使用 TypeScript类型语法进行展示）：

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

生成器使用function*和简化迭代器yield。声明为function *的函数返回Generator实例。生成器是迭代器的子类型，包括额外的next和throw。这些使得值能够流回到生成器中，因此yield表达式形式返回一个值（或抛出）。

注意：也可用于启用"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) {
  // truncate the sequence at 1000
  if (n > 1000)
    break;
  console.log(n);
}

生成器接口是（仅使用TypeScript类型语法进行展示）：

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

支持完整Unicode的非破坏性添加，包括字符串中的新unicode文字形式和u处理代码点的新RegExp模式，以及用于处理21位代码点级别的字符串的新API。这些新增功能支持在JavaScript中构建全局应用程序。

// same as ES5.1
"